Many of the controls in Infor CRM (Saleslogix) are composite controls. This means, that a single control you add to a quickform, such as a picklist, address control, date picker, etc, are rendered on the web as multiple controls that make up that single control. On top of that, many of these controls are transformed at runtime as they are converted by the Dojo libraries into Dijit widget based controls. This can present a problem if you want to do things to the control, such as change it’s background color, since the ASP.NET control that you modify in a C# action on the quickform isn’t what the user ends up seeing in the UI.
You could add a CSS file master page, but that means another thing to modify. A solution to this (when changing the background color of the control) is to inject some Javascript/CSS onto the page at runtime, which also allows you to conditionally change the color of the control as well.
When injecting this Javascript/CSS to the page, if you add these to the controls themselves, by adding style to the control elements, many of these changes will be lost when the controls are transformed into Dijits. However, by adding the style to the page HEAD will ensure the style sticks.
The trick is to use the Chrome dev tools inspector to find the elements you need to add the background-color style to. This makes it easy since you can add the background-color style to the elements there as well to see if that is what to need. Once you get that all figured out you can take the CSS selectors to add at runtime in a LoadAction.
This is an example of changing a Currency control named “numShipping” (the “Shipping Costs” control on the insert sales order screen) in a LoadAction. The CSS selector that we want to apply the background-color to is:
- #MainContent_InsertSalesOrder_numShipping_InputCurrency_CurrencyTextBox
ScriptManager.RegisterClientScriptBlock(this, GetType(), "salesOrderStyle1_Script", "$('head').append('<style type=\"text/css\">#MainContent_InsertSalesOrder_numShipping_InputCurrency_CurrencyTextBox { background-color: #9CFF9C !important; }</style>');", true);
What is happening there is we get the HEAD element and append the style to it, using one of the ID of the numShipping control’s composite elements. Note we have to include !important to override the style added by the dijit transformation. We found that this was the right control by digging around in the inspector. In the end, we’ll have this:
Now, let’s do the same for a picklist. This is a picklist named “pklStatus” (which is the status picklist on the insert sales order screen). A picklist has more parts so we’ll need to color a couple of things. For this, the CSS selectors that we need to apply the background-color to are:
- #widget_MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo
- #MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo
ScriptManager.RegisterClientScriptBlock(this, GetType(), "salesOrderStyle2_Script", "$('head').append('<style type=\"text/css\">#widget_MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo, #MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo { background-color: #F9F988 !important; }</style>');", true);
and we end up with this:
Checkboxes are a bit different. A checkbox renders as two separate controls. The actual checkbox nested inside a div and a separate label that contains the text for the checkbox. The problem is that the label itself does not have an ID, nor does the parent div it is inside of. This makes it a bit trickier to select in CSS, but luckily the label is associated with the checkbox with a “for” attribute. We can use that to select the label and add our color to it. Using the “Do Not Solicit” checkbox on the Contact Detail, you would be selecting the following in your CSS:
- label[for=MainContent_ContactDetails_chkDoNotSolicit]
ScriptManager.RegisterClientScriptBlock(this, GetType(), "chkDoNotSolicit_Script", "$('head').append('<style> label[for=MainContent_ContactDetails_chkDoNotSolicit] { color: #FD6767; }</style>');", true);
We’ll end up with this:
It’s more work than I’d like to do to color a control, but it’s a working, viable solution. One thing to note, for all of the code samples you can replace the hardcoded name for the controls with the ClientID value for the control.
Alternative Approach
The code samples above show how to change the control colors at runtime, for a given single control. However, there are several different approaches to this. You can easily combine the CSS you are appending to the head in a single statement, like this:
ScriptManager.RegisterClientScriptBlock(this, GetType(), "salesOrderStyle2_Script",
@"$('head').append('<style type=\"text/css\">
#widget_MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo,
#MainContent_InsertSalesOrder_pklStatus-SingleSelectPickList-Combo {
background-color: #F9F988 !important;
}
#MainContent_InsertSalesOrder_numShipping_InputCurrency_CurrencyTextBox {
background-color: #9CFF9C !important;
}
</style>');", true);
Now you’re adding the CSS for the Currency control and the Picklist to the head all at once and the code is more readable as well.
Lastly, one more alternative approach is to simply add the style changes for the controls to a separate CSS file and add that CSS to the master page. This way might work best if you’re changing a lot of different controls throughout the system and the changing of the controls isn’t conditional in any way. A possible downside to adding the stylesheet is that you need to modify the base.master master page. You’ll need to either merge any future changes to that master in upgrades or add back in the change anytime you add in an upgrade bundle.
