Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Reading the user input and setting the output

In the previous post we have seen how to create a simple Webdynpro component. We have created a Webdynpro component with a label and input field and we displayed it in the browser.

In this post we will see how to read the input entered in the browser and display the same in the output.

Scenario: we will create a button and on the click of that button we will read the values entered and display the output in a text view.

Step 1: In the view controller V_MAIN of the component ZCSK_SIMPLE which we created earlier, create a UI element Button.

Right click on the ROOTUIELEMENT Container and select insert element. Enter the ID and choose the Button UI element.

clip_image001

You can see the button UI element in the Layout with no description.

clip_image002

Enter the description in the text property of the Button UI element.

clip_image003

Once you have entered the properties, it will reflect in the UI element.

clip_image004

Still the UI element looks disabled. The button UI element requires an event handler method to perform an action on click of the button. To create an event to the Button do the following.

Click on create action button. Enter a name for the action and press enter.

clip_image005

In the properties you will be able to see the method.

clip_image006

We now require an attribute to be binded to the text view. Create an attribute output of type string as shown below.

Go to the context tab of the component controller and create an attribute in the node which we created in the previous application.

clip_image007

clip_image008

clip_image009

Go to the context of the view controller and Update the mapping so that the attribute which we added newly in the component controller will be reflected here in the view controller and accessible here.

clip_image010

Right click on the context node and update the mapping.

clip_image011

System will prompt you to match the node. Select Yes.

clip_image012

System will again prompt you to copy the attributes. Press yes.

clip_image013

Now we can see the attributes reflected in the view controller.

clip_image014

In the layout of the view controller insert a textview UI element.

clip_image015

Bind the text property of the text view UI element to the attribute output.

clip_image016

To arrange the layout double click on the ROOTUIELEMENTCONTAINER and change the property of layout to matrix layout.

clip_image017

Choose the text view UI element and change its layout property to Matrixheaddata so that the UI element will be displayed in the next row.

clip_image018

clip_image019

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.

clip_image020

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.

clip_image021

clip_image022

Press enter to generate the code.

clip_image023

Code will be generated as below.

clip_image024

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”.

clip_image025

Codes will be generated as below.

clip_image026

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.

clip_image027

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.

clip_image028

Enter the name and click on submit.

clip_image029

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

clip_image030

About Arun

8 Comments:

  1. u dont show how to get the name tab in the above screen remain all is good

    ReplyDelete
    Replies
    1. Hi Sudheer, I did not get what you were trying to say. Could you elaborate in detail what you couldn't understand. I will try to change it.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Before creating the button 1 step is their
    1) how to create a label (name field label)
    2)how to create the input element for name
    this step also u can insert and it is completely perfect ok any clarifications u post a comment

    ReplyDelete
    Replies
    1. HI Sudheer,

      Thank you for your feedback. This tutorial is a continuation of previous tutorial. you need to go through in order.

      http://www.teamabap.com/2014/05/a-simple-webdynpro-application.html

      Thanks & Regards,
      Arun K

      Delete

Powered by Blogger.