Creation of WEB UI Component and navigation with standard component

By Narendra Goyal, L&T Infotech

Introduction: This document provides the step by step procedure of creating Custom WEB UI Component and navigation of custom component with standard one and vice-versa.

Prerequisite: Need the basic knowledge SAP CRM.

At the end, you will be able to do:

Creation of Custom WEB UI Component   --    BOL Programming

Creation of view – Table view and Empty view    --     Creation of Windows

Navigation between views and windows    --     Creation of link

Component Controller    --    Custom Controller

Assigning custom component to standard component    -- Assigning standard component to custom component

Step 1. Creation of WEB UI Component.

Go to SAP IMG à Customer Relationship Management à UI Framework à UI Framework Definition à Access BSP Component Workbench or transaction BSP_WD_CMPWB

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

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

Step 2. Creation of view.

In the component structure browser, right click on view and choose create. A wizard will be displayed. Enter the following data in wizard.

Name – view name (e.g. PARTNERLINK)

View Type – Empty View

Do not change on following screens and finish the wizard.

Similarly, create another view to display the data with the following data in wizard.

Name – view name (e.g. PARTNER)

Model Node – model node name (e.g. PARTNER)          BOL Entity – BuilHeader

Model Attribute – Select all by clicking on

View Type – Table View

Check the checkbox for configurable (For selecting displayed fields from available fields) and click on complete to finish the wizard.

Step 3. Creation of Window.

In the component structure browser, right click on window and choose create. A wizard will be displayed. Enter the window name (e.g. LINK). Do not change on the following screen and finish the wizard.

Step 4. Maintain link in PARTNERLINK view

Double click on PARTNERLINK view. In right hand side, double click on partnerlink.htm to maintain the link. For this write the given code.

<%@extension name="htmlb" prefix="htmlb" %>
link id = 'Select'
text = 'My Accounts'
onClick = 'ONCLICK' />

Step 5. Creation of outbound and inbound plug.

Double click on PARTNERLINK view and in right hand side, right click on outbound plug and choose create. Give outbound plug name (e.g. TOLIST)

Double click on OP_TOLIST method to implement.

method OP_TOLIST.
DATA: lr_window   TYPE REF TO cl_bsp_wd_window.
      lr_window = me->view_manager->get_window_controller( ).
      lr_window->call_outbound_plug( iv_outbound_plug   = 

Click here to continue...

Please send us your feedback/suggestions at webmaster@SAPTechnical.COM 

HomeContribute About Us Privacy Terms Of Use • Disclaimer • SafeCompanies: Advertise on SAPTechnical.COM | Post JobContact Us  

Graphic Design by Round the Bend Wizards

footer image footer image