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

Table with Cell Variant

In the following post we are going to see how to use the table UI element with cell variant. The purpose of cell variant is to determine what is the cell editor supposed to be displayed in a particular column of the cell. If you ask me is it possible whether in particular column of the table can a first row be displayed as button UI element and the second row to be displayed as link to action UI element my answer would be yes we could do it with the help of cell variant.

Scenario:  Let us consider that there is a requirement where in you want to display the link to action only to certain rows of the column based upon a condition.

Before starting to develop the component let us discuss a bit on how the cell variant works. If you have worked with table UI element before you must be aware of how the table is created with its no of columns.

clip_image001

Now you must be clear that the type of UI element the cell editor holds will be displayed on the screen. Now for our requirement we need two types of UI element(Link to action and text view) to be the cell editor out of which one has to be simultaneously displayed as the table cell based upon the condition.

To do that we need to create a cell variant to the column and assign a type of UI element to the variant.

clip_image002

Step 1 : Go to the Tcode SE80 and create a webdynpro component.

clip_image003

Assign the component to the package or save it in the local object.

Step 2: In the context tab of the view controller create the context node  of cardinality 0..N with the attributes as shown below.

clip_image004

Step 3: Go to the layout tab of the view controller and insert a table UI element as shown below.

clip_image005

Right click on the tab UI element and create binding as shown below.

clip_image006

Step 4: In the properties of the Table column bind the attribute variant to the selected cell variant property.


clip_image007

Right click on the table column and select insert cell variant.

clip_image008

Enter the ID and the type for the cell variant.

clip_image009

Right click on the variant and insert editor to add the cell editor.

clip_image010

Specify the UI element type and press enter.

clip_image011

Bind the text property of the Link to action UI element to the field1 attribute as shown below and create an action for the link to action UI element.

clip_image012

 

clip_image013

Provide  variant key for the cell variant. When the context attribute binded to the selected cell variant property of the table column contains this value entered in the table column then the system displays the UI element(Link to action) specified in the variant.

clip_image014

Step 5: Go to the methods tab of the view controller and in the doinit method initialize the values for the context attributes.

Set the context node as table operation.

clip_image015

Code will be generated as below.

clip_image016

Note: I have removed the unwanted codes.

Modify the code as below. Passing the variant to the cell makes the difference.

clip_image017

Save and activate the whole component.

Step 6: Create an webdynpro application to test the component.

clip_image018

Output:

 clip_image019

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.