Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Roadmap UI element

The Roadmap UI element displays the steps followed in the wizard.

clip_image002

Each step can be a roadmap step object or MultipleRoadmap step.

A road map can use various symbols to mark the start and endpoint.

clip_image003

Let us see how to create a simple road map.

Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.

clip_image005

Assign the component to the package or save it in the local object.

 

Step 2: To save the current roadmap step we need an attribute. Go to the context tab of the view controller and create the context node as shown below.

clip_image006

Enter the name for the node and press enter.

clip_image008

Create an attribute to the node as shown below.

clip_image009

 

Provide the name and type for the attribute and press enter.

clip_image011

 

 

Step 3: Go to the layout tab of the view controller and insert a roadmap UI element as shown below.

clip_image013

Provide the ID and type for the UI element.

clip_image015

Right click on the road map UI element and select insert step.

clip_image017

 

Provide ID and Type for the step.

 

clip_image019

Similarly create two more steps with ID second and third.

 

clip_image021

 

In the property of the first step enter the description and Name.

clip_image023

Similarly enter the description and name for the remaining two steps.

clip_image025

 

Bind the step attribute to the selected step property of the road map UI element.

clip_image027

 

Step 4: We need a view container UI element to hold an view for the each step of the road map. Right click on the root container UI element and select insert UI element to add view container UI element.

clip_image029

 

Similarly insert two button UI elements to navigate between the views with name previous and next and create action for both the buttons.

clip_image031

 

Step 5: Create a view for each step. Right click on the view controller and create a view.

clip_image033

Enter the name and description for the view.

clip_image035

In the layout tab of the view created insert a text view UI element.

clip_image037

 

Enter the text property of the text view as the first view.

clip_image039

Similarly create two more views and name the view as second and third. Insert a text view in each view and provide the text as second and third view.

Step 6: To navigate between the view we need to create the inbound and outbound plugs. Go to the Outbound plug tab of the main view (V_MAIN) and create outbound plug to all other views.

clip_image041

Go to the inbound plug of the first view and create an inbound plug for the each view as shown below.

clip_image043

clip_image045

 

clip_image047

 

Step 7: Go to the window and create the navigation links between the views.

First embed all the views created first, second and third in the view container of the main view as shown below.

clip_image048

 

Choose the view to be embedded and press enter.

clip_image050

Similarly embed second and third view to the view container.

clip_image052

Create the navigation links to each view as shown below.

clip_image053

Choose the destination view as the first view.

clip_image055

Navigation link will be formed from the main view to the first view will be created as below.

clip_image057

Similarly create the navigation link to the second and third view using their respective outbound plugs.

clip_image059

 

 

Step 8: Go to the methods of the main view and in do init method set the attribute as first. Remember the value we are setting to the selected step of the road map UI element must be same as the ID of the roadmap step so that the road map step will be highlighted.

clip_image061

Code :

  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( ).

  lo_el_roadmap->set_attribute(
    name = 
`STEP`

   
value = 'FIRST' ).

 

 

Write the following code in the next method.  I have read the attribute to know the current step and set the attribute again by increasing a step as next button has been triggered and accordinly I am navigating to the view.

 

 

Code:

  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( ).

  lo_el_roadmap->get_attribute(
   
EXPORTING

      name = 
`STEP`
   
IMPORTING
     
value = lv_step ).

 
case
lv_step.
   
when 'FIRST'
.
      lv_step =
'SECOND'
.
   
WHEN 'SECOND'
.
      LV_STEP =
'THIRD'
.
   
WHEN 'THIRD'
.
      LV_STEP =
'FIRST'
.
 
ENDCASE.


  lo_el_roadmap->set_attribute(
    name = 
`STEP`
   
value = lv_step ).

 
case
lv_step.
   
when 'FIRST'
.
      wd_this->fire_to_first_plg(
      ).

   
WHEN 'SECOND'
.
      wd_this->fire_to_second_plg(
      ).

   
WHEN 'THIRD'
.
      wd_this->fire_to_third_plg(
      ).

 
ENDCASE
.

 

Write the following code in the previous method.  I have read the attribute to know the current step and set the attribute again by decreasing a step as next button has been triggered and accordinly I am navigating to the view.

Code:

  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( ).

  lo_el_roadmap->get_attribute(
   
EXPORTING

      name = 
`STEP`
   
IMPORTING
     
value = lv_step ).

 
case
lv_step.
   
when 'FIRST'
.
      lv_step =
'THIRD'
.
   
WHEN 'SECOND'
.
      LV_STEP =
'FIRST'
.
   
WHEN 'THIRD'
.
      LV_STEP =
'SECOND'
.
 
ENDCASE.


  lo_el_roadmap->set_attribute(
    name = 
`STEP`
   
value = lv_step ).

 
case
lv_step.
   
when 'FIRST'
.
      wd_this->fire_to_first_plg(
      ).

   
WHEN 'SECOND'
.
      wd_this->fire_to_second_plg(
      ).

   
WHEN 'THIRD'
.
      wd_this->fire_to_third_plg(
      ).

 
ENDCASE
.

Step 9: Save and activate the whole component. Create an webdynpro application and test the component.

clip_image062

 

Output:

clip_image064

 

 clip_image066

 

We can also navigate by selecting the road map step for that we need to create an action for onselect event of the roadmap and write the action over there.

Code:

DATA LV_STEP TYPE STRING.
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.

CALL METHOD
WDEVENT->GET_STRING
 
EXPORTING

    NAME   =
'STEP'
  RECEIVING
   
VALUE  = LV_STEP.

  lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).

  lo_el_roadmap = lo_nd_roadmap->get_element( ).

  lo_el_roadmap->set_attribute(
    name = 
`STEP`

   
value = lv_step ).

 
case
lv_step.

   
when 'FIRST'
.
      wd_this->fire_to_first_plg(
      ).

   
WHEN 'SECOND'
.
      wd_this->fire_to_second_plg(
      ).

   
WHEN 'THIRD'
.
      wd_this->fire_to_third_plg(
      ).

 
ENDCASE
.

I have captured the selected button in the roadmap using the importing parameter wdevent and set the attribute and triggered the outbound plug accordingly.

Test the output.

About Arun

0 Comments:

Post a Comment

Powered by Blogger.