WebUI Navigation Guide

8/12/2019 WebUI Navigation Guide

1/27

WebUI Navigation guide

Summary

This document is aimed at understanding navigation concepts in CRM WebUI. It covers the various scenarios ofnavigation.

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 Contents1. Concept of navigation

a. Outbound plug (OP)

b. Inbound plug (IP)

c. Navigational link

d. Runtime repository editor

2. Navigation between views within one component

3. Navigation from view of an outer component to view of the inner component

4. Navigation from view of an inner component to view of the outer component

5. Navigation using Work Area Component Repository

6. Navigation using Navigation descriptor

7. Related Content

Concept of navigationNavigation from one view / window to another involves the following elements:-

Outbound plug

Inbound plug

Navigational link

Runtime repository editor

8/12/2019 WebUI Navigation Guide

2/27

8/12/2019 WebUI Navigation Guide

3/27

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

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

8/12/2019 WebUI Navigation Guide

4/27

d) Create an inbound plug for view2.

e) In the Runtime repository add both the views to the Window MainWindow.Assign view1as default.

8/12/2019 WebUI Navigation Guide

5/27

f) In the Runtime repository add Navigational link ToPage2.Specify the source and target views and the

corresponding outbound and inbound plugs.

8/12/2019 WebUI Navigation Guide

6/27

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:-

8/12/2019 WebUI Navigation Guide

7/27

METHOD eh_onbtn1.

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.

Navigation from view of an outer component to view of the

inner component

a) Create a component (i.e. outer component) with view view1 and a context node (BuilHeader).

Create a component (i.e. inner component) with view view2 and a context node (BuilHeader).

Create view configuration for both view1 and view2 and add fields to the configuration.

8/12/2019 WebUI Navigation Guide

8/27

b)Assign view1 and view2 to MainWindowin 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).

8/12/2019 WebUI Navigation Guide

9/27

e) Create an inbound plug for view2and MainWindow(Inner component).

f) In the runtime repository create Component interface (Inner Component).Specify the inbound and

outbound plugs created and add the context BuilHeader.

8/12/2019 WebUI Navigation Guide

10/27

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

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

8/12/2019 WebUI Navigation Guide

11/27

i) Create navigational link in the runtime repository (Outer Component) to specify source as view1and

destination as view2.

Specify values as below:-

Source = MainWindow of Outer component (OP = TOPAGE2)

Target = MainWindow of Inner component (IP = FROMPAGE1)

j) Handle the event for button click i.e. call the Outbound plug of view1from event handler for button.

8/12/2019 WebUI Navigation Guide

12/27

Sample code:-

METHOD eh_onbtn1.

CALL METHOD op_topage2.

ENDMETHOD.

k) Following would be the navigation path from view1to view2.

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 view2from IP of MainWindow (Inner)

Sample code:-

METHOD ip_frompage1.

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.

8/12/2019 WebUI Navigation Guide

13/27

CHECK lr_view IS NOT INITIAL.

lr_view->ip_frompage1( ).

ENDMETHOD.

Navigation from view of an inner component to view of the

outer component

a) Create a component (i.e. Search component) with view view1and 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.

Create view configuration for both view1 and view2 and add fields to the configuration.

b)Assign view1 and view2 to MainWindowin their respective components.

8/12/2019 WebUI Navigation Guide

14/27

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

e) Create an inbound plug for view2and MainWindow(Inner component).

8/12/2019 WebUI Navigation Guide

15/27

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

Specify the inbound and outbound plugs created and add the context BuilHeader.

8/12/2019 WebUI Navigation Guide

16/27

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

Specify the inbound and outbound plugs created and add the context BuilHeader.

8/12/2019 WebUI Navigation Guide

17/27

h) In the runtime repository of Main Component, create Component usage for Search and

Headercomponent. Also, include the Inbound and Outbound plugs respectively.

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.

8/12/2019 WebUI Navigation Guide

18/27

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

MainWindowoutbound plug.

8/12/2019 WebUI Navigation Guide

19/27

k) Create navigational link in the runtime repository (Main Component) to specify source asMainWindow

of Main Component and destination as

InterfaceWindowof Component usage HEADER.

Specify values as below:-

Source = MainWindow of Main component (OP = TOPAGE2)

Target = InterfaceWindow of Header component (IP = FROMPAGE1)

l) Handle the event for button click i.e. call the Outbound plug of view1from event handler for button.

Sample code:-

METHOD eh_onbtn1.

CALL METHOD op_topage2.ENDMETHOD.

m) Following would be the navigation path from view1to view2.

8/12/2019 WebUI Navigation Guide

20/27

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:-

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 view2from IP of MainWindow (Inner)

Sample code:-

8/12/2019 WebUI Navigation Guide

21/27

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.

Navigation using Work Area Component Repository

a) Create a component (i.e. Custom component) with view view1and 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:-

8/12/2019 WebUI Navigation Guide

22/27

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

Create outbound plug for MainWindow(Custom component).

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

8/12/2019 WebUI Navigation Guide

23/27

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

e) Create an entry for outbound plug. The outbound plug name should correspond to the namespecified 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).

8/12/2019 WebUI Navigation Guide

24/27

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

g) Following would be the navigation path from Customcomponentto Identificationscreen.

8/12/2019 WebUI Navigation Guide

25/27

Call OP of MainWindow from OP of view1Sample 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

Sample code:-

METHOD op_topage2.

fire_outbound_plug( iv_outbound_plug = 'BACKTOIDENT' ).

ENDMETHOD.

Navigation using Navigation descriptor

8/12/2019 WebUI Navigation Guide

26/27

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.

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

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 .

8/12/2019 WebUI Navigation Guide

27/27

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