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

Table with input field

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.

clip_image001

Step 2:

Go to the context tab of the view controller and create context node as below.

clip_image002

Enter the name for the node and choose the cardinality and press enter.

clip_image003

Add attributes to the node as shown below.

clip_image004

Enter the attribute name and type and press enter.

clip_image005

Attributes will be created as below.

clip_image006

Similarly create the other attributes as below.

clip_image007

clip_image008

clip_image009

clip_image010

Attributes for the node will be created as below.

clip_image011

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.

clip_image012

Provide the ID and type of the UI element.

clip_image013

clip_image014

Right click on the table UI element and select create binding.

clip_image015

Choose the context node observation by right clicking on the context.

clip_image016

Change the cell editor of the table column as shown below.

clip_image017

clip_image018

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.

clip_image019

Output:

Still the table will be in non-editable mode only, the reason is there is no records in the internal table.

clip_image020

Step 5: Go to the DOINIT method and initialize some records in the table.

clip_image021

Using the code wizard, set the node as table operation.

clip_image022

Code will be generated as below.

clip_image023

Modify the code as below.

clip_image024

Save and activate the component and test the application.

Output:

clip_image025

Enter the values.

clip_image026

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.

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.