Table UI Element with cell variant

[Former Member]

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

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.

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

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.

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

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

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

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

Enter the ID and the type for the cell variant.

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

Specify the UI element type and press enter.

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.

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 colum then the system displays the UI element(Link to action) specified in the variant.

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.

Code will be generated as below.

Note: I have removed the unwanted codes.  Modify the code as below. Passing the variant to the cell makes the difference.

Save and activate the whole component.  Step 6: Create an webdynpro application to test the component.

Output: