SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

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

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

Similar to the Road Map UI element, we can display the steps in a wizard, by using the PhaseIndicator. Hereunder,we show some of the PhaseIndicator properties that can be bound, and the attribute type in case the property is bindable (Table).

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

A Phase is a step into a PhaseIndicator that has bindable properties as,for example,enable and status. Table presents some of these properties and how we can use the status property for a dynamic manipulation.

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

We create the same example as for the RoadMap, but,in this case,we use a PhaseIndicator UI element with three phases.The WD component structure is presented in Fig.

WD component structure

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

In this case,we have renamed the views V_STEP1, V_STEP2 and V_STEP3 as V_PHASE1,V_PHASE2 and V_PHASE3. The content of these views is the same.We can rename a view by right-clicking on the view name and, from the contextual menu,we choose rename. To insert a phase into a PhaseIndicator UI Element, we right-clickon the element and,from the contextual menu, we choose Insert Phase (Fig).

Inserting Phase into a PhaseIndicator

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

For the first Phase,we have set the status property: completed. For the other two Phases(Phase2 and Phase3),we have dynamically set the status property,by using the two attributes named STATUS2 and STATUS3 of WDUI_PHASE_STATUS type.To manipulate the enabled property of the NEXT button, we use the same attribute ENABLED_NEXT of WDY_BOOLEAN type, and to manipulate the selected phase, we use the attribute SELECTEDPHASE of string type (Fig right).

The node INFO is defined in the COMPONENTCONTROLLER and has the same structure as showed in the previous example. We create context mapping among this context node and the context views V_PHASE1,V_PHASE2 and V_PHASE3.

Context structure

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

The V_VIEW layout

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

This view has two outbound plugs defined: OP_TO_V_PHASE2 and OP_TO_V_PHASE3.The view V_PHASE1 has no inbound plug, the view V_PHASE2 has an inbound plug named IP_V_PHASE2 and the view PHASE_3 has an inbound plug named IP_V_PHASE3. The window structure is presented in Fig.

Window structure

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

The view V_PHASE1 is shown in the ViewControllerUIElement first time when the screen is rendered, this view being defined as default view.We have to dynamically set the attributes values for SELECTEDPHASE,STATS2,STATUS3 and ENABLED_NEXT. To do this, we use the wdDoInit Hook method (Listing ).

The wddoinit Hook method


METHOD wddoinit. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE if_v_view=element_dynamic. 

lr_node = wd_context-get_child_node('DYNAMIC'). 

ls_data-enabled_next = abap_true. 

ls_data-status2 = CL_WD_PHASE=E_STATUS-WARNING. 

ls_data-status3 = CL_WD_PHASE=E_STATUS-WARNING. 

ls_data-selectedphase = 'PHASE1'. 

lr_node-set_static_attributes(ls_data). 

ENDMETHOD.
 

As we can see,we selected the first phase: ls_data-selectedphase = ‘PHASE1’and we set the Phase2 and Phase3 with the Warning status ls_data-status2 = cl_wd_phase) e_status-warning.
ls_data-status3 = cl_wd_phase) e_status-warning.

Runtime

Phase Indicator UI Element

When the user presses the 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 if_v_view=element_dynamic.

DATA lv_phase TYPE string.

lr_node = wd_context->get_child_node('DYNAMIC').

lr_node-get_attribute(EXPORTING name ='SELECTEDPHASE'IMPORTING value = lv_phase).

CASE lv_phase.

WHEN 'PHASE1'.

ls_data-selected phase ='PHASE2'.

ls_data-enabled_next = abap_true.

ls_data-status2 = cl_wd_phase=e_status-completed.

ls_data-status3 = cl_wd_phase=e_status-warning.

wd_this-fire_op_to_v_phase2_plg( ).

WHEN 'PHASE2'.

ls_data-selectedphase = 'PHASE3'.

ls_data-enabled_next = abap_false.

ls_data-status2 = cl_wd_phase=e_status-completed.

ls_data-status3 = cl_wd_phase=e_status-completed.

wd_this-fire_op_to_v_phase3_plg( ).

WHEN OTHERS.

ls_data-enabled_next = abap_false.

ENDCASE.

lr_node-set_static_attributes(ls_data).

ENDMETHOD.


As we can see, we make active the Phase2 ls_data-selectedphase ¼ ‘PHASE2’ we set the Phase2 with completed status and Phase3 with warning status ls_data-status2 cl_wd_phase )
e_status-completed.ls_data-status3 = cl_wd_phase)e_status-warning.

For the next press of the NEXT button,we set the Phase2 and Phase3 with completed status

ls_data-status2 cl_wd_phase)e_status-completed.
ls_data-status3 cl_wd_phase)e_status-completed.we make active the last Phase, ls_data-selectedphase = ‘PHASE3’.

Runtime

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

Dynamic Programming

RUNTIME CLASS: CL_WD_PHASE_INDICATOR

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 PhaseIndicator UI element (Table)

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

For the PhaseIndicator UI element,we have,as aggregation, the Phase element. It has the CL_WD_PHASE runtime class.
The implementation of a dynamic PhaseIndicator UI element with two Phases contains the following statements (Listing ):

Dynamic programming of a PhaseIndicator UI element


METHOD wddomodifyview. 

DATA lr_container TYPE REF TO cl_wd_uielement_container. 

DATA lr_flow_data TYPE REF TO cl_wd_flow_data. 

DATA lr_phaseindicator TYPE REF TO cl_wd_phase_indicator. 

DATA lr_phase1 TYPE REF TO cl_wd_phase. 

DATA lr_phase2 TYPE REF TO cl_wd_phase. 

IF first_time EQ abap_true. 

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

lr_phaseindicator = cl_wd_phase_indicator=>new_phase_indicator( 

id = 'PI_PHASEINDICATOR' 

bind_selected_phase ='DYNAMIC.SELECTEDPHASE' 

irst_visible_phase ='PHASE1' 

background_design = cl_wd_phase_indicator=>e_background_designtransparent 

). 

lr_flow_data = cl_wd_flow_data=>new_flow_data(element = 

lr_phaseindicator). 

lr_container->add_child(lr_phaseindicator). 

lr_phase1 = cl_wd_phase=>new_phase( 

id ='PHASE1' 

description ='PHASE 1' 

status = cl_wd_phase=>e_status-completed 

). 

lr_phaseindicator->add_phase(the_phase = lr_phase1). 

lr_phase2 = cl_wd_phase=>new_phase( 

ld ='PHASE2' 

description ='PHASE 2' 

bind_status ='DYNAMIC.STATUS2' 

). 

lr_phaseindicator->add_phase(the_phase = lr_phase2). 

ENDIF. 

ENDMETHOD. 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in