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.
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.
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.
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.
After clicking on complete button save it in a Package.Your component will looks as given below.
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 CONTROLLERHEADER.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
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
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.
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 ). NOTE: SAVE IT AND ACTIVATE IT.
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).
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.
