Navigation in SAP CRM Web UI : Using Main Componentcreated by Arvind Pande on May 30, 2012 6:54 AM, last modified by Arvind Pande on May 30, 2012 9:09 AM Version 2

 

Navigation is one of the key features for the applications being developd using SAP CRM Webclient UI. There are numerous ways through which navigation can be performed in SAP CRM Web UI. Here is a list of possible scenarios where View to View navigation can be required:

1. View to View Navigation (within the same Workbench Component).

2. View to View Navigation (between two components)

 

View to View Navigation within same Workbench Component (Point 1 above) is comparatively straight forward and can be achieved using the NAVIGATE method.

I would not be discussing on point 1 in this document.

 

As far as Point 2 above is concerned, this kind of navigation can be achieved in many ways. What I would be discussing (in detail) in this document is the View to View Navigation between two Workbench Components using Main Component.

 

Navigation through Main Component is very commonly used while navigating from the Search View to the Overview Page of the most of the Objects like, Sales Order, Quotations, Account, Product, etc.

 

The below diagram summarizes the whole concept of View to View Navigation using the Main Component approach. 

 

                            

Lets discuss this in details now.

 

As the above diagram clearly suggests, this approach would required three different Workbench Components.

1. Component 1 : This would be the source component.

2. Component 2 : This would be the target component.

3. Main Component : This would be the component using which the navigation would be achieved.

 

Now lets go into the system and see how this can be achieved step by step.

 

Please note : I have used very generic custom components in the example below. You can use it as it is in any SAP CRM System and start working.

 

STEP 1

Create Component 1 with name : ZCOMPONENT1 and create a simple view in the Component called : ZNAVIGATEFROM

                                

STEP 2

Add a button in the above view. This can be done by adding the below code in the .HTM page of this view:

<%@page language="abap" %><%@extension name="thtmlb" prefix="thtmlb" %><%@extension name="chtmlb" prefix="chtmlb" %><%@extension name="bsp" prefix="bsp" %><thtmlb:button id      = "BTN_EXECUTE"                onClick = "EXECUTE1"                text    = "Execute Main Component Navigation"                tooltip = "EXECUTE_VIEW_TO_VIEW" />

 

STEP 3

Create an Event Handler in the view with name : EH_ONEXECUTE1 followed by an Outbound Plug named : OP_TO_VIEW2

From the Event Handler above call the Outbound Plug. This can be achieved by adding the below code in the Event Handler:

METHOD eh_onexecute1.   op_to_view2( ).ENDMETHOD.

 

STEP 4

From the Outbound Plug call the Outbound Plug of the Window (in the same Component). Please note that the Windows Outbound Plug is not yet created. We will do that in the subsequent steps.

 

METHOD op_to_view2.   DATA : lr_window TYPE REF TO cl_bsp_wd_window.

   lr_window ?= me->view_manager->get_window_controller( ).   lr_window->call_outbound_plug('TO_VIEW2').ENDMETHOD.

 

STEP 5

In the Main Window of the View add an Outbound Plug with name : OP_TO_VIEW2. Leave this Outbound Plug as it is for the time being. We will discuss about the a little later.

 

Now before proceeding with the creation of next component, lets complete the steps in the runtime repository of the existing component.

 

 

STEP 6

In the Runtime Repository of the existing component (ZCOMPONENT1), add the View to the Window and also include the Windows Outbound Plug. Also create a Component Interface for this component and expose the Main Window to outside world so that we can create a Component Usage for this component in the Main Component.

 

                                                             

 

Now lets create the target component

STEP 7

Create Component 2 with name : ZCOMPONENT2 and create a simple view in the Component called : ZNAVIGATETO

                             

  

 

STEP 8

In the .HTM page of this view, just simply add a text saying "Navigation Successful". After we perform the Navigation by clicking on the Button we created in the first few we and see this text message in the view we can be sure that Navigation is Successful.

 

STEP 9

Create an Inbound Plug in the view created above called : IP_FROMVIEW1. This Inbound Plug is just for dummy purpose and no code is required to be added in this.

 

STEP 10

In the Main Window of this Component create another dummy Inbound Plug with name : IP_FROMVIEW1.

 

Now before proceeding with the creation of Main Component, lets complete the steps in the Runtime Repository of the existing component.

 

STEP 11

In the Runtime Repository of the existing component (ZCOMPONENT2), add the View to the Window and also include the Windows Inbound Plug. Also create a Component Interface for this component and expose the Main Window to outside world so that we can create a Component Usage for this component in the Main Component.

 

                                                           

 

Now having created the Source and the Target View, lets now proceed with creating the Main Component which would integrate both the above components and make the navigation successful.

 

STEP 12

Create Main Component with name : ZCOMPONENT_MAIN. There is no need to create any view in this component.

 

STEP 13

In the Main Window of this Component create an Outbound Plug and add the following code in that :

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

                               outbound_plug = 'FROM_VIEW1_TO_VIEW2' ).ENDMETHOD.

 

The code added above is calling a Navigation Link (which we would be creating in the subsequent steps)

 

Now if you recollect, in STEP 5 we had created an Outbound Plug in the Main Window of Component : ZCOMPONENT1. Add the below code in that Outbound Plug:

METHOD op_to_view2.   fire_outbound_plug( iv_outbound_plug = 'TO_VIEW2' ).ENDMETHOD.

 

This code will call the Outbound Plug of the Main Window of the Main Component. We had created this Outbound Plug in STEP 13 above.

 

Now lets get into the Runtime Repository of the Main Component and perform the below steps :

STEP 14

In the Runtime Repository of the Main Component create two Component Usages and shown below. These component usages would be for the source and the target components which we had created in the above steps:

Usage for Source Component :

Usage for the Target Component

 

 

Now, if you see in the Component Usage for View 1 above you will find that the Outbound Plug in the Main Window of Component ZCOMPONENT1 (Source Component) is delegated to this Outbound Plug of the Main Window of the Main Component (ZCOMPONENT_MAIN)

 

This delegation takes care of calling the Outbound Plug(Main Window) of the the Main Component from the Outbound Plug (Main Window) of the Source Component. This was discussed in STEP 13 above.

 

STEP 15

In the Runtime Repository of the Main Component add the entries in the Windows Node as shown below :

 

STEP 16

Now in the Runtime Repository create a Navigation Link as shown below :

 

This is the same Navigation Link which was executed using the NAVIGATE method in STEP 13 above.

 

Note that while creating the Navigation Link, in the "Source" you will have to add the Main Window of the Main Component and not the Source Component. This is because we have already delegated the Outbound Plug of the Source Component to the Outbound Plug Main Component in STEP 14 above.

 

In the "Target" of the Navigation we can simply add the Component Usage of View 2 we had created in STEP 14

 

Now after executing all the 16 Steps above we are done will all the developments and configurations required to achieve this navigation. We can test the navigation now.

 

To test this Navigation, simply execute/test the Main Component and the click on the button displayed in the view. The text entered in the  View 2 would be displayed

text entered in the  View 2 would be displayed..

 

Thanks,

Arvind