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

Table Popin

 

Popins are Insertion between the rows of the table. There are two kinds of Popins.

 

1. Row popin

2. Cell Popin

 

Popins are linked to a table for row popin where as popins are linked to a table column for a cell popin.

 

clip_image002[4]

 

clip_image004[4]

 

With a cell popin an associated background color of the popin is assigned to the cell so that we can see which cell does this popin belongs to.

 

SAP has provided a UI element TablePopinToggleCell to provide the expansion and closing of the table Popin. This TablePopinToggleCell is a cell variant and all we have to do is to simply insert it in a table column and set the selected cell variant of the table column and the variant key of the tablepopintogglecell with a common value, but it should not be null.

 

clip_image006[4]

 

Apart from this the root table UI element property “selected popin” must be binded to the attribute of type string, so that when ever a table popin toggle cell is selected in a particular row the system will provide a value “tablepopin” to the attribute binded to the selectedpopin.

 

clip_image007 

 

 

Refer to the URL for more details on Table Popin.

 

http://help.sap.com/saphelp_erp2005/helpdata/en/23/5e9041d3c72e7be10000000a1550b0/content.htm

 

 

Now let us see a simple application to demonstrate the table popin.

 

Part I

 

Step 1: Goto SE80 and Create a webdynpro Component.

 

clip_image009

 

Assign it to a package or save it in a local object.

 

 

clip_image011

 

 

 

 

Step 2: In the component controller, create a node EKKO and EKPO as shown below.

 

clip_image013

 

If you want to add attributes from a dictionary structure or table then provide the table name or structure in the dictionary structure and click on the add attributes form the structure.

 

clip_image015

 

 

 

Select the required fields from the pop up which contains the fields of the dictionary structure provided by you.

 

clip_image017

 

 

The selected attributes will be added to your context node.

 

clip_image019

 

 

 

 

Similiarly create another node EKPO with cardinality 0..n. 

 

clip_image021

 

 

Step 3:

 

Now go to the view layout and insert the table UI element as shown below. Right click on the rootcontaineruielement and select insert element.

 

clip_image023

 

 

  

Provide the ID for the UI element and choose the type as table.

 

clip_image025

 

 

 

clip_image027

 

 

  

Step 4: Right click on the table UI element and select the insert table column option.

This particular column which we are adding now is for the tablepopintogglecell which I had mentioned above in the blog.

 

clip_image029

 

 

clip_image031

 

 

  

 

Right click on the inserted table column and add a cell variant to the column.

 

clip_image033

 

 

Select the cell variant as a table popin toggle cell.

 

 

clip_image035

 

 

 

 

clip_image037

 

 

Step 5: Right click on the table UI element and select create binding to add the columns to the table from the context node.

 

clip_image039

 

 

 

Click on the context button to choose the context node.

 

clip_image041

 

 

 

Select the context node EKKO and press enter.

 

clip_image043

 

 

Keep the cell editor as the text view and press enter.

 

 

clip_image045

 

 

clip_image047

 

You ll now be able to see the every column binded except the one which we have created for the table popin.

 

clip_image049

 

 

Step 6 : Go to the method DOINIT to initialize some values for the node EKKO.

 

clip_image051

 

 

 

 

Using code wizard set the node EKKO as a table operation and bind some records to the node.

 

 

clip_image053

 

 

Code will be generated by the system as below.

 

 

clip_image055

 

 

Select some records form the EKKO table and bind it.

 

clip_image057

 

 

 

 

Step 7: Create a webdynpro application to test the component.

 

clip_image059

 

 

You will see the output in the table we populated and our table popin column remains empty.

 

clip_image061

 

 

  

Part II

 

Step 8: So far we have only see how to display the records in the table. Now let us see how to add table popin.

 

In the table popin cell variant which we have created in the table popin colum provide the variant key as key for example.

 

clip_image063

 

  

 

In the table column of the cell variant change the properties as below.

 

Change the fixed position to the left so that our popin will always occupy the left position.

 

Provide the variant key name in the selected cell variant so that this column will come to know it has a table popin associated to it.

 

 

clip_image065

.

 

If you test the application now at this stage it will go for a dump

 

clip_image067

 

The reason behind this is whenever we have added a variant to the table popin, the system will return a value TABLEPOPIN to identify in which row the table popin has been selected. To capture this value for every row item we need to create a attribute in our context node for the table.

 

Go to the context node and add an attribute.

 

Note : If the context node still have the structure EKKO it will not allow you to add the attribute, In that case remove the dictionary structure from the node and then add the attribute.

 

clip_image069

 

  

Create an attribute table_popin of type string.

 

clip_image071

 

 

 

clip_image073

 

 

 

 

 

In the root of the table UI element, Bind the attribute table_popin to the property selected popin. So that whenever a popin is selected from a particular row the system will return a value to the attribute table_popin with TABLEPOPIN.

 

clip_image075

 

 

 

clip_image077

Now insert a table popin by right clicking on the table ui element and choosing the insert table popin option.

 

 

clip_image079

 

If you test your application now, you will be able to see the table popin column in the left side of the table.

 

 

clip_image081

 

 

Now we will be needing an event handler method for handling what needs to be done on the selection of table popin.

 

Go to the table popin cell variant and create an event ontoggle as shown below.

 

 

clip_image083

 

 

 

In this toggle method we will write the logic for what has to happen on selection of the Table popin.

 

Before writing a logic we need to add some UI elements like what is to be displayed on the expansion of the tabel popin.

 

 

Right click on the table popin and select insert content.

 

 

clip_image085

 

 

 

 

Insert a transparent container UI element and and table to display the contents of the EKPO table.

 

 

 

 

clip_image087

 

 

 

 

 

Similiarly insert the table ui element in a similar way.

 

 

clip_image089

 

 

 

clip_image091

 

 

 

Bind the node EKPO to the table created inside the container.

 

clip_image093

 

 

 

 

clip_image095

 

 

clip_image097

 

 

 

 

After Binding write the following code in the toggle method.

 

method onactionontoggle .

* read the context node ekko.


data lo_nd_ekko type ref to if_wd_context_node.

data lt_ekko type
wd_this->elements_ekko.

data ls_ekko like line of
lt_ekko.

*   navigate from <context> to <ekko> via lead selection

lo_nd_ekko = wd_context->get_child_node( name = wd_this-wdctx_ekko ).


lo_nd_ekko->get_static_attributes_table(
importing table = lt_ekko ).

* to know which row has been selected, read the table with key table_popin.

* table_popin is the attribute bounded to the selectedpopin property of the table
* and it returns an value tablepopin to that field which you can see in debugger.

 
read table lt_ekko into ls_ekko with key table_popin = 'tablepopin'.

* now populate the item table for the corresponding header value and set it in the context node.


     
data lo_nd_ekpo type ref to if_wd_context_node.

     
data lt_ekpo type
wd_this->elements_ekpo.

*     navigate from <context> to <ekpo> via lead selection

      lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ).

     
select * from ekpo into corresponding fields of table lt_ekpo
                                 
where
ebeln = ls_ekko-ebeln.
*

      lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ).

endmethod.

 

 

 

 

 

 

 

 

 

 

 

Now test your application.

 

clip_image099

 

 

 

clip_image101

 

 

 

 

 

 

The table popin doesn’t close automatically and the previously selected values is displayed for all the popin the reason behind this is the first row when it was selected, the table_popin attribute will be set as tablepopin and when we select the second row second row table_popin will also set as tablepopin but when we read the table using the value table popin it will always pick the first row which have the table popin. To differentiate the previously selected popin and newly selected popin we need a flag.

 

 

Create a flag in the context node EKKO as shown below.

 

clip_image103

 

 

 

clip_image105

 

 

 

Now modify the code as shown below. What I have done is everytime when a tablepopin is set a attribute table_popin I am setting a flag along with it. Next time when the other popin is selected, I am first checking for the previously selected popin with the combination of tablepopin and flag x. If previous value in that combination is available I am clearing it and reading the currently selected popin with the value tablepopin and setting the flag as x to the new value.

When you remove the tablepopin value from the attribute that table popin will be closed.

 

method onactionontoggle .

* read the context ekko.


   
data lo_nd_ekko type ref to if_wd_context_node.

   
data lt_ekko type
wd_this->elements_ekko.
   
data ls_ekko like line of
lt_ekko.

*   navigate from <context> to <ekko> via lead selection

    lo_nd_ekko = wd_context->get_child_node( name = wd_this->wdctx_ekko ).

*   @todo handle non existant child
*   if lo_nd_ekko is initial.
*   endif.

    lo_nd_ekko->get_static_attributes_table(
importing table = lt_ekko ).

   
read table lt_ekko into ls_ekko with key table_popin = 'tablepopin'

                                             flag =
'x'.
data : lv_tabix type
sy-tabix.
   
if sy-subrc = 0.

    lv_tabix = sy-tabix.
   
clear : ls_ekko-table_popin , ls_ekko-flag.
   
modify lt_ekko from ls_ekko index
lv_tabix.
   
clear
lv_tabix.
    endif.

   
read table lt_ekko into ls_ekko with key table_popin = 'tablepopin'
.

   
if sy-subrc = 0.

    lv_tabix = sy-tabix.
    ls_ekko-flag =
'x'.
   
modify lt_ekko from ls_ekko index
lv_tabix.
   
data lo_nd_ekpo type ref to
if_wd_context_node.

     
data lt_ekpo type
wd_this->elements_ekpo.

*     navigate from <context> to <ekpo> via lead selection

      lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ).

     
select * from ekpo into corresponding fields of table lt_ekpo
                             
where
ebeln = ls_ekko-ebeln.
*

      lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ).


    endif.


  lo_nd_ekko->bind_table( new_items = lt_ekko set_initial_elements = abap_true ).

endmethod.

 

 

 

Now test the application.

 

clip_image107

 

 

clip_image109

About Arun

1 Comments:

Powered by Blogger.