Creating OCA(On Click Action) in SAP CRM WebUI

By Gokul Ragunathan, Infinite Computer Solutions OCA On Click Action, displays an attribute with HYPERLINK if we implement OCA for that particular attribute. We can write logic for action to be triggered when user clicks on OCA(Hyperlinked) Attribute. In this tutorial, we will be implementing OCA for a search list attribute. When user clicks on this attribute system will takes us to detailed overview page of selected attribute in search list 1. Below image is snapshot of search list, in this we will be implementing OCA for Description attribute

2.

In order to implement OCA, we need to get Component->View->Node->Attribute details. We use F2 key to get these technical details

3.

Once if we get Technical details using F2, go to TCode BSP_WD_CMPWB. Enter component name and click display. At left panel, open Views node in tree structure, double click on view name which we got through F2 popup. This will displays details of that particular view in right panel. In right panel open context node and in turn attribute which we got through F2

4.

In our case attribute name is ACCOUNT_DESCRIPTION. We want to implement OCA for this attribute. If we want to implement OCA we need to change field property in GET_P_ method of that particular attribute. So right click on STRUCT.ACCOUNT_DESCRIPTION and choose generate Getter_P method. This will generate GET_P(Property method) method and once if its generated, it will resemble like

5.

Double click on GET_P_ACCOUNT_DESCRIPTION method and implement the following code

CASE iv_property. WHEN if_bsp_wd_model_setter_getter=>fp_fieldtype. rv_value = cl_bsp_dlc_view_descriptor=>field_type_event_link. WHEN if_bsp_wd_model_setter_getter=>fp_onclick. rv_value = 'LINKCLICK'. ENDCASE. Code in Yellow is used to change field property of attribute to OCA/Hyperlink Code in Green is used to create an Event which has to be triggered when user clicks on this hyper link FYI, here we ONLY GIVE EVENT NAME, we have to create an event separately with the same name(LINKCLICK) and write logic there. Once these code is added, we can Save->Check->Activate this method and press F3 to get back to Component Workbench

Click here to continue... 6. Now we want to create an Event named LINKCLICK, because we have given this as the event to be triggered when user click on OCA. In Event handler node of component workbench, right click and click Create, in the following popup give event name as LINKCLICK

7.

While generating events, system automatically prefixes our event name with EH_ON. So our event name will be EH_ONLINKCLICK

8.

Now double click on event EH_ONLINKCLICK and implement the following code

In this scenario, I fire a plug and navigate to detailed overview window to display complete details about selected record. So I call a method, which fires outbound plug and navigates to next view FYI, for sake of simplicity I use this navigation for OCA implementation, but we can implement any action for OCA like giving a popup, deleting/editing record in list etc 9. I already have an Outbound plug created and linked with destination view, Just for your information take a look at Outbound plug related stuffs. Here also we just need to give plug name. Here my plug name is OVERVIEWPAGE1, OP_TO_ will be prefixed automatically while generating plug event

10. Double click on this outbound plug and create implement following code

Here outbound_plug (TO_OVERVIEWPAGE1) is name of the navigation link which is created in Runtime Repository and has details about destination view. Save->Check->Activate this and press F3 to get back to Component workbench 11. I have already created navigation link for this purpose in Runtime Repository. In short, navigation link has details about source and destination views and name of plug which get fired and initiates navigation from source view to destination view. In Runtime Repository my navigation link TO_OVERVIEWPAGE1 will looks like

Always the changes made to Runtime Repository should be saved, if notour changes will be discarded 12. Now we can test our component. Description attribute in search list will be displayed with hyperlinks as shown in below figure

13. If we click on Hyperlink, it will navigate to overview page by firing outbound plug and this is the Action intended for this OCA. I Click on 2 nd record (Alex Sterling, Chicago, USA) from search list of search view and It will navigate to Overview page and displays details of selected record as shown below.

Note: As I mentioned earlier, any action can be implemented for OCA. Not just Navigation, any action depending on requirement can be implemented