Scribd
Upload
12 views

RoadMap UI Tutorial webdynpro for ABAP

Uploaded by

amir
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

RoadMap UI Tutorial webdynpro for ABAP

Uploaded by

amir
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

RoadMap UI Tutorial webdynpro

for ABAP
August 28, 2017

STEP1

Goto SE80 and select object type as Webdynpro component/interface.

And create webdynpro component named: ZT_ROADMAP


STEP2

Go to component controller’s CONTEXT and create a NODE named :

ROADMAP
Step3.

Create attributes for the ROADMAP.

STEP type STRING: while running the application it will give the step on
which user is working.
Also Create two more attributes named :
NEXT_ENABLED type WDY_BOOLEAN and PREV_ENABLED type
WDY_BOOLEAN .
Step4 :

The created CONTEXT node ROADMAP is in component CONTROLLER.So


this node can’t be accessed in MAIN view. we need to map this ROADMAP
node to main view.

OPEN main view’s context and drag the COMPONENTCONTROLLER’s node


to main view.

IT will look like as the below screen shot once after you mapped it.
Step5:

Go to the MAIN view


Right click on the ROOTUIELEMENTCONTAINER and insert Element
named :

RM_TEST which is of type ROADMAP.


Step5.

Right click on the RM_TEST (created ROADMAP) and insert Roadmap Step.
Inserted step START’s attributes are:

Description: start

Name: 1
Same way insert two more steps: MIDDLE and END:

(in real time application, these steps can be “Select items” ,”select payment
options”, “credit card details” and in last “Confirmation”)

Step 6:

Double click on RM_TEST (road map).

Click on the Binding button for the Property: SelectedStep.


Map it with STEP Attribute.

So that when ever user select a step from the screen it’s ID will be assigned
to the STEP variable of ROADMAP node.
Step7:

We got the name of the step which user has selected from the screen but we
need some logic so that we can display the proper view for it.

For this SELECT event of RM_TEST will be used. To create it :

Double click on the RM_TEST and in Click the button create which is there
in front of OnSelect property.
Step 8 :

Just below the ROADMAP we also need proper view according to user click.

As an example when user select “Credit card details”- step. it should display
the view which has the relevant information.

VIEWCONTAINERUIELEMENT is use for this which can contain view at run


time depending on the user click.
Step9:

For this tutorial we will create 3 views START MIDDLE and END.

Right click on the VIEWS and create a view named START.


This view will be displayed on the first step: To distinguish between other
view create a page header,

Right click on the ROOTUIELEMENTCONTAINER and create PH_START of


type page header.
Double click on the PH_START and add some text like “This is the start view
” into the title Property.
Same way create two more views MIDDLE and END.
Step10 :

To connect MAIN view with other three views START ,MIDDLE and END. we
need navigation plugs from main.

Click on the MAIN view go to its Outbound plug and create three plugs.

TO_END

TO_MIDDLE

TO_START.
Step11:

Now go to START view and create an inbound plug.

Named: IN
Do the same thing for MIDDLE and END view
Step12 :

Now go to windows and embed the view which you have created.

Right click on the CE_VIEW and embed the views

START , MIDDLE and END.


Step13:

Now main view needs to be connected with the START, MIDDLE and END
view.

To do this right click on the TO_END plug and click on the “create
navigation link”

And select END view for it.


Same way create a navigation link for the other two plugs,.

Make sure that TO_MIDDLE connects with MIDDLE view

TO_START connects with START view


Step14:

Let’s also put two buttons so that user can go back or continue to the next
step.

Right click on the ROOTUIELEMENTCONTAINER and create


BR_NAVIGATE of type BUTTONROW.
We will put two buttons in single row.

Right click on the BR_NAVIGATE button row and create BUTTON_BACK of


type BUTTON.
Double click on the BUTTON_BACK and change its property Design as
PREVIOUS:
Same way create button BUTTON_NEXT in BR_NAVIGATE.

And change its design property as NEXT.

(Refer below screen shot)


Step 15:

On click of the back button ROADMAP should navigate to the previous step.
To achieve this:

Create an action named: PREVIOUS on BUTTON_BACK.

(Double click on BUTTON_BACK and click on the create ICON for PROPERY
“ONACTION”)
Same way create Action named: NEXT for the BUTTON_NEXT

SAVE the changes:

When you create actions it will internally create respective methods for it.

You can see the below screen shot with your created methods
ONACTIONNEXT and ONACTIONPREVIOUS.
Step16:

GO to your component controller and in EVENT tab create an event

NAVIGATE with parameter TARGET which is of type string.

(Use of this event will be explained after wards)


It is good practice to put all your core methods in to component controller as
COMPONENTCONTROLLER can be accessed from every view:

Go to methods tab and create three methods:

SET_NEXT : will be used when user click back button

SET_PREVIOUS : will be used when user click on the Continue button

SET_STEP : will be used to jump to a particular step


Step17:

Go to main view and in method tab select method ONACTIONSELECT


(which is created by action which we have defined for the ROADMAP)

Add one parameter named STEP of type string.

Add the below code :

Here we are calling the SET_STEP method of the component controller

DATA: l_ref_componentcontroller TYPE REF TO ig_componentcontroller.

l_ref_componentcontroller = wd_this->get_componentcontroller_ctr( ).

l_ref_componentcontroller->set_step( step ).
Same way in ONACTIONPREVIOUS method of MAIN view (which is called
by clicking the BACK button)

In previous method put the below code:

DATA: l_ref_componentcontroller TYPE REF TO ig_componentcontroller .

l_ref_componentcontroller = wd_this->get_componentcontroller_ctr( ).

l_ref_componentcontroller->set_PREVIOUS( ).
Same way in ONCATIONNEXT Method of the MAIN view put the below
code:

DATA: l_ref_componentcontroller TYPE REF TO ig_componentcontroller .

l_ref_componentcontroller = wd_this->get_componentcontroller_ctr( ).

l_ref_componentcontroller->set_next( ).

Step18:

Go to component controller and open method SET_STEP which we have


created in earlier steps.

Add one more parameter name as STEP of type string.

Add the below code into this method (this code is used to highlight the
current STEP so that user can know on which step he /she is currently on. In
last it will fire an event which is created in component controller .It is
indication of changing the view)

data : road_node type REF TO if_wd_context_node.

data : road_data TYPE if_componentcontroller=>element_roadmap.

road_node = wd_context->get_child_node( ‘ROADMAP’ ).


road_data-step = step.

if road_data-step eq ‘START’.
road_data-PREV_ENABLED = abap_false.
else.
road_data-PREV_ENABLED = abap_true.
endif.
if road_data-step eq ‘END’.
road_data-next_ENABLED = abap_false.
else.
road_data-next_ENABLED = abap_true.
endif.
road_node->set_static_attributes( road_data ).

* navigation
wd_this->fire_navigate_evt( step ).
Same way open the method SET_PREVIOUS in component controller and
add the below code in it.

data : road_node type ref to if_wd_context_node,

road_data TYPE if_componentcontroller=>element_roadmap.

data: step type string,

target type string.

road_node = wd_context->get_child_node( ‘ROADMAP’ ).


road_node->get_attribute( exporting name = ‘STEP’
IMPORTING
value = step ).
case step.
when ‘MIDDLE’.
target = ‘START’.
when ‘END’.
target = ‘MIDDLE’.
When others.
target = ‘END’.
endcase.
set_step( target ).

Same do for the method SET_NEXT of component controller.

And put the below code in it.(for SET_PREVIOUS and for SET_NEXT no need
for any input parameters)

data : road_node type ref to if_wd_context_node,

road_data TYPE if_componentcontroller=>element_roadmap.

data: step type string,

target type string.

road_node = wd_context->get_child_node( ‘ROADMAP’ ).


road_node->get_attribute( exporting name = ‘STEP’
IMPORTING
value = step ).
case step.
when ‘START’.
target = ‘MIDDLE’.
when ‘MIDDLE’.
target = ‘END’.
When others.
target = ‘START’.
endcase.
set_step( target ).

Step19:

The navigate event which is fired in the component controllers SET_STEP


method is handled by

ON_NAVIGATE method in the main view

So create a method ON_NAVIGATE with method type as “Event Handler”


and put Event as “NAVIGATE”(you need to do F4 for it)
When you open that method you can see TARGET as import data which is
come from NAVIGATE Event definition.

Put the below code inside the ON_NAVIGATE method:

CASE target.

WHEN ‘START’.

wd_this->fire_to_start_plg( ).

WHEN ‘MIDDLE’.

wd_this->fire_to_middle_plg( ).

WHEN ‘END’.

wd_this->fire_to_end_plg( ).

ENDCASE.
Step 20:

I know you are desperate to see the output (*=*) :Don’t worry This is the last
step 
Right click on the Component ZT_ROADMAP and create webdynpro
application.

You might also like