Now write the logic which is to be done on the click of submit button. Write the following code in the event we declared for the submit button.

 

Use the code wizard icon to generate the code. First read the input entered in the screen using the code wizard. The Input field has been binded to the attribute ‘ATTRIBUTE’ and whatever the input has been entered by the user will be in that attribute. To know what user has entered we need to read that attribute.

 

Click on the code wizard icon, choose the context operation as read and select the context attribute using the F4 help.

 

 

Press enter to generate the code.

 

Code will be generated as below.

 

Whatever the values entered by the user will now be in the attribute LV_ATTRIBUTE. Now let us set this value to the text view to be displayed in the output.

 

Using the code wizard, choose the context operation as set and set the attribute “OUTPUT”.

 

Codes will be generated as below.

 

Remove the unwanted codes, Since we are performing action on the attributes belonging to the same context node few object will be declared again remove those attributes.

 

Before the set attribute method pass the input values read in the variable lv_attribute to the variable lv_output which is going to be set.

 

Final coding to be in the method submit.

data lo_nd_node type ref to if_wd_context_node.
data lo_el_node type ref to if_wd_context_element.
data ls_node type wd_this->element_node.
data lv_attribute type wd_this->element_node-attribute.

lo_nd_node = wd_context->get_child_node( name = wd_this->wdctx_node ).

lo_el_node = lo_nd_node->get_element( ).

lo_el_node->get_attribute(
exporting
name = `ATTRIBUTE`
importing
value = lv_attribute ).

* Set the attribute
data lv_output type wd_this->element_node-output.

lv_output = lv_attribute.

lo_el_node->set_attribute(
name = `OUTPUT`
value = lv_output ).

 

Save and activate the component. Test the application.

 

Enter the name and click on submit.

 

You can see the entered name in the text view, we placed.