Using Progress indicator UI Element at Table Control (Web Dynpro for ABAP

By Sangeeth Paul, Microexcel
Scenario: In this example, input will be a date field and material number. Depending on the selection criteria, the output table will be filled. Output shows, to which customer, what quantity of material has to be sold. According to the quantity to be sold, the progress indicator is displayed against each Sold-To customer. Steps: 1) Create Web-DynPro component with name ZSALES_ORDERS


Create a view for this component.

After adding input field.3) Go to view and design the layout and add a label and input field for Date. click on label and assign the labelFor property with value as input field. . 4) Similarly add an input field for Date.

the layout should look like: 5) Create a button to fetch data to display. create one label and input field for material. . fill value as ‘Get Data’.In the same way. On the property text. After this. And create an action for this button by clicking the highlighted button below.

We will have to write the code to fetch the data from database in this action method. data: Node_Date_Node type ref to If_Wd_Context_Node. * get single attribute Elem_Date_Node->get_Attribute( exporting Name = `DATE` . double click the action that you created. Inside this method write. * get element via lead selection Elem_Date_Node = Node_Date_Node->get_Element( ). the below code. Elem_Date_Node type ref to If_Wd_Context_Element. For this. Stru_Date_Node type If_View1=>Element_Date_Node . Item_DATE like Stru_Date_Node-DATE. * navigate from <CONTEXT> to <DATE_NODE> via lead selection Node_Date_Node = wd_Context->get_Child_Node( Name = `DATE_NODE` ).

it_dd type TABLE OF ty_data. data: Node_Mat_Node type ref to If_Wd_Context_Node. meins TYPE meins. kunnr type kunnr. select vbeln posnr_i matnr_i arktx_i kunnr kwmeng_i meins_i from wb2_v_vbak_vbap2 into table it_order_data where erdat eq item_date . meins TYPE meins.importing Value = Item_Date ). posnr type posnr. END OF order_data. * navigate from <CONTEXT> to <MAT_NODE> via lead selection Node_Mat_Node = wd_Context->get_Child_Node( Name = `MAT_NODE` ). arktx TYPE arktx. data: * fs_data TYPE ty_data. vbeln type vbeln. Stru_Mat_Node type If_View1=>Element_Mat_Node . progress TYPE numc3. types : BEGIN OF ty_data. * get single attribute Elem_Mat_Node->get_Attribute( exporting Name = `MATERIAL` importing Value = Item_Material ). * it_data TYPE TABLE OF ty_data. Elem_Mat_Node type ref to If_Wd_Context_Element. zmeng type dzmeng. Item_MATERIAL like Stru_Mat_Node-MATERIAL. fs_order TYPE order_data. END OF ty_data. it_order_data TYPE TABLE OF order_data. arktx TYPE arktx. matnr TYPE matnr. matnr TYPE matnr. progress TYPE numc3. * get element via lead selection Elem_Mat_Node = Node_Mat_Node->get_Element( ). types : BEGIN OF order_data. data : fs_dd type ty_data. refresh it_order_data. kunnr type kunnr. zmeng type dzmeng.

move fs_order-zmeng to lw_order_data-zmeng. move fs_order-kunnr to lw_order_data-kunnr. Stru_Order_Data type If_View1=>Element_Order_Data . clear lw_order_data. fs_order-progress = lw_aveprogress. fs_order-arktx to fs_dd-arktx. lw_qty type dzmeng. endloop. types : BEGIN OF ty_temp_order. delete ADJACENT DUPLICATES FROM it_order_data COMPARING kunnr. LOOP AT it_order_data into fs_order. fs_order-zmeng = lw_order_data-zmeng. fs_order-zmeng to fs_dd-zmeng. append fs_dd to it_dd. fs_order-matnr to fs_dd-matnr. MODIFY it_order_data from fs_order. sort it_order_data by kunnr. lw_total = fs_order-zmeng + lw_total. loop at it_order_data into fs_order. lw_order_data type ty_temp_order. ENDLOOP. lw_aveprogress = ( fs_order-zmeng * 100 ) / lw_total. ENDLOOP. loop AT it_order_data into fs_order. endloop. it_temp_order_data type table OF ty_temp_order. kunnr type kunnr. * navigate from <CONTEXT> to <ORDER_DATA> via lead selection Node_Order_Data = wd_Context->get_Child_Node( Name = `ORDER_DATA` ). end of ty_temp_order.and matnr_i eq item_material. endif. data: Node_Order_Data type ref to If_Wd_Context_Node. 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-meins to fs_dd-meins. collect lw_order_data into it_temp_order_data. Modify it_order_data from fs_order. lw_aveprogress type dzmeng. data: lw_total type dzmeng. loop at it_ordeR_data into fs_order. sort it_order_data by kunnr. . zmeng type dzmeng. ENDLOOP. fs_order-progress to fs_dd-progress. Elem_Order_Data type ref to If_Wd_Context_Element. move : fs_order-kunnr to fs_dd-kunnr. Node_Order_Data->bind_table( it_dd ).

The output table contains the following data. material description. Create a table for output. Layout will look like: 7) Go to context tab and create the node and attribute for input/output. unit and progress indicator. Fill node name and click enter. Right click the ROOTUIELEMENTCONTAINER and select table from it. material number. target quantity. . Sold to number.6) Go to layout.

.8) Similarly create one more node for material. Right Click on date_node and create an attribute.

9) Similarly create an attribute for material as follows .

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

.Similar way creates below attributes also. Attribute Name KUNNR MATNR ARKTX KWMENG MEINS PROGRESS Type KUNNR MATNR ARKTX KWMENG MEINS NUMC3 11) After this context for view1 should look like: Make sure the cardinality for node order_data is ‘0.n’. .

.12) Now we have to bind these attributes. Click on the binding tab for value property and assign the date field to it. Go to layout and click on first input field.

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

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

Click the context button highlighted. Click order_data node and press OK. .

16) Create a wedynpro application for this component. Under rootuielementcontainer. 15) Place the view inside the window. Set the width value for this progress indicator as 100px. that filed is set to Progress indicator type. By default it is set to Text View. So have to manually change it to ProgressIndicator. Double click the window and drag the view into it.Change the last field (progress) with the highlighted data. 14) By doing this. . click on table_progress(which is the attribute under the table).

. 17) Test run the application.Activate the whole component.

Result: .Click Get data button.

Sign up to vote on this title
UsefulNot useful