This blog post is about integrating a customer-specific component into a standard SAP Web UI Application in S4. The UI component BT112H_SC is taken as an example (Service Contract). However, the steps described here can also be used for all other UI components.
⚠️ This blog post does not cover the creation process of a custom component via BSP_WD_CMPWB_NEW.
Which component needs to be adjusted
The first question to be asked is the name of the component in which we want to integrate the custom component. To find out, you can simply press F2 in the Web UI application. This displays the technical data.
Enhance the component
Open the component with the transaction BSP_WD_CMPWB_NEW. The component can be enhanced using the Enhance Component button.
💡 If the component is already enhanced the button will change to Delete Component Enhancement. In this case, this step can be skipped.
Press the Enhance Component button, select the Enhancement Set and define a bsp application name.
💡 It is recommended to simply put a Z in front of the standard application name.
The generation then starts. Simply click on “Yes” or the green tick box a few times. After specifying the package, the enhancement is created.
Define a component usage
Next we can define the component usage.
- Switch to the Runtime Repository Editor
- Enter the edit mode
- Right Click ComponentUsages
- Click Add Component Usage
A component usage consists of a name and the specification of the component aswell as the corresponding interface view.
💡 The naming for the ID is ZCU and then a descriptive description.
Save the changes!
Add the view to the OVViewSet
After the component usage is created, we still need to add the view to the OVViewSet of the component.
- Switch to the Runtime Repository Editor
- Enter the edit mode
- Expand the ViewSets
- Expand the Component/OVViewSet
- Right lick on ViewArea OverviewPage
- Click Add View
Select the corresponding view.
Save the changes!
Activate the Configuration Mode
💡 If you already have the option to configure pages in the Web UI, you can skip this step!
Navigate to the My Dashboard application.
Search for the card General Settings and press the Personalize Settings Link.
Go to the Section Configuration Mode and tick the Enable configuration mode checkbox and save the settings.
Configure the Page
Finally, we can use the Configure Page button in the Web UI to configure the page and add our custom component to the default displayed assignment blocks.
- Select the view of the custom component
- Move the view to the displayed assignment blocks
- Choose the load option
- Enter a description for your view
- Save and Close
That’s it. The custom component get’s displayed. But we still have a problem. We can’t access the context we are in.
Access the context (data)
Before we can bind the relevant context node to our custom component, we must identifiy the necessary model. The UI component BT112H_SC has various context nodes that can be viewed in the Component Controller.
All these context nodes are based on the ONEORDER model, which can be viewed in the runtime repository editor.
Add the model
In order to bind the relevant context node in our custom component, we first have to add the model to our custom component.
- Switch to the Runtime Repository Editor
- Enter the edit mode
- Right click on Models
- Click Add Model
- Enter ONEORDER
Save the changes!
Create the context node
Next we can create the context node in our custom Component Controller
- Select the Component Controller
- Right click on Context Nodes
- Click Create
The Wizard Add a New Context Node to a Context opens.
- Press Continue
- Enter a Name for the context node (BTADMINH)
- Select the corresponding BOL Entity (BTAdminH)
- Press Continue
- Skip the other steps and press Complete
Bind the context node
To pass the context node binding from the component (BT112H_SC) to our custom component we have to redefine the method WD_USAGE_INITIALIZE of the BT112H_SC Component Controller. If the Component Controller is greyed out, it must be first enhanced.
- Right click the Component Controller
- Click Enhance
The generation then starts. Simply click on “Yes” or the green tick box a few times. Specify the package aswell as the transport.
Next redefine the method WD_USAGE_INITIALIZE
- Double click the Component Controller
- Right click on
WD_USAGE_INITIALIZE - Press Redefine
METHOD wd_usage_initialize. CASE iv_usage->usage_name. WHEN 'YourComponentUsageName'. iv_usage->bind_context_node( iv_controller_type = cl_bsp_wd_controller=>co_type_component iv_target_node_name = 'BTADMINH' " name of component controller node iv_node_2_bind = 'BTADMINH' ). " name of usage interface node WHEN OTHERS. CALL METHOD super->wd_usage_initialize EXPORTING iv_usage = iv_usage. ENDCASE. ENDMETHOD.
Access the data in a view
To access the data of the BTADMINH context node in a view create the following methods in your view implementation class.
| Parameter | Type | Typing Method | Associated Type |
|---|---|---|---|
| RR_ENTITY | Returning | Type Ref To | IF_BOL_BO_PROPERTY_ACCESS |
METHOD get_btadminh_ent. *--- Get your component controller DATA(lo_coco) = CAST zl_customcomponent_bspwdcomponen_impl( comp_controller ). "change CAST accordingly *--- Access the btadminh node DATA(lo_node) = lo_coco->typed_context->btadminh. *--- Read the btadminh entity rr_entity = lo_node->collection_wrapper->get_current( ). ENDMETHOD.
| Parameter | Type | Typing Method | Associated Type |
|---|---|---|---|
| RS_ATTR | Returning | Type | CRMST_ADMINH_BTIL |
METHOD get_btadminh_attr. *--- Load btadminh entity DATA(lo_ent) = me->get_btadminh_ent( ). *--- if entity is bound read the properties IF lo_ent IS BOUND. lo_ent->get_properties( IMPORTING es_attributes = rs_attr ). ENDIF. ENDMETHOD.