SAP CRM WEB UI

Vijay BhaskarRaju [email protected]

Creating an OVP (Overview Page) with Assignment Blocks, displaying table data based on input given.

By Vijay Bhaskar Raju,

OVERVIEWPAGE (OVP)

An overview page displays all the information related to one SAP CRM business Object instance; for

example one sales order, one service ticket, one service campaign.ovps are scrollable as this is the

format that internet users are familiar with. The most important information is shown in the first

assignment block. The other blocks contain what is often called dependent data.

Prerequisite: Need the basic knowledge of SAP CRM.

At the end, you will be able to do:

Creation of Custom WEB UI Component, Creation of OVP and Assigning Views to OVP, fetching the table data based on the input given. Creation of two Context Nodes and using it in the same OVP.

Step 1. Creation of WEB UI Component: Use transaction BSP_WD_CMPWB

Enter component name (e.g. ZOVP) in field component and click on create.

Enter the description and window name (e.g. Main Window) and click on continue. Choose a package and click on continue and provide workbench request. Your component will looks as given below.


Step 2: In order to available all the related BOL entities,

Go to->Runtime Repository->Edit Mode->Models->Right Click on Model->Add Model->Continue-

>Save. Your component will looks as given below.

Note: Come out of the component and again give the component name and click on display. Now you

can see the BOL model browser.

Step 3: Now start creating Views.

Go to->Component Structure Browser->Views->Right Click On View->Create


After clicking on complete button save it in a Package.Your component will looks as given below.


Step 4:Create another view which is of type Form View.



Step 5:Similarly like step 3 create another view which is of type table view.Your component will looks as

given below.


Step 6:Similarly like step 3 create another view which is of type table view.Your component will looks as

given below.

Step 7:Create a View which is of type Form View in which you are creating Value Node.


a) Create a context node in BPNUMBER in order to create binding with custom controller. Follow the

Screen shots.


Step 8: Now start creating an overview Page.


Save it in a package.


Now Go To->Runtime Repository->Edit Mode->View Sets->View Set(for E.g. ZOVP/OVERVIEWPAGE)-

>View Area( for E.g.OVERVIEWPAGE)->Right Click on View Area.

Click On Add View->Continue

Similarly add all other views to Overview Page. After adding your component will look like below screen

shot.


Step 9: Now add the overview page view in the window.


Save it.

Step 10:Create 2 context nodes in Component Controller similar to Step 7(a).After creating your screen

will look like this.


Step 11:Create a Custom Controller with 2 context nodes.


After creating your screen will look like this.


Step 12: Creating a binding between the Context Nodes of Custom Controller and Context Nodes of

Component Controller as shown below.


Similarly create binding between context node (PARTNER1) of Custom Controller and context node

(PARTNER1) of Component Controller as shown below.


Step 13:Create binding between the Views and the Custom Controller as shown below.

VIEWNAME-ZOVP/ADDRESS

CONTEXT NODE - HEADER

CONTROLLER TYPE-CUSTOM CONTROLLER

CUSTOM CONTROLLER- HEADER.do

TGT CONTEXT NODE- PARTNER


Similarly Create Binding between Context Nodes of Views and Context Nodes of Custom Controller as

shown below.

VIEWNAME-ZOVP/BPNUMBER

CONTEXT NODE - HEADER1



TGT CONTEXT NODE- PARTNER1

VIEWNAME-ZOVP/DETAILS

CONTEXT NODE - DETAILS



TGT CONTEXT NODE- PARTNER

VIEWNAME-ZOVP/ROLES






VIEWNAME-ZOVP/TAXNO





Step 14: Now In the Views, add the required fields in the UI Configuration Tool in order to display the

fields in the WEB UI as shown below.

a) ZOVP/ADDRESS –> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN A

CUSTOMIZING REQUEST.

Now add the required fields from Available fields to the Displayed fieldsand save it as shown below.

NOTE: SAVE IT.


Similarly do it for all the other views.

b)ZOVP/BPNUMBER –> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN A

CUSTOMIZING REQUEST. Now add the required fields from Available fields to the Displayed

fieldsand save it as shown below. Similar to the step14 (a).

Click on ‘Show Field Properties’ make necessary changes as shown in the below screen.

NOTE: SAVE IT.

c)ZOVP/ROLES –> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN A CUSTOMIZING

REQUEST. Now add the required fields from Available fields to the Displayed fieldsand save it as

shown below. Similar to the step 14(a).

NOTE: SAVE IT.


d)ZOVP/TAXNO–> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN A CUSTOMIZING

REQUEST. Now add the required fields from Available fields to the Displayed fieldsand save it as

shown below. Similar to the step 14(a).

NOTE: SAVE IT.

e) VIEW->ZOVP/DETAILS –> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN A

CUSTOMIZING REQUEST->CLICK ON SHOW AVAILABLE FIELDS.

Now your screen will look like this.


Add the required fields by selecting and click on Add field (+) and save it. Now your screen will look like

this.

NOTE: SAVE IT.

f) VIEW->ZOVP/OVERVIEWPAGE –> CONFIGURATION TAB->CLICK ON EDIT BUTTON->SAVE IT IN

A CUSTOMIZING REQUEST.CLCIK ON CONTINUE BUTTON.

CLCIK ON CONTINUE BUTTON

ADD ALL THE FIELDS FROM AVAILABLE ASSIGNMENT BLOCKS TO DISPLAYEDASSIGNMENT

BLOCKS AND SAVE IT.


Step 15:Go to Component Controller->DO_INIT_CONTEXT->->Right Click->Redefine.

Copy and paste below code in the method DO_INIT_CONTEXT.

DATA: LR_QUERY TYPE REF TO CL_CRM_BOL_QUERY_SERVICE,

LR_RESULT TYPE REF TO IF_BOL_ENTITY_COL.

LR_QUERY ?= CL_CRM_BOL_QUERY_SERVICE=>GET_INSTANCE( 'BuilHeaderSearch' ).

LR_QUERY->SET_PROPERTY( IV_ATTR_NAME = 'PARTNER' IV_VALUE = 3176 ).

LR_RESULT = LR_QUERY->GET_QUERY_RESULT( ).

ME->TYPED_CONTEXT->partner->COLLECTION_WRAPPER-

>SET_COLLECTION( LR_RESULT ).

NOTE: SAVE IT AND ACTIVATE IT.


Step 16: Now go to ZOVP/BPNUMBER view and create a search button as shown below.

CLICK ON OK BUTTON.

Double click on EH_ONSEARCH->Click on Edit Mode->Paste the below code.

DATA: LV_BP_NUMBER TYPE BU_PARTNER,

LR_ENTITY TYPE REF TO CL_BSP_WD_VALUE_NODE,

LR_RESULT TYPE REF TO IF_BOL_ENTITY_COL.

LR_ENTITY ?= me->typed_context->bpnumber->collection_wrapper->get_current( ).

LR_ENTITY->GET_PROPERTY_AS_VALUE( EXPORTING IV_ATTR_NAME = 'BPNUMBER'

IMPORTING EV_RESULT = LV_BP_NUMBER ).

DATA: LR_QUERY TYPE REF TO CL_CRM_BOL_QUERY_SERVICE.

LR_QUERY ?= CL_CRM_BOL_QUERY_SERVICE=>GET_INSTANCE( 'BuilHeaderSearch' ).

LR_QUERY->SET_PROPERTY( IV_ATTR_NAME = 'PARTNER' IV_VALUE = LV_BP_NUMBER ).

LR_RESULT = LR_QUERY->GET_QUERY_RESULT( ).

ME->TYPED_CONTEXT->HEADER->COLLECTION_WRAPPER->SET_COLLECTION( LR_RESULT ).



Now go to->view layout->BPNUMBER.htm

Doubleclickonit->Edit mode->copy and paste below code.

<thtmlb:grid cellSpacing = "1"

columnSize = "2"

height = "100%"

rowSize = "1"

width = "100%" >

<thtmlb:gridCell colSpan = "1"

columnIndex = "1"

rowIndex = "1"

rowSpan = "1" >

<chtmlb:config mode = "RUNTIME"

xml = "<%= controller->configuration_descr-

>get_config_data( ) %>" />

</thtmlb:gridCell>

<thtmlb:gridCell colSpan = "1"

columnIndex = "2"

rowIndex = "1"

rowSpan = "1" >

<thtmlb:button text="SEARCH"

id="SEARCH"

onClick="SEARCH"/>

</thtmlb:gridCell>

</thtmlb:grid>


Step 16: To Test the scenario click on Test Application (F8).There you can see the Overview Page with

Assignment Blocks. First two Assignment blocks data is displayed automatically as we had written the

code in the DO_INIT_CONTEXT.

And the other Assignment blocks data is displayed based on input given in the BPNUMBER.This is

because we have Binded first two Assignment Blocks with Context Node (PARTNER) and the other

Assignment Blocks with Context Node (PARTNER1).


Now your screen will look like this in the WEBUI.

Enter any Business Partner Number .After entering click on search button you can see the roles and Tax

no for that particular Business Partner.

NOTE: F2 -Technical Details of the field in the WEBUI.

SAP CRM WEB UI

Documents

Transcript of SAP CRM WEB UI