using progress indicator ui element at table control

8/8/2019 Using Progress Indicator UI Element at Table Control

1/18

Using Progress indicator UI Element at TableControl (Web Dynpro for ABAP)

By Sangeeth Paul, Microexcel

Scenario: In this example, input will be a date field and material number. Depending onthe selection criteria, the output table will be filled. Output shows, to which customer, whatquantity of material has to be sold. According to the quantity to be sold, the progressindicator is displayed against each Sold-To customer.

Steps:

1) Create Web-DynPro component with name ZSALES_ORDERS

2) Create a view for this component.


2/18

3) Go to view and design the layout and add a label and input field for Date.

4) Similarly add an input field for Date. After adding input field, click on label andassign the labelFor property with value as input field.


3/18

In the same way, create one label and input field for material.

After this, the layout should look like:

5) Create a button to fetch data to display.

On the property text, fill value as Get Data. And create an action for this button by clickingthe highlighted button below.


4/18

We will have to write the code to fetch the data from database in this action method. Forthis, double click the action that you created.

Inside this method write, the below code.

data:Node_Date_Node type ref to If_Wd_Context_Node,Elem_Date_Node type ref to If_Wd_Context_Element,Stru_Date_Node type If_View1=>Element_Date_Node ,Item_DATE like Stru_Date_Node-DATE.

* navigate from to via lead selectionNode_Date_Node = wd_Context->get_Child_Node( Name = `DATE_NODE` ).

* get element via lead selectionElem_Date_Node = Node_Date_Node->get_Element( ).

* get single attributeElem_Date_Node->get_Attribute(exportingName = `DATE`


5/18

importingValue = Item_Date ).

data:Node_Mat_Node type ref to If_Wd_Context_Node,Elem_Mat_Node type ref to If_Wd_Context_Element,Stru_Mat_Node type If_View1=>Element_Mat_Node ,

Item_MATERIAL like Stru_Mat_Node-MATERIAL.* navigate from to via lead selectionNode_Mat_Node = wd_Context->get_Child_Node( Name = `MAT_NODE` ).

* get element via lead selectionElem_Mat_Node = Node_Mat_Node->get_Element( ).

* get single attributeElem_Mat_Node->get_Attribute(exportingName = `MATERIAL`

importingValue = Item_Material ).

types : BEGIN OF ty_data,kunnr type kunnr,

matnr TYPE matnr,arktx TYPE arktx,zmeng type dzmeng,meins TYPE meins,progress TYPE numc3,END OF ty_data.

types : BEGIN OF order_data,vbeln type vbeln,posnr type posnr,matnr TYPE matnr,arktx TYPE arktx,kunnr type kunnr,

zmeng type dzmeng,meins TYPE meins,progress TYPE numc3,END OF order_data.

data : fs_dd type ty_data,it_dd type TABLE OF ty_data.

data:* fs_data TYPE ty_data,* it_data TYPE TABLE OF ty_data,

fs_order TYPE order_data,it_order_data TYPE TABLE OF order_data.

refresh it_order_data.select vbeln

posnr_imatnr_iarktx_ikunnrkwmeng_imeins_i

from wb2_v_vbak_vbap2into table it_order_datawhere erdat eq item_date


6/18

and matnr_i eq item_material.data:Node_Order_Data type ref to If_Wd_Context_Node,Elem_Order_Data type ref to If_Wd_Context_Element,Stru_Order_Data type If_View1=>Element_Order_Data .

types : BEGIN OF ty_temp_order,

kunnr type kunnr,zmeng type dzmeng,end of ty_temp_order.

data:lw_total type dzmeng,lw_aveprogress type dzmeng,lw_qty type dzmeng,lw_order_data type ty_temp_order,it_temp_order_data type table OF ty_temp_order.

sort it_order_data by kunnr.loop at it_order_data into fs_order.move fs_order-zmeng to lw_order_data-zmeng.move fs_order-kunnr to lw_order_data-kunnr.

collect lw_order_data into it_temp_order_data.clear lw_order_data.

endloop.sort it_order_data by kunnr.delete ADJACENT DUPLICATES FROM it_order_data COMPARING kunnr.loop at it_ordeR_data into fs_order.read TABLE it_temp_order_data into lw_order_data with key kunnr = fs_order-kunnr.if sy-subrc = 0.fs_order-zmeng = lw_order_data-zmeng.MODIFY it_order_data from fs_order.

endif.endloop.

LOOP AT it_order_data into fs_order.lw_total = fs_order-zmeng + lw_total.ENDLOOP.loop at it_order_data into fs_order.lw_aveprogress = ( fs_order-zmeng * 100 ) / lw_total.fs_order-progress = lw_aveprogress.Modify it_order_data from fs_order.

ENDLOOP.loop AT it_order_data into fs_order.move : fs_order-kunnr to fs_dd-kunnr,

fs_order-matnr to fs_dd-matnr,fs_order-arktx to fs_dd-arktx,fs_order-meins to fs_dd-meins,

fs_order-zmeng to fs_dd-zmeng,fs_order-progress to fs_dd-progress.

append fs_dd to it_dd.ENDLOOP.

* navigate from to via lead selectionNode_Order_Data = wd_Context->get_Child_Node( Name = `ORDER_DATA` ).Node_Order_Data->bind_table( it_dd ).


7/18

6) Go to layout. Create a table for output. The output table contains the followingdata.

Sold to number, material number, material description, target quantity, unit and progressindicator.

Right click the ROOTUIELEMENTCONTAINER and select table from it.

Layout will look like:

7) Go to context tab and create the node and attribute for input/output.

Fill node name and click enter.


8/18

8) Similarly create one more node for material.

Right Click on date_node and create an attribute.


9/18

9) Similarly create an attribute for material as follows


10/18

10) Create a new node by right clicking context. This is to build the output structure.

Add attributes as follows.


11/18

Similar way creates below attributes also.

Attribute

Name

Type

KUNNR KUNNR

MATNR MATNR

ARKTX ARKTX

KWMENG KWMENG

MEINS MEINS

PROGRESS NUMC3

11) After this context for view1 should look like:

Make sure the cardinality for node order_data is 0..n.


12/18

12) Now we have to bind these attributes.

Go to layout and click on first input field. Click on the binding tab for value property andassign the date field to it.


13/18

Similarly click second input field and click on select material attribute for it.


14/18

13) Click on table and bind the node order_data to this table.


15/18

Click the context button highlighted.

Click order_data node and press OK.


16/18

Change the last field (progress) with the highlighted data.

14) By doing this, that filed is set to Progress indicator type. By default it is set to TextView. So have to manually change it to ProgressIndicator.

Under rootuielementcontainer, click on table_progress(which is the attribute under thetable). Set the width value for this progress indicator as 100px.

15) Place the view inside the window. Double click the window and drag the view into it.

16) Create a wedynpro application for this component.


17/18

Activate the whole component.

17) Test run the application.


18/18

Click Get data button.

Result:

using progress indicator ui element at table control

Documents