SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

By using the RoadMap UI element, we can display the steps required to complete a certain task. Hereunder,we show some of the roadMap properties that can be bound,and the attribute type in case the property is bindable (Table).

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

For the RoadMap example,we use the exercise from the ViewContainerUIElement,a little bit re-arranged. The WD component structure is presented in Fig.

WD component structure

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

In this case,we replace the LinkToAction UI elements with two Buttons: Next and Back. These Buttons are inserted into the view V_VIEW, and the user can navigate from the first step to the end one, via the RoadMap. In this case, we used only a ViewContainerUIElement,and for each step we have a view. In the view V_VIEW, we insert a RoadMap UI element with three steps. To insert a step into a RoadMap UI Element, we right-click on the element and, from the contextual menu, we choose Insert Step (Fig. ).

RoadMap steps

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

V_VIEW view layout

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

T0 be able to manipulate the RoadMap UI element and the Button via the data held in the context, we create, in the V_VIEW, a context node named DYNAMIC. This node has three attributes:

  • SELECTEDSTEP, of STRING type, used to dynamically set the ID of the selected step
  • ENABLED_NEXT, of WDY_BOOLEAN type, used to manipulate the enabled property of the NEXT button
  • ENABLED_BACK,of WDY_BOOLEAN type,used to manipulate the enabled property of the BACK button (Fig – right)

To hold and show the data entered by the user, we have created, in the COM PONENTCONTROLLER context, a node named INFO (Fig. – left).This context node has the same structure as presented in the ViewContainerUIElement example. The attributes are: NAME, EMAIL & CITY (of STRING type) and COUNTRY (of Y_DEFORDOMAIN type). We create a context mapping among this context node and the context views V_STEP1, V_STEP2 and V_STEP3.

Context structure

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

V_STEP1 view layout

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

V_STEP2 view layout

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

V_STEP3 view layout

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

The view “V_VIEW” is the default view – the firstly displayed one.In the ViewContainerUIElement,we embed all the three views V_STEP1,V_STEP2 and V_STEP3. The view V_STEP1 is, in this case, the default view.

To be able to navigate among the views, we have to create inbound and outbound plugs. In the view V_VIEW, we create three outbound plugs:

  • OP_TO_V_STEP1 required to navigate to the view V_STEP1
  • OP_TO_V_STEP2 required to navigate to the view V_STEP2
  • OP_TO_V_STEP3 required to navigate to the view V_STEP3

The view V_STEP1 has an inbound plug named IP_V_STEP1,the view V_STEP2 has an inbound plug named IP_V_STEP2 and the view V_STEP3 has an inbound plug named IP_V_STEP3.

Window structure

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

In the wdDoInit Hook method (V_VIEW),we dynamically set the attributes values for SELECTEDSTEP, ENABLED_NEXT and ENABLED_BACK (Listing).

The wddoinit Hook method


METHOD wddoinit.

DATA lr_node TYPE REF TO if_wd_context_node.

DATA ls_data TYPE wd_this->element_dynamic.

lr_node = wd_context-get_child_node('DYNAMIC').

ls_data-enabled_next = abap_true.

ls_data-enabled_back = abap_false.

ls_data-selectedstep ='STEP1'.

lr_node->set_static_attributes(ls_data).

ENDMETHOD.
 

First time when the screen is rendered, we want the BACK Button to be not enabled,the NEXT Button to be enabled, and the STEP1 to be the active RoadMap step (Fig).

Runtime

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

When the user presses the NEXT button, the Framework triggers the event handler method onactionnext (Listing).

The onactionnext event handler method


METHOD onactionnext. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE wd_this-element_dynamic. 

DATA lv_selectedstep TYPE string. 

lr_node = wd_context-get_child_node('DYNAMIC'). 

lr_node-get_attribute(EXPORTING name ='SELECTED STEP'IMPORTING value = lv_selectedstep ). 

ASE lv_selectedstep. 

WHEN ‘STEP1’. 

ls_data-selectedstep = ‘STEP2’. 

ls_data-enabled_next = abap_true. 

ls_data-enabled_back = abap_true. 

wd_this-fire_op_to_v_step2_plg( ). 

WHEN ‘STEP2’. 

ls_data-selectedstep = ‘STEP3’. 

ls_data-enabled_next = abap_false. 

ls_data-enabled_back = abap_true. 

wd_this-fire_op_to_v_step3_plg( ). 

WHEN OTHERS. 

ls_data-enabled_next = abap_false. 

ls_data-enabled_back = abap_true. 

ENDCASE. 

lr_node-set_static_attributes(ls_data). 

ENDMETHOD. 
 

As we can see, we make active the STEP2: ls_data-selectedstep = ‘STEP2’,we fire the method that helps us to navigate to the nextview V_STEP2

wd_thisfire_op_to_v_step2_plg( )
and we enable both buttons
ls_data-enabled_next = abap_true.
ls_data-enabled_back = abap_true (Fig).

Runtime

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

When the user presses again the NEXT button,we deactivate the NEXT button ls_data-enabled_next = abap_false we make active STEP3 ls_data-selectedstep = ‘STEP3’and fire the method that helps us to navigate to the view V_STEP3 wd_this->fire_op_to_v_step3_plg( ),

Runtime

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

When the user presses the BACK button, the Framework triggers the event handler method onactionback (Listing).

The onactionback event handler method


METHOD onactionback. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE wd_this-element_dynamic. 

DATA lv_selectedstep TYPE string. 

lr_node = wd_context-get_child_node(‘DYNAMIC’). 

lr_node-get_attribute( EXPORTING name =‘SELECTEDSTEP’IMPORTING value = lv_selectedstep). 

CASE lv_selectedstep. 

WHEN ‘STEP3’. 

ls_data-selectedstep = ‘STEP2’. 

ls_data-enabled_next = abap_true. 

ls_data-enabled_back = abap_true. 

wd_this-fire_op_to_v_step2_plg( ). 

WHEN ‘STEP2’. 

ls_data-selectedstep = ‘STEP1’. 

ls_data-enabled_next = abap_true. 

ls_data-enabled_back = abap_false. 

wd_this->fire_op_to_v_step1_plg( ). 

WHEN OTHERS. 

ls_data-enabled_next = abap_true. 

ls_data-enabled_back = abap_false. 

NDCASE. 

r_node-set_static_attributes(ls_data ). 

ENDMETHOD. 


As we can see(Fig.)when the user presses the BACK button,we navigate back to the view V_STEP2

wd_this>fire_op_to_v_step2_plg( ).
we activate both buttons ls_data-enabled_next = abap_true.
ls_data-enabled_back = abap_true.
we make active the step STEP2 ls_data-selectedstep = ‘STEP2’.
wd_this->fire_op_to_v_step2_plg( ).

Runtime

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

When the user presses again the BACK Button (Fig.),we navigate back to the view V_STEP1

wd_this->fire_op_to_v_step1_plg( ).
we deactivate the BACK button ls_data-enabled_back = abap_false.
and make active the step STEP1 ls_data-selectedstep = ‘STEP1’.

Runtime

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

Dynamic Programming

RUNTIME CLASS: CL_WD_ROAD_MAP

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a RoadMap UI element (Table ).

How to use “RoadMap” in Web Dynpro with Static and Dynamic Programming

For the RoadMap UI element,we have, as aggregation, the Step: Road Map Step or MultipleRoadMapStep.The RoadMapStep element represents a step in a Road- Map,and has the CL_WD_ROAD_MAP_STEP runtime class.

The implementation of a dynamic RoadMap UI element with two Steps contains the following statements (Listing):

Dynamic programming of a RoadMap UI element


METHOD wddomodifyview. 

DATA lr_container TYPE REF TO cl_wd_uielement_container. 

DATA lr_roadmap TYPE REF TO cl_wd_road_map. 

DATA lr_step1 TYPE REF TO cl_wd_road_map_step. 

DATA lr_step2 TYPE REF TO cl_wd_road_map_step. 

DATA lr_flow_data TYPE REF TO cl_wd_flow_data. 

IF first_time EQ abap_true. 

lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER'). 

lr_roadmap = cl_wd_road_map=>new_road_map( 

id = 'RM_ROADMAP' 

bind_selected_step ='DYNAMIC.SELECTEDSTEP' 

start_point_design = cl_wd_road_map=>e_start_point_design-selected 

). 

lr_flow_data = cl_wd_flow_data=>new_flow_data(element = 

lr_roadmap). 

lr_container->add_child(lr_roadmap). 

lr_step1 = cl_wd_road_map_step=>new_road_map_step( 

id = 'STEP1' 

description ='STEP 1' 

name ='1' 

). 

lr_roadmap->add_step(the_step = lr_step1). 

lr_step2 = cl_wd_road_map_step=>new_road_map_st 

id = 'STEP2' 

description ='STEP 2' 

name ='2' 

). 

lr_roadmap->add_step(he_step = lr_step2). 

ENDIF. 

ENDMETHOD. 
 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in