Tags

, , , , ,

Hello Everyone,

I recently came across a very nice Blog from Stephanus Natawardaja which talks to prettify the Entity forms in CRM 2013. I am writing this blog to share with all and remind myself the steps I followed up to use the steps mentioned in his post on Multiple-Forms of an Entity.

In one of my Previous blog I talked about switching to Multiple Forms based on their record values saved to their particular Form-types. Similarly for one of my project, I created different forms for Contact Entity namely Doctors, Patients and Associates.  I used the same steps mentioned and first created 3 CSS Webresources with the following scripts using 3 different color code:-

.ms-crm-ListArea { border: 1px solid #999; width: auto !important; }
.ms-crm-Form-SubGrid-Layout-Lite { background: #F3F3F4; padding-top: 2px; border: 1px solid #999; border-bottom: 1px solid #ccc; }
#formHeaderContainer { border-top: 1px dotted #999; background: #FF8080; border-bottom: 1px dotted #999 !important; padding-left: 5px; padding-right: 5px; }

Kindly follow up my Next Blog to easily find the Color code for your selected color.

Then I created another JScript Webresource with the following code:-

function LoadCSS(path) {
debugger;
 var head = document.getElementsByTagName('head')[0];
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = path;
 link.media = 'all';
 head.appendChild(link);
}
function pagetype() {
var item = Xrm.Page.ui.formSelector.getCurrentItem();
itemLabel = item.getLabel();
//alert(itemLabel);
debugger;
var formType= Xrm.Page.ui.getFormType();
if(formType == 1)
{
if (itemLabel == "Patients")
{
Xrm.Page.getAttribute('new_contacttype').setValue(1) ;
LoadCSS("WebResources/new_ColorRed");
}
if (itemLabel == "Doctors")
{
Xrm.Page.getAttribute('new_contacttype').setValue(2) ;
LoadCSS("WebResources/new_ColorGreen");
}
if (itemLabel == "Associates")
{
Xrm.Page.getAttribute('new_contacttype').setValue(3) ;
LoadCSS("WebResources/new_ColorBlue");
}
}
else{
if (Xrm.Page.getAttribute('new_contacttype').getText() == "Patients" )
{
 if (itemLabel != "Patients")
 {
 //load Information form
 var items = Xrm.Page.ui.formSelector.items.get();
 for (var i in items)
 {
 var form= items[i];
 var formId = form.getId();
 var formLabel = form.getLabel();
//Check condition either on ID or Label from Form
 if (formLabel == "Patients")
{ 
 //alert(formId );
 //alert(formLabel);
 form.navigate();
 } 
 }
 } 
LoadCSS("WebResources/new_ColorRed");
}
else if (Xrm.Page.getAttribute('new_contacttype').getText() == "Doctors" )
{
 if (itemLabel != "Doctors")
 {
 //load Ashwani form
 var items = Xrm.Page.ui.formSelector.items.get();
 for (var i in items)
 {
 var form= items[i];
 var formId = form.getId();
 var formLabel = form.getLabel();
//Check condition either on ID or Label from Form
 if (formLabel == "Doctors")
{ 
 //alert(formId );
 //alert(formLabel);
 form.navigate();
 } 
 }
 } 
LoadCSS("WebResources/new_ColorGreen");
}
else if (Xrm.Page.getAttribute('new_contacttype').getText() == "Associates" )
{
 if (itemLabel != "Associates")
 {
 //load Ashwin form
 var items = Xrm.Page.ui.formSelector.items.get();
 for (var i in items)
 {
 var form= items[i];
 var formId = form.getId();
 var formLabel = form.getLabel();
//Check condition either on ID or Label from Form
 if (formLabel == "Associates")
{ 
 //alert(formId );
 //alert(formLabel);
 form.navigate();
 } 
 }
 } 
LoadCSS("WebResources/new_ColorBlue");
}
}
}

Following this, I added the JScript webresource on all the 3 forms and called up the function pagetype on On-Load.

The results were as expected and following were the changes:-

  • Change in the Background color for the Form Header.
  • Highlight the Border of the Subgrid along with its Header color.

Contact form for Doctors :-

 

Contact Form for Patients :- 

 

Contact Form for Associates :- 

 

Thanks !!!

🙂