In many interfaces, numeric values tend to be right justified. In InforCRM however, all controls display their information with the text aligned to the left of the control. Recently I was asked about changing the text alignment of numeric controls to display the text to the right in the control.
While InforCRM doesn’t expose a text-alignment property in their controls, it is possible to set the style.textAlign property of the composite NumericTextBox control by injecting some javascript in the form.
In this example, I am creating a script variable which changes the control elements of two numeric fields, then applying that script using ScriptManager.RegisterStartUpScript.
string script = @"require(['dojo/ready'], function(ready){
ready(function(){
var tb1 = document.getElementById('" + NumField1.ClientID + @"_NumericTextbox_NumberTextBox'); if(tb1) tb1.style.textAlign = 'right';
var tb2 = document.getElementById('" + NumField2.ClientID + @"_NumericTextbox_NumberTextBox'); if(tb2) tb2.style.textAlign = 'right';
});
});";
ScriptManager.RegisterStartupScript(Page, GetType(), "myScript", script, true);
This code needs to be added to a new C# Code Snippet load action on a quickform, with the “On Paint Event” property equal to True. Adding additional numeric fields would simply be a matter of copying one of the “var tb* = ” lines, and updating the copied line with a new variable name, and the correct control name . (I’m using NumField1 and NumField2 as control names in my example).
After that new Load action is created, build and deploy, and the fields referenced should now be right justified.
Please Note: This will only work with Numeric controls. For other controls, you would need to examine the element to determine it’s ID value. For example, a regular text box will omit the “_NumericTextbox_NumberTextBox” value in the control ID, so that would be omitted.
So there you have it; code to change the text alignment on an ICRM Numeric control.
Thanks for reading!
(Thanks to Kris for helping work out the dojo code)
