Saturday, December 18, 2010

Using Progress indicator UI Element at Table Control

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.


1) Create Web-DynPro component with name ZSALES_ORDERS

2) Create a view for this component.

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 and assign the labelFor property with value as input field.

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 clicking the highlighted button below.

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

Inside this method write, the below code.

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 selection
Node_Date_Node = wd_Context->get_Child_Node( Name = `DATE_NODE` ).
* get element via lead selection
Elem_Date_Node = Node_Date_Node->get_Element( ).
* get single attribute
Name = `DATE`
Value = Item_Date ).
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 selection
Node_Mat_Node = wd_Context->get_Child_Node( Name = `MAT_NODE` ).
* get element via lead selection
Elem_Mat_Node = Node_Mat_Node->get_Element( ).
* get single attribute
Value = 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.
* 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
from wb2_v_vbak_vbap2
into table it_order_data
where erdat eq item_date
and matnr_i eq item_material.
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.
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.
  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.
  LOOP AT it_order_data into fs_order.
lw_total = fs_order-zmeng + lw_total.
  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.
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.
* navigate from to via lead selection
Node_Order_Data = wd_Context->get_Child_Node( Name = `ORDER_DATA` ).
  Node_Order_Data->bind_table( it_dd ).

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

Sold to number, material number, material description, target quantity, unit and progress indicator.

Right click the ROOTUIELEMENTCONTAINER and select table from it.

Layout will look like:

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

Fill node name and click enter.

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. This is to build the output structure.

Add attributes as follows.

Similar way creates below attributes also.

Attribute Name














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.

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

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.

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 Text View. So have to manually change it to ProgressIndicator.

Under rootuielementcontainer, click on table_progress(which is the attribute under the table). 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.

Activate the whole component.

17) Test run the application.

Click Get data button.


No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)


Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive