Skip to Content
Author's profile photo Former Member

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

/wp-content/uploads/2012/05/ash_97691.jpg

Author Bio

Ashish Walke is a Consultant at Deloitte consulting. He has worked on multiple implementations in SAP CRM across versions.

Table of Contents

  1. Concept of navigation
    1. Outbound plug (OP)
    2. Inbound plug (IP)
    3. Navigational link
    4. 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 navigation

Navigation from one view / window to another involves the following elements:-

  • Outbound plug
  • Inbound plug
  • Navigational link
  • Runtime repository editor

/wp-content/uploads/2012/05/img1_97692.png

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

  • 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

Navigation between views within one component

/wp-content/uploads/2012/05/img2_97693.png

      a) Create a component with two views “view1” and “view2” each with a context node (BuilHeader).

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

/wp-content/uploads/2012/05/img3_97700.png

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

/wp-content/uploads/2012/05/img4_97701.png

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

/wp-content/uploads/2012/05/img5_97702.png

d) Create an inbound plug for view2.

/wp-content/uploads/2012/05/img6_97703.png

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

/wp-content/uploads/2012/05/img7_97704.png

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

/wp-content/uploads/2012/05/img8_97705.png

/wp-content/uploads/2012/05/img9_97706.png

g) Navigational link is created in the runtime repository.

/wp-content/uploads/2012/05/img10_97707.png

h) Handle the event for button click i.e. call the Outbound plug from the event handler for button.

Sample code:-

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

/wp-content/uploads/2012/05/img11_97708.png

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.

/wp-content/uploads/2012/05/img12_97709.png

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

/wp-content/uploads/2012/05/img13_97710.png

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

/wp-content/uploads/2012/05/img14_97711.png

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

/wp-content/uploads/2012/05/img15_97712.png

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

/wp-content/uploads/2012/05/img16_97713.png

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

/wp-content/uploads/2012/05/img17_97714.png

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)

/wp-content/uploads/2012/05/img18_97715.png

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

/wp-content/uploads/2012/05/img19_97716.png

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.

  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.

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

/wp-content/uploads/2012/05/img20_97717.png

/wp-content/uploads/2012/05/img21_97721.png

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.

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

/wp-content/uploads/2012/05/img22_97722.png

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

/wp-content/uploads/2012/05/img23_97723.png

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

/wp-content/uploads/2012/05/img24_97724.png

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

/wp-content/uploads/2012/05/img25_97725.png

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

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

/wp-content/uploads/2012/05/img26_97726.png

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

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

/wp-content/uploads/2012/05/img27_97727.png

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

/wp-content/uploads/2012/05/img28_97728.png

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.

/wp-content/uploads/2012/05/img29_97729.png

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

/wp-content/uploads/2012/05/img30_97730.png

/wp-content/uploads/2012/05/img31_97731.png

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)

     Target   = InterfaceWindow of Header component (IP      = FROMPAGE1)

/wp-content/uploads/2012/05/img32_97732.png

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

/wp-content/uploads/2012/05/img33_97733.png

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

Navigation using Work Area Component Repository

/wp-content/uploads/2012/05/img34_97734.png

/wp-content/uploads/2012/05/img35_97735.png

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

/wp-content/uploads/2012/05/img36_97736.png

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

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

/wp-content/uploads/2012/05/img37_97737.png

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

/wp-content/uploads/2012/05/img38_97738.png

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

/wp-content/uploads/2012/05/img39_97739.png

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

/wp-content/uploads/2012/05/img40_97740.png

f) Define Object Type which determines the navigation target.

/wp-content/uploads/2012/05/img41_97741.png

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

/wp-content/uploads/2012/05/img42_97742.png

/wp-content/uploads/2012/05/img43_97743.png

g) Following would be the navigation path from “Custom component” to “Identification screen”.

/wp-content/uploads/2012/05/img44_97744.png

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

Sample code:-

METHOD op_topage2.
  fire_outbound_plug( iv_outbound_plug = ‘BACKTOIDENT’ ).
ENDMETHOD.

Navigation using Navigation descriptor

/wp-content/uploads/2012/05/img45_97748.png

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 .

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

Assigned Tags

      45 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hariharan Thyagarajan
      Hariharan Thyagarajan

      Nicely represented. Good work.

      Author's profile photo Former Member
      Former Member

      Great Job... 🙂

      Author's profile photo Former Member
      Former Member

      Good content

      Author's profile photo Former Member
      Former Member

      very nice explanation of navigation...

      Author's profile photo Vishal Kesar
      Vishal Kesar

      Excellent Blog Ashish!!

      It should serve as FAQ doc for all people asking questions about  different types of navigations in CRM UI.

      Author's profile photo Former Member
      Former Member

      Hey Ashish,

      Clearly understandable article.

      Extremely helpful for beginners .

      Author's profile photo Former Member
      Former Member

      Very Helpful.

      Thanks Ashish.

      Author's profile photo Former Member
      Former Member

      Nice work Ashish!!!

      Author's profile photo Former Member
      Former Member

      Thanks for this document...great content

      Author's profile photo Former Member
      Former Member
      Hi Ashish, Clear Picture about navigation...Thanks alot for such valuable Document...
      Author's profile photo Suchita Phulkar
      Suchita Phulkar

      Very nice work ashish !! Keep it up and all the Best.

      Thanks & Regards

      suchita

      Author's profile photo Mahesh Jagannath
      Mahesh Jagannath

      Thank Ashish for this very good document!!

      Regards,

      Mahesh

      Author's profile photo karthik kumar
      karthik kumar

      Very nice one to learn navigation from A-Z.. 🙂

      Thanks and Regards,

      Karthik.

      Author's profile photo Former Member
      Former Member

      Excellent 🙂

      Author's profile photo Former Member
      Former Member

      Single location for all types of navigation..  That's excellent job. Thanks for posting..

      Author's profile photo Krishnakumar Ramamoorthy
      Krishnakumar Ramamoorthy

      Great job Aashish, very well done!

      Author's profile photo Dhruvin Mehta
      Dhruvin Mehta

      Amazing is the Word!

      Exactlly what i was looking for! a Great Help in Practical Approches!

      I was just thinking it would be awsme if you also Provide how we pass data in Navigation! 😉  

      although this is one of the best Step by Step available in SDN!!

      Keep it up!! Thanks a lot again Ashish!!!

      Author's profile photo Former Member
      Former Member

      Nice blog...so resoureful Ashish 🙂 Thank U 🙂

      Author's profile photo juergen baur
      juergen baur

      Good job - thank you very much!

      br

      Jürgen

      Author's profile photo Former Member
      Former Member

      Hi,

      Its a very nice blog. Could you also post on how to bypass the existing default work center and open a new workcenter through coding.

      For eg. Work center 1 is a default work center configured for a business role xyz.

      For the same business role, as soon as the user logs in, Work center 2 should be displayed instead of Workcenter 1 based on some validations.

      How can we achieve this navigation. This is the one of the requirements in my proj.

      It would be great if you could suggest a way.

      Thanks

      DP

      Author's profile photo Shiva Ganta
      Shiva Ganta

      Very nice doc, Ashish..! I have followed the steps Navigation from view of an inner component to view of the outer component. However, I'm stuck at one point. Please see my query here (http://scn.sap.com/message/13823561). Appreciate, if somebody could help me.. TIA

      Author's profile photo Jacques Borduas
      Jacques Borduas

      Nice Ashish.  To show popup windows, is it the same way to define?

      Author's profile photo Former Member
      Former Member

      Nice document, Got many things I wanted to know about navigation. Thanks Ashish.. 🙂

      Author's profile photo Former Member
      Former Member

      Very Helpful document 🙂 .....
      Thanks Ashish....

      Author's profile photo V S BHARGAV MYLAVARAPU
      V S BHARGAV MYLAVARAPU

      Good Document.. Showing more Browser Screen Shots will hits more Likes 😉

      Author's profile photo Former Member
      Former Member

      Good Document on Navigation Concept ..

      Thank You

      Author's profile photo Former Member
      Former Member

      Excellent documentation....thanks alot- 🙂

      Author's profile photo Former Member
      Former Member

      Thanks for this documentation.

      Regards

      Sandeep

      Author's profile photo Former Member
      Former Member

      Thanks for this documentation. It helped me a lot.

      Regards

      Satish

      Author's profile photo Former Member
      Former Member

      Good explanation about navigation links.

      Author's profile photo Former Member
      Former Member

      Hi,

             Could you please explain how to create message alerts in web UI

      Author's profile photo Kumar Gaurav
      Kumar Gaurav

      Thank you very much for the document.

      Thanks

      Kumar Gaurav

      Author's profile photo Harish Kumar
      Harish Kumar

      very well explained ..

      Author's profile photo Former Member
      Former Member

      very nice.

      Author's profile photo Hermano Claro
      Hermano Claro

      Great document and well explained.

      Thanks!

      Author's profile photo Former Member
      Former Member

      Nice Doc for CRM Learners

      Author's profile photo Eric Tang
      Eric Tang

      Very detailed.. we can all reference to this at different levels .

      Author's profile photo Former Member
      Former Member

      Always useful

      Author's profile photo Former Member
      Former Member

      Great Work Ashish - Thanks a lot

      Author's profile photo Former Member
      Former Member

      Hi Ashish,

      This is a nice blog about Navigation between Components and within Components.

      However I have not understood one point, hope you can put more light on this.

      --> We can have navigation from One Component to Another Component. Also within the same Component VIEWS.But what is "navigation form view of an Outer Component to view of the Inner Component" and "Navigation from View of an Inner Component to View of the Outer Component"  ??.

      The question is being raised since COMPONENT is itself an independent identity. Then what is Inner Component and Outer Component?

      would appreciate if you can share any example on this.

      Author's profile photo Dhruvin Mehta
      Dhruvin Mehta

      hi jayant.

      It is a very important point he is making for outer and inner component as

      it means inner component is used as component usage and outer component in that scenarios concepts like delegation of outbound plug comes.

      Author's profile photo Former Member
      Former Member

      Hi Jayant ,

      As per my understanding this is how it goes ...

      The "Outer Component" here means the Embedding Component and the "Inner Component" means the Embedded Component (the component which we are using in the Embedded component ) .

      To understand it better you can check the navigation from standard component "BP_HEAD_MAIN" to "BP_HEAD_SEARCH" component .

      Hope this will be helpful . 🙂

      Thanks ,

      Vaibhav

      Author's profile photo Jayashree Desai
      Jayashree Desai

      Nice Document 🙂

      Thanks

      Author's profile photo Siva prasad Ramani
      Siva prasad Ramani

      Excellent effort Ashish. Very handy.

      Regards,

      Siva R.

      Author's profile photo Former Member
      Former Member

      Really awesome!