Change Color of the Label and Input field in UI for Form View - Part 1

[Former Member]

     In CRM UI it is possible to customize the fields and labels so that the properties of fields or labels can be adjusted as we want. It is able to change the following properties of a field or label:

• Color.
• Border of text field.
• Type of input text field (Password).
• Alignment, etc.

     To set the properties you should have a little knowledge of html tags. The iterator class should be created for changing the property. The iterator class is triggered for each of the label and field that has to be displayed in the UI. Ex: Assume you have two fields ID and Name, iterator class is called twice for each of the fields, i.e., one for label and input field. So iterator is called 4 times.

Procedure:

Step 1: Assume we have a BSP Application. Create a form view with a value node called ‘COUNTRY’, with four attributes.

Step 2: Create a Z Class in SE24, say ZL_THTMLB_FORM_ITERATOR_SAMPLE. Add an interface IF_CHTMLB_FORM_ITERATOR.

Step 3: Implement the method RENDER_CELL_START of interface IF_CHTMLB_FORM_ITERATOR.

METHOD if_chtmlb_form_iterator~render_cell_start.
DATA: lv_bee     TYPE REF TO cl_bsp_bee_table.
DATA: lv_html    TYPE string.

* Create the replacement element
CREATE OBJECT lv_bee.

* Check whether this class is called for label or input field
IF iv_element_name   = 'label'.
*   Set the color of the label to red using the style tag
" Here 'C1_W1_V2_V5_thtmlb_label_4' is the ID for the label 'Name'
lv_html = '<style> label#C1_W1_V2_V5_thtmlb_label_4{ color:#FF0000; } </style>'.
ELSEIF iv_element_name   = 'inputfield'.
*   Set the color of input field to red
" Here 'C1_W1_V2_V5_country_countryname' is the ID for input field
lv_html = '<style> input#C1_W1_V2_V5_country_countryname{ border-color:red;} </style>'.
ENDIF.

* Add the new html code
lv_bee->add_html( html = lv_html level = 1 ).
lv_bee->add_bee( bee = iv_element_bee  level = 2 ).
* Return the new html
ev_replacement_bee = lv_bee.
ENDMETHOD.

Here I am changing the color of attribute country name. Now the question is how to get ID’s of label and input field. Follow the next step.

Step 4: Open the standard method IF_BSP_ELEMENT~DO_AT_BEGINNING of class CL_THTMLB_LABEL. This method gets called for each of the labels that is going to be displayed in the UI.

Put breakpoint at this method at line 16 (right after the method me->resolve_model_binding( ).). Watch the values of me->for and me->id variables.

In my UI I have four fields, so this method gets called for four times.

For attribute Country ID

For attribute Country Code

For attribute Country Name

For attribute Country Language

ME->ID holds the label ID. This ID should be used in RENDER_CELL_START method.

Note: In the same way to find the ID for the input fields, debug the method IF_BSP_ELEMENT~DO_AT_BEGINNING of class CL_THTMLB_INPUTFIELD. Check the field ME->ID. Even this method gets called for each of the field.

Step 5: Change the HTM file of form view to set the iterator.

Make the change as shown in the snap.

Line 6 -> Define a reference variable of the class which you created earlier.

Line 9 -> Create object.

Line 11 -> Set the iterator.

For Changing other properties of the input field or label: Change Property of the Label and Input field in UI for Form View - Part 2

Snapshot: