Vijay BhaskarRaju Vijay.vegesana@gmail.

com

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.

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

Vijay BhaskarRaju [email protected]

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

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

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

Step 8: Now start creating an overview Page.

Vijay BhaskarRaju [email protected]

Save it in a package.

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

Save it. Step 10:Create 2 context nodes in Component Controller similar to Step 7(a).After creating your screen will look like this.

Vijay BhaskarRaju [email protected]

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

Vijay BhaskarRaju [email protected]

Vijay BhaskarRaju [email protected]

After creating your screen will look like this.

Vijay BhaskarRaju [email protected]

Step 12: Creating a binding between the Context Nodes of Custom Controller and Context Nodes of Component Controller as shown below.

Vijay BhaskarRaju [email protected]

Similarly create binding between context node (PARTNER1) of Custom Controller and context node (PARTNER1) of Component Controller as shown below.

Vijay BhaskarRaju [email protected]

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 CONTROLLERHEADER.do

TGT CONTEXT NODE- PARTNER

Vijay BhaskarRaju [email protected]

Similarly Create Binding between Context Nodes of Views and Context Nodes of Custom Controller as shown below. VIEWNAME-ZOVP/BPNUMBER CONTEXT NODE HEADER1

CONTROLLER TYPE-CUSTOM CONTROLLER CUSTOM CONTROLLERHEADER.do

TGT CONTEXT NODE- PARTNER1 VIEWNAME-ZOVP/DETAILS CONTEXT NODE DETAILS

CONTROLLER TYPE-CUSTOM CONTROLLER CUSTOM CONTROLLERHEADER.do

TGT CONTEXT NODE- PARTNER VIEWNAME-ZOVP/ROLES CONTEXT NODE HEADER1

CONTROLLER TYPE-CUSTOM CONTROLLER CUSTOM CONTROLLERHEADER.do

Vijay BhaskarRaju [email protected]

TGT CONTEXT NODE- PARTNER1 VIEWNAME-ZOVP/TAXNO CONTEXT NODE HEADER1

CONTROLLER TYPE-CUSTOM CONTROLLER CUSTOM CONTROLLERHEADER.do

TGT CONTEXT NODE- PARTNER1 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.

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

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.

Vijay BhaskarRaju [email protected]

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 ). NOTE: SAVE IT AND ACTIVATE IT.

Vijay BhaskarRaju [email protected]

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> NOTE: SAVE IT AND ACTIVATE IT. 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).

Vijay BhaskarRaju [email protected]

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.