Here in this Blog post I’m going to explain the creation of Roadmap UI element and navigating between views using it. Using Roadmap we can show step by step workflows or Show different data in each step.
Roadmap UI element Provides 2 types of Steps :
- Roadmap Step
- Multiple roadmap Step.
1. Roadmap Step :
Here Using this roadmap step we will be able to create a individual nodes in the Roadmap UI element.
- Multiple roadmap step :
Here using multiple roadmap step we will be creating only one step and assigning Description, name by binding the values from context and initializing in WDDOINIT method of the view in which UI element exists.
Multiple Roadmap Step will make it easier if we need to add the steps later as there will be no need of creating an individual node specifically, we can populate the attribute bound to multiple roadmap step which creates node we can add the step that is necessary.
Description
In this Example I wanted to display Material Details and Purchase Document details , to achieve this we can prefer the Roadmap UI element, so that we will be able to make it look as Data being displayed in the same screen instead of showing the data as if in different screen with the help of buttons.
Using Roadmap will make it easier as we will be able to see the description for the step so that user can easily find the data required.
Follow these steps to Achieve this functionality using Roadmap UI element.
Step 1 :
Firstly create a Wedbynpro Object in T-code SE80, by selecting ‘Webdyn comp’ in Repository browser and provide a name and click on enter so the webdynpro object is created with 4 components i.e., 1. Component controller, 2. Component Interface, 3. Views and 4. Windows.
Step 2 :
Here the fig 1.1, 1.2 shows the steps to create a Roadmap UI element in view.
Right click on ‘ROOTUIELEMENTCONTAINER’ will provide the option to insert a new element. And the element is of type ‘ROADMAP’.
Fig : 1.1
Fig : 1.2
Here in the image below I have used and view element container to show the view based on the step selected.
The Above 2 steps are similar for both Roadmap step and Multiple roadmap steps
Step 3:
Here In this step we are going to create a step for Roadmap and initializing it with properties and binding of Attributes for ‘Roadmap step’ and ‘Multiple roadmap step’
Roadmap Step :
Step 1:
Here in this step we are going to create a ‘Roadmap’ node with Attribute ‘Step’ of type string in the main View as I’m going to create my Roadmap UI element here. So that it can be bound to the Roadmap element using which we can capture the step used.
Fig : 1.3
Step 2:
Here in fig 1.4, 1.5 show steps to create a step for the UI element. Each step acts as a Node which will specify the operation being performed or about the data being displayed.
Fig : 1.4
Fig : 1.5
Step 3:
In this Step we are going to give the Name and description for each step we have created for the Roadmap to Identify the step which we choose to select based on requirement.
Fig : 1.6.
Step 4:
Here in fig 1.7, 1.8 shows the steps to bind the ‘SELECTED STEP’ property of Roadmap to the attribute step, so that the step which is selected can be acquired using it.
Fig : 1.7
Fig : 1.8
Step 5:
In This step we are going to Create a Event for Performing On selecting step action, In the properties of Roadmap Element you will be able to see a Event ‘on select ‘ Here we have to prove the event name (custom name). A event handler method is created for the Event in methods section automatically.
Fig : 1.9
Here as shown in below image We are going to initialize the Attribute which was bound to ‘selected step property’ of Roadmap element, so that initially a step is selected on Roadmap UI element..
Multiple Roadmap Step :
Step 1 :
Here in this step for Multiple roadmap step we are going to create a Node named Roadmap with attributes Description(String), Enabled(wdy_boolean), Name(string), Text direction(WDUI_TEXT_DIRECTION), Tooltip(string), type(WDUI_ROAD_MAP_STEP_TYPE), Visible(WDY_BOOLEAN), So that we can create the nodes with Description , name and required properties in the form of internal Table records by binding these attributes to Multiple step.
Step 2 :
In this Step we are going to create a Multiple Roadmap step By right clicking on Roadmap Ui element then in step selecting Multiple Roadmap step as shown below
Step 3:
After creating the Multiple Roadmap step now we have to bind the Values to properties of Roadmap step declared as Attributes in context accordingly.
Step 4:
In this step we are going to initialize the steps we need to show in the Roadmap UI element in WDDOINIT method of the view.
Step 5:
Here in this step we are going to create 2 buttons to navigate from one step to another step as The selected step property of Roadmap element is bound to the Multiple step and we will not be able to capture the step that is selected, So to navigate between screens we are using buttons,
Your view will look as shown below.
Step 4 :
Here we are going to create another view so that when a step is selected we can Navigate to the particular View and show data based on the step.
Fig 1.10 & 1.11 will show the steps to create a new view.
In Fig 1.12 as you can see I have took tables in my views to display the Material data and Purchase document tables data.
Fig 1.10
Fig 1.11
Fig 1.12
Step 5.
In this step we are going to Create Inbound and outbound plugs So that we can Navigate between Views
Here Fig 1.13 We have created an Inbound plug which will act as Navigation link to a view.
In Fig 1.14 We have created an Outbound plug which is responsible to leave a window for a view of an embedding window.
Fig 1.13
Fig 1.14
In Fig 1.15, 1.16 We are going to embed the New view created (besides Main view) to the View container element of Main view, on right clicking on view container we will be able to see ‘embed view’ option.
By selecting that option a pop up will be generated where we can select the view to be embedded by Clicking on the search help of ‘View to be embedded’ field
Fig 1.15
Fig 1.16
Step 6 :
After we embedded the view to the View container, We have to create a Navigation link for the Outbound plugs, so that we can Navigate between views
Here In Fig 1.17 we are going to right click on the Outbound plug we will be able to see option as create Navigation link, select that option
A pop up screen will be displayed as shown in Fig 1.18, here we will select the destination view By clicking on the search help of ‘dest view’ field which will display the views in the Webdynpro object select the respective view to which we have to navigate
Follow the same procedure for all Views embedded to the window structure.
Fig 1.17
Fig 1.18
Step 7 :
Once we provided Navigation links to the outbound plugs, we will now provide the data in Views, so that in each step we can see the data being displayed.
Here in views we are using Table UI element to display the Material data, and Purchase document in purchase order view
As shown in Fig 1.19 we should be initializing the data in WDDOINIT method on to the Table UI element and.
Fig 1.19
Step 8 :
Roadmap Step :
In this step we are going to Implement the ‘OnAction ‘ Event handler method which will be responsible for performing actions based on the step selected.
Here in fig 1.20 we are implementing the Event handler method of ‘onselect’ event of Roadmap UI element.
To get the selected step we are going to call Get_string method of WDEVENT, which will return the name of the step selected, by collecting the step selected we will be able to Navigate to the views. We will be performing the same process for the remaining views for Navigation based on step selected.
Fig 1.20
Multiple Roadmap step :
Here in this step we will be getting to next screen/node based on button click, to achieve this I have create 2 button 1. Previous 2. Next
We will be giving Onaction methods for the buttons and In these Event handler methods we will firing the plugs accordingly and setting the step selected using SET_LEAD_SELECTION_INDEX ( ) method.
On previous :
On Next :
Step 9 :
Once the Event handler methods are implemented, we will be creating an Webdynpro application to execute the application By clicking on the WDP object name we will be getting option create by selecting it we can see option as Webdynpro application ,select the option as shown in Fig 1.21
And save the Webdynpro application component Now we will be able to execute our Webdynpro Object by clicking “Execute or F8 button”
Fig 1.21
Fig 1.22
Output Screens:
Roadmap step:
On clicking 2nd node it will navigate to Purchase document details as showed in below image.
Multiple roadmap step:
On Clicking Next button on Screen would navigate us to Purchase document details in Node 2. As shown below.
Source Code :
Main view :
Roadmap step :
WDDOINIT :
METHOD wddoinit .
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
DATA lo_el_roadmap TYPE REF TO if_wd_context_element.
DATA ls_roadmap TYPE wd_this->element_roadmap.
DATA lv_step TYPE wd_this->element_roadmap-step.
lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).
lo_el_roadmap = lo_nd_roadmap->get_element( ).
LV_STEP = 'STEP1'.
lo_el_roadmap->set_attribute(
name = `STEP`
value = lv_step ).
ENDMETHOD.On Action event handler :
METHOD onactiononselect .
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
DATA lo_el_roadmap TYPE REF TO if_wd_context_element.
DATA ls_roadmap TYPE wd_this->element_roadmap.
DATA lv_step TYPE wd_this->element_roadmap-step.
lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).
lo_el_roadmap = lo_nd_roadmap->get_element( ).
lv_step = wdevent->get_string( name = 'STEP' ).
lo_el_roadmap->set_attribute(
EXPORTING
value = lv_step " Attribute Value
name = 'STEP' " Web Dynpro: Name of Context Element
).
IF lv_step = 'STEP1'.
wd_this->fire_out_to_mat_plg( ).
ELSEIF lv_step = 'STEP2'.
wd_this->fire_out_to_po_plg( ).
ENDIF.
ENDMETHOD.
Multiple Roadmap Step :
WDDOINIT :
METHOD wddoinit .
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
DATA lt_roadmap TYPE wd_this->elements_roadmap.
DATA ls_roadmap TYPE wd_this->element_roadmap.
lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).
ls_roadmap-description = 'Material'.
ls_roadmap-enabled = 'X'.
ls_roadmap-name = '1'.
ls_roadmap-textdirection = 'inherit'.
ls_roadmap-tooltip = 'Material'.
ls_roadmap-type = 'standard'.
ls_roadmap-visisble = abap_true.
APPEND ls_roadmap TO lt_roadmap.
ls_roadmap-description = 'Purchase Document'.
ls_roadmap-enabled = 'X'.
ls_roadmap-name = '2'.
ls_roadmap-textdirection = 'inherit'.
ls_roadmap-tooltip = 'Purchase Document'.
ls_roadmap-type = 'standard'.
ls_roadmap-visisble = 'X'.
APPEND ls_roadmap TO lt_roadmap.
lo_nd_roadmap->bind_table( new_items = lt_roadmap set_initial_elements = abap_true ).
lo_nd_roadmap->set_lead_selection_index( index = 1 ).
ENDMETHOD.
ON NEXT event handler method :
method ONACTIONONNEXT .
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
lo_nd_roadmap = wd_context->get_child_node(
* index = USE_LEAD_SELECTION
name = wd_this->wdctx_roadmap
).
lo_nd_roadmap->set_lead_selection_index( index = 2 ).
wd_this->fire_to_po_plg( ).
endmethod.ON PREV event handler method :
method ONACTIONONPREV .
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
lo_nd_roadmap = wd_context->get_child_node(
* index = USE_LEAD_SELECTION
name = wd_this->wdctx_roadmap
).
lo_nd_roadmap->set_lead_selection_index( index = 1 ).
wd_this->fire_to_material_plg( ).
endmethod.Material View :
WDDOINIT :
method WDDOINIT .
DATA lo_nd_material TYPE REF TO if_wd_context_node.
DATA lt_material TYPE wd_this->elements_material.
lo_nd_material = wd_context->get_child_node( name = wd_this->wdctx_material ).
Select mandt, matnr, Ersda,ernam,laeda,aenam from mara INTO TABLE @lt_material UP TO 10 ROWS.
lo_nd_material->bind_table( new_items = lt_material set_initial_elements = abap_true ).
endmethod.Purchase Order View :
WDDOINIT :
METHOD WDDOINIT .
DATA LO_ND_EKKO TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_EKKO TYPE WD_THIS->ELEMENTS_EKKO.
LO_ND_EKKO = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_EKKO ).
SELECT EBELN,
BUKRS,
BSTYP,
BSART,
BSAKZ,
LOEKZ FROM EKKO INTO TABLE @LT_EKKO UP TO 10 ROWS.
LO_ND_EKKO->BIND_TABLE( NEW_ITEMS = LT_EKKO SET_INITIAL_ELEMENTS = ABAP_TRUE ).
ENDMETHOD.Conclusion :
Here as Displayed in the output, the user will be only seeing the Screen with Roadmap UI element and table, and on clicking a step or button the data will be changed.
As, shown in Roadmap step output Screen the user can select any Roadmap Node to navigate from one view to another i.e., from Material to Purchase document and vice versa.
In case of Multiple roadmap step as we will not be able to capture the selected step, we made use of buttons to navigate between Nodes, By clicking on Next will navigate to Purchase document View and Previous will navigate to Material View.
So, the Roadmap makes it easier for user to trace or know the step/view that he is currently in.
Related content
For more information Visit Web Dynpro for ABAP – SAP Help Portal
