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

Coloring a cell in Table UI element

 

In the following post we will see how to color a cell particularly in table UI element.

Pre-requisites:

Knowledge on how to display the data’s using table UI element. Refer to the link to learn how to display the data using Table UI element.

I have created a simple webdynpro component that displays some records from the EKKO table. The Output of the table is as below.

Output:

clip_image002

In this following example we are going to highlight the Purchase order document with the category L.

Step 1: In the context tab of the view controller, Create a context attribute to the node EKKO of type WDUI_TABLE_CELL_DESIGN. The fixed domain values of this data element represent the different colours.

Right click on the node and create a context attribute as shown below.

clip_image004

 

Provide the name and type for the attribute.

clip_image006

 

clip_image008

 

Step 2: Bind the context attribute to the cell design property of the column.

clip_image010

 

clip_image012

 

In the method where you have written the code for fetching and binding the data assign the colour attribute accordingly.

Code :

 


 
DATA lo_nd_ekko TYPE REF TO if_wd_context_node.

 
DATA lt_ekko TYPE
wd_this->elements_ekko.
 
DATA ls_ekko TYPE
wd_this->element_ekko.

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

 
SELECT * FROM ekko INTO CORRESPONDING FIELDS OF TABLE lt_ekko UP TO 10
ROWS.

 
LOOP AT lt_ekko INTO
ls_ekko.

   
IF ls_ekko-bstyp = 'L'
.
      ls_ekko-cell_color =
'02'
.
     
MODIFY lt_ekko FROM ls_ekko INDEX
sy-tabix.
    ENDIF.

  ENDLOOP.

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

 

 

 

Output:

 

clip_image014

About Arun

1 Comments:

  1. Is it possible to color a column header of a custom table. If yes, Please let me know.

    ReplyDelete

Powered by Blogger.