Change Property of the Label and Input field in UI for Form View – Part 2

In the previous tutorial Change Color of the Label and Input field in UI for Form View – Part 1 I have shown how to change the color property of the fields or labels.

In this tutorial I am going to show how to change the properties of an input field and labels.

Step 1: I have created a BSP Application with a value node which has 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: lr_bee        TYPE REF TO cl_bsp_bee_table,
lr_label      TYPE REF TO cl_thtmlb_label,      ” Label Properties
lr_inputfield TYPE REF TO cl_thtmlb_inputfield, ” Input field Properties
lv_html       TYPE        string.

CREATE OBJECT lr_bee.

CASE iv_binding_string.
WHEN ‘//COUNTRY/COUNTRYNAME’.         ” Check the current processing field is for countryname
IF iv_element_name = ‘label’.
lr_label ?= iv_element_bee.
lr_label->design = ‘HEADER1’.     ” Style of label (font property)
lr_label->textdirection = ‘LTR’.  ” Label Direction (Left)
lr_label->required = abap_true.   ” Creates required mark on label
ENDIF.

WHEN ‘//COUNTRY/COUNTRYCODE’.         ” Check the current processing field is for countrycode
IF iv_element_name = ‘inputfield’.
lr_inputfield ?= iv_element_bee.
lr_inputfield->password = abap_true.  ” Makes field as password field
lr_inputfield->tooltip = ‘Enter Password’. ” Tool tip for the field
ENDIF.
ENDCASE.

lr_bee->add_bee( bee = iv_element_bee level = 2 ).
ev_replacement_bee = lr_bee.
ENDMETHOD.

Note: //COUNTRY/COUNTRYNAME – Here COUNTRY is the value node and COUNTRYNAME is the attribute of that node.

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

Snapshot:

The label “Name” is bold, left aligned, and size is increased with mandatory indication.