In this example we will see how to make the table UI element as an Input option for the user. Let us consider an example where user wants to enter the observation. If we create a form with input fields for the user to enter the observation, for entering five observations it will take a total of five times for the user to submit each observations one after another. Hence we create a Table UI element with Input field; user can enter all the observations at once and submit it in the database table.
Step 1:
Go to the Tcode SE80 and create a Webdynpro component as shown below.
Assign the component to the package or save it in local object.
Step 2:
Go to the context tab of the view controller and create context node as below.
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the node as shown below.
Enter the attribute name and type and press enter.
Attributes will be created as below.
Similarly create the other attributes as below.
Attributes for the node will be created as below.
Step 3: Go to the layout of the view controller and insert the table UI element in the view designer.
Right click on the ROOTUIELEMENTCONTAINER and click on insert element.
Provide the ID and type of the UI element.
Right click on the table UI element and select create binding.
Choose the context node observation by right clicking on the context.
Change the cell editor of the table column as shown below.
Enter the suitable label for the column. Save and activate the whole program and create an application to test the program.
Step 4:
Create a Webdynpro application as shown below.
Output:
Still the table will be in non-editable mode only, the reason is there is no records in the internal table.
Step 5: Go to the DOINIT method and initialize some records in the table.
Using the code wizard, set the node as table operation.
Code will be generated as below.
Modify the code as below.
Save and activate the component and test the application.
Output:
Enter the values.
Here we can place a button UI element and on click of that button UI element we can read the context node and update the data in the table.
0 Comments:
Post a Comment