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.

 

 

 

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.

 

 

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.

 

 

 

 

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.

 

 

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

 

 

 

 

 

 

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

 

 

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.

 

 

 

 

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

 

 

 

The selected attributes will be added to your context node.

 

 

 

 

 

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

 

 

 

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.

 

 

 

  

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

 

 

 

 

 

 

  

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.

 

 

 

 

 

  

 

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

 

 

 

Select the cell variant as a table popin toggle cell.

 

 

 

 

 

 

 

 

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

 

 

 

 

Click on the context button to choose the context node.

 

 

 

 

Select the context node EKKO and press enter.

 

 

 

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

 

 

 

 

 

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

 

 

 

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

 

 

 

 

 

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

 

 

 

 

Code will be generated by the system as below.

 

 

 

 

Select some records form the EKKO table and bind it.

 

 

 

 

 

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

 

 

 

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

 

 

 

  

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.

 

 

  

 

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.

 

 

.

 

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

 

 

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.

 

 

  

Create an attribute table_popin of type string.

 

 

 

 

 

 

 

 

 

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.

 

 

 

 

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

 

 

 

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

 

 

 

 

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.

 

 

 

 

 

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.

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

Similiarly insert the table ui element in a similar way.

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

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.

 

 

 

 

 

 

 

 

 

 

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.

 

 

 

 

 

 

 

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.

 

 

 

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Arun