Webui Navigation Guide

WebUI Navigation guide
Summary
This document is aimed at understanding navigation concepts in CRM WebUI. It covers the
various scenarios of navigation.
Author(s): Ashish Walke
Company: Deloitte Consulting India Pvt. Ltd.
Created on: 01 May 2012
Author Bio
Ashish Walke is a Consultant at Deloitte consulting. He has worked on multiple

implementations in SAP CRM across versions.
Table of Contents
Concept of navigation
1. Outbound plug (OP)
2. Inbound plug (IP)
3. Navigational link
4. Runtime repository editor
1. Navigation between views within one component
2. Navigation from view of an outer component to view of the inner component
3. Navigation from view of an inner component to view of the outer component
4. Navigation using Work Area Component Repository
5. Navigation using Navigation descriptor
6. Related Content
Generated by Jive on 2013-03-14+01:00

1
Navigation from one view / window to another involves the following elements:-
• Outbound plug
• Inbound plug
• Navigational link
• Runtime repository editor
Outbound plug (OP)

The outbound plug is a method of the controller class of the navigation source. It is fired
when moving away from the source (view / window).
Inbound plug (IP)

The inbound plug is a method of the controller class of the navigation source. It is fired when
moving towards the destination (view / window).
Navigational link
The navigational link is an element of the runtime repository. It provides the mapping
between source and destination. It typically consists of the following:-

2
• Navigational link Id
• Source (view / window)
• Outbound plug
• Destination (view / window)
• Inbound plug
Runtime repository editor

The runtime repository is an XML file. But since maintaining it is no so convenient the
component workbench offers an editor that visualizes the xml coding and offers an easy
maintenance of the different elements. The runtime repository editor allows the following:-
• Creation of navigational links

• Assignment of views to view sets
• Assignment of view / view sets to window
• Assignment of component set
• Definition of component interface
• Definition of component usages
a) Create a component with two views “view1” and “view2” each with a
context node (BuilHeader).

3
Create view configuration for both view1 and view2 and add fields to the configuration.
b) Create a button in view1 (code added to view1.htm).

4
c) Create an event handler for the button and an outbound plug for view1.

5
d) Create an inbound plug for view2.

6
e) In the Runtime repository add both the views to the Window “MainWindow”. Assign “view1” as
default.

7
f) In the Runtime repository add Navigational link “ToPage2”. Specify the source and target views
and the corresponding outbound and inbound plugs.

8

9
g) Navigational link is created in the runtime repository.
h) Handle the event for button click i.e. call the Outbound plug from the event handler for button.
Sample code:-
METHOD eh_onbtn1.

10
CALL METHOD op_topage2.
ENDMETHOD.
i) In order to navigate from View1 to View2, we will call the navigational link from the outbound plug.
Sample code:-
METHOD op_topage2. view_manager->navigate( source_rep_view = rep_view outbound_plug =

'ToPage2' ).ENDMETHOD.
a) Create a component (i.e. outer component) with view “view1” and a context
node (BuilHeader).

11
Create a component (i.e. inner component) with view “view2” and a context
node (BuilHeader).
b) Assign view1 and view2 to “MainWindow” in their respective components.
c) Create a button in view1 (Outer component). For sample code refer to point b) in Navigation
between views within one component.
d) Create an event handler for the button and an outbound plug for “view1” (Outer component).
Create outbound plug for “MainWindow” (Outer component).

12
e) Create an inbound plug for “view2” and “MainWindow” (Inner component).

13
f) In the runtime repository create Component interface (Inner Component). Specify the inbound and outbound
plugs created and add the context BuilHeader.

14
g) In the runtime repository create Component usage (Outer Component).

15
h) Assign the Interface view from Usage (created above) to the MainWindow of Outer component.

16
i) Create navigational link in the runtime repository (Outer Component) to specify source as
“view1” and destination as “view2”.
Specify values as below:-
Source = MainWindow of Outer component (OP = TOPAGE2)
Target = MainWindow of Inner component (IP = FROMPAGE1)

17
j) Handle the event for button click i.e. call the Outbound plug of “view1” from event handler for
button.
Sample code:-
METHOD eh_onbtn1. CALL METHOD op_topage2.ENDMETHOD.
k) Following would be the navigation path from “view1” to “view2”.

18
Call OP of MainWindow (Outer) from OP of “view1”
Sample code:-
METHOD op_topage2. DATA: lr_window TYPE REF TO cl_bsp_wd_window. lr_window = me-

>view_manager->get_window_controller( ). lr_window->call_outbound_plug( 'TOPAGE2' ).ENDMETHOD.
Call Navigational link from OP of MainWindow (Outer)
Sample code:-
METHOD op_topage2. me->view_manager->navigate( source_rep_view = me->rep_view

outbound_plug = 'TOPAGE2').ENDMETHOD.
Call IP of “view2” from IP of MainWindow (Inner)
Sample code:-
METHOD ip_frompage1.

19
DATA : lr_view TYPE REF TO zl_znav_scn_view2_impl.
TRY.
lr_view ?= get_subcontroller_by_viewname( 'ZNAV_SCN2_INNER/view2' ).
CATCH cx_sy_move_cast_error.
ENDTRY.
CHECK lr_view IS NOT INITIAL.

lr_view->ip_frompage1( ).ENDMETHOD.

20
a) Create a component (i.e. Search component) with view “view1” and a context node
(BuilHeader).
Create a component (i.e. Header component) with view “view2” and a context
node (BuilHeader).
Create a component (i.e. Main Component). Both the above components would be
included in the Main component.
b) Assign view1 and view2 to “MainWindow” in their respective components.

21
c) Create a button in view1 (Outer component).
For sample code refer to point b) in Navigation between views within one component.
d) Create an event handler for the button and an outbound plug for “view1” (Outer component).
Create outbound plug for “MainWindow” (Outer component).

22
e) Create an inbound plug for “view2” and “MainWindow” (Inner component).

23
f) In the runtime repository create Component interface (Search Component).
Specify the inbound and outbound plugs created and add the context BuilHeader.

24
g) In the runtime repository create Component interface (Header Component).
Specify the inbound and outbound plugs created and add the context BuilHeader.

25
h) In the runtime repository of Main Component, create Component usage for Search and Header component.
Also, include the Inbound and Outbound plugs respectively.

26
i) Assign the Interface view from Usage (created above) to the MainWindow of Main Component.
Also, include the inbound and outbound plugs in the MainWindow.

27
j) Delegate the outbound plug of Interface window (Component usage SEARCH) to MainWindow outbound
plug.

28
k) Create navigational link in the runtime repository (Main Component) to specify source as “MainWindow”
of Main Component and destination as
“InterfaceWindow” of Component usage HEADER.
Specify values as below:-
Source = MainWindow of Main component (OP = TOPAGE2)

29
Target = InterfaceWindow of Header component (IP = FROMPAGE1)
l) Handle the event for button click i.e. call the Outbound plug of “view1” from event handler for
button.
Sample code:-
METHOD eh_onbtn1. CALL METHOD op_topage2.ENDMETHOD.
m) Following would be the navigation path from “view1” to “view2”.

30
Call OP of MainWindow (SEARCH) from OP of “view1”
Sample code:-
METHOD op_topage2. DATA: lr_window TYPE REF TO cl_bsp_wd_window. lr_window = me-

>view_manager->get_window_controller( ). lr_window->call_outbound_plug( 'TOPAGE2' ).ENDMETHOD.
Fire outbound plug of MainWindow(MAIN) from MainWindow(SEARCH)
Sample code:-

31
METHOD op_topage2. fire_outbound_plug( iv_outbound_plug = 'TOPAGE2' ).ENDMETHOD.
Call Navigational link from OP of MainWindow (MAIN)
Sample code:-
METHOD op_topage2. me->view_manager->navigate( source_rep_view = me->rep_view

outbound_plug = 'TOPAGE2').ENDMETHOD.
Call IP of “view2” from IP of MainWindow (Inner)
Sample code:-
METHOD ip_frompage1.
DATA : lr_view TYPE REF TO zl_znav_scn_view20_impl.
TRY.
lr_view ?= get_subcontroller_by_viewname( 'ZNAV_SCN3_HDR/view2' ).
CATCH cx_sy_move_cast_error.
ENDTRY.
CHECK lr_view IS NOT INITIAL.
lr_view->ip_frompage1( ).ENDMETHOD.

32
a) Create a component (i.e. Custom component) with view “view1” and a context node
(BuilHeader).
Create view configuration for view1 and add fields to the configuration.
Create a button for navigating back to Identification screen (For sample code refer to point
b) in Navigation between views within one component).
Assign this component such that it loads on clicking the work center link in navigation bar as follows:-

33
b) Create an event handler for the button and an outbound plug for
“view1” (Custom component).
Create outbound plug for “MainWindow” (Custom component).

34
c) Create Component Interface for the Custom component (This would be used in the next step).

35
d) Create an entry for the Custom component in Work Area Component Repository.

36
e) Create an entry for outbound plug. The outbound plug name should correspond to the name specified in
Outbound plug of Window in Custom
component (Step b)
Source ID can be any free text. However, it has to be unique (i.e. cannot be used more than once).

37
f) Define Object Type which determines the navigation target.
For the appropriate Navigation bar profile define the Generic OP Mapping.
The Generic OP mapping can contain either of the following that defines the navigation
target:-
- TargetID
- Logical link

38
g) Following would be the navigation path from “Custom component” to

“Identification screen”.
Call OP of MainWindow from OP of “view1”
Sample code:-
METHOD op_backtoident. DATA: lr_window TYPE REF TO cl_bsp_wd_window.

lr_window = me->view_manager->get_window_controller( ). lr_window-
>call_outbound_plug( 'BACKTOIDENT' ).ENDMETHOD.
Fire outbound plug of WorkArea Component repository from MainWindow

39
Sample code:-
METHOD op_topage2. fire_outbound_plug( iv_outbound_plug = 'BACKTOIDENT' ).ENDMETHOD.
a) Get instance of the BOL core and Activity root object.
lr_core = cl_crm_bol_core=>get_instance( ).
lr_activity = lr_core->get_root_entity( iv_object_name = 'BTOrder'
iv_object_guid = lv_activity_guid ).
CHECK lr_activity IS BOUND.

40
Assumption:- Activity GUID has been fetched in variable “lv_activity_guid”
b) Create an object for navigation.
CREATE OBJECT lr_coll_for_navigate TYPE cl_crm_bol_bo_col.
c) Add the Activity entity to the navigation collection.
lr_coll_for_navigate->add( iv_entity = lr_activity
iv_set_focus = abap_true ).
d) Get Activity object type.
lv_object_type = cl_crm_uiu_ibase_tool=>get_bt_ui_object_type( lr_activity ).
Assumption:- The BOL entity for Activity has already been fetched in variable “lr_activity”
e) Create the navigation descriptor.
cl_crm_ui_descriptor_obj_srv=>create_ui_object_based(
EXPORTING iv_ui_object_type = lv_object_type
iv_ui_object_action = lc_action
RECEIVING rr_result = lr_nav_descr ).

41
CHECK lr_nav_descr IS NOT INITIAL.
f) Insert the navigation descriptor in navigation collection at position 1.
lr_coll_for_navigate->insert( iv_bo = lr_nav_descr
iv_index = 1 ).
g) Register the current page in history so that we can navigate back to it.
RAISE EVENT history_trigger .
h) Call outbound plug for navigation and pass the navigation collection.
op_toactivity( lr_coll_for_navigate ).
i) Get instance of the navigation service and navigate to the component dynamically along with collection.
DATA: lr_nav_serv TYPE REF TO if_crm_ui_navigation_service.
lr_nav_serv = cl_crm_ui_navigation_service=>get_instance( ).
lr_nav_serv->navigate_dynamically( iv_data_collection = iv_data_collection ).

42

Webui Navigation Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webui Navigation Guide

Uploaded by

Copyright:

Available Formats

WebUI Navigation guide

Author(s): Ashish Walke

Company: Deloitte Consulting India Pvt. Ltd.

Created on: 01 May 2012

Ashish Walke is a Consultant at Deloitte consulting. He has worked on multiple

Generated by Jive on 2013-03-14+01:00

Outbound plug (OP)

Inbound plug (IP)

Generated by Jive on 2013-03-14+01:00

Runtime repository editor

• Creation of navigational links

Generated by Jive on 2013-03-14+01:00

b) Create a button in view1 (code added to view1.htm).

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

d) Create an inbound plug for view2.

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

g) Navigational link is created in the runtime repository.

Generated by Jive on 2013-03-14+01:00

CALL METHOD op_topage2.

METHOD op_topage2. view_manager->navigate( source_rep_view = rep_view outbound_plug =

Generated by Jive on 2013-03-14+01:00

b) Assign view1 and view2 to “MainWindow” in their respective components.

Generated by Jive on 2013-03-14+01:00

e) Create an inbound plug for “view2” and “MainWindow” (Inner component).

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

g) In the runtime repository create Component usage (Outer Component).

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

Specify values as below:-

Source = MainWindow of Outer component (OP = TOPAGE2)

Target = MainWindow of Inner component (IP = FROMPAGE1)

Generated by Jive on 2013-03-14+01:00

METHOD eh_onbtn1. CALL METHOD op_topage2.ENDMETHOD.

k) Following would be the navigation path from “view1” to “view2”.

Generated by Jive on 2013-03-14+01:00

Call OP of MainWindow (Outer) from OP of “view1”

METHOD op_topage2. DATA: lr_window TYPE REF TO cl_bsp_wd_window. lr_window = me-

Call Navigational link from OP of MainWindow (Outer)

METHOD op_topage2. me->view_manager->navigate( source_rep_view = me->rep_view

Call IP of “view2” from IP of MainWindow (Inner)

Generated by Jive on 2013-03-14+01:00

DATA : lr_view TYPE REF TO zl_znav_scn_view2_impl.

CHECK lr_view IS NOT INITIAL.

Generated by Jive on 2013-03-14+01:00

b) Assign view1 and view2 to “MainWindow” in their respective components.

Generated by Jive on 2013-03-14+01:00

c) Create a button in view1 (Outer component).

Create outbound plug for “MainWindow” (Outer component).

Generated by Jive on 2013-03-14+01:00

e) Create an inbound plug for “view2” and “MainWindow” (Inner component).

Generated by Jive on 2013-03-14+01:00

f) In the runtime repository create Component interface (Search Component).

Generated by Jive on 2013-03-14+01:00

g) In the runtime repository create Component interface (Header Component).

Generated by Jive on 2013-03-14+01:00

Generated by Jive on 2013-03-14+01:00

Also, include the inbound and outbound plugs in the MainWindow.

Generated by Jive on 2013-03-14+01:00