UI5 Workflow Log Side Panel in NWBC

In this blog I am going to show the code required to communicate between a SAP UI5 application and the NWBC DataContext and automatically updating the UI5 application when the Data Context changes. Thanks to Simon Kemp for pointing me in the right direction with this and the idea of turning this into a blog and John Moy for your blog on Context sensitive help in NWBC using side panels, it was really helpful.

In this specific use case the UI5 application displays any workflow logs linked to the Business Object Type and Object Key. The Business Object Type is available as a standard tag, however the Object Key was not, and was not available anywhere on the screen, therefore the GUI Property customising could not be used, and the LSAPI was required to write the Object Key to a custom ZOBJKEY tag.

Step 1 – Making the Data available in the DataContext API

NWBC uses the DataContext API in order to make data from the current NWBC session available to the Side Panel. See the SAP Help on the DataContext API for more details: Implementation of a Side Panel Application with HTML and JavaScript – SAP NetWeaver Business Client – SAP Library

SAP makes certain tags available for use without you needing to do anything, however if you require additional values to be available in the DataContext API you can do 1 of the following:

• Use the GUI Property collector to find the screen technical property value and add an entry to a customising table which will then make the value available via the Data Context. This can only be used for values which are available on the screen. I am not going to go into how to do that here. If thats what you are looking to do I recommend reading one of the following blogs: NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB or Side panel for SAP Business Suite (2) – Adapting SAP’s Side Panel content and creating new content

• Use the LSAPI to programmatically set the value in the DataContext. This can be done in ABAP code, most likely in a BAdI/ User exit if it is a SAP standard transaction or where ever you choose. This is the option I have used in this case. See more about this in the SAP Help – 6.7.7 Passing Data to Side Panel Application Using API – SAP NetWeaver Business Client – SAP Library

To see the data available in the DataContext hold down the control key and go to Help—>Tools—>Side Panel—>Data Context AppData Viewer as shown below:

This will show you all standard tags and values available in the CANVAS_appData context. Note that ZOBJKEY is not standard and has been added using the LSAPI via a BAdI.

Due to the fact that in this use case, the workflow log was applicable for any transaction which had GOS (Generic Object Services). Which meant that the BAdI GOS_SRV_SELECT was an appropriate place to put the code to write the Object Key to the DataContext, as in this BAdI the Object Key was available there.

The following code writes the Object Key to the DataContext in the NWBC Client:

METHOD if_ex_gos_srv_select~select_services.

   DATA: lo_lsapi TYPE REF TO if_lsapi.

   DATA: lv_tag_value TYPE string.

* Get an instance of LSAPI

   lo_lsapi = cl_lsapi_manager=>get_instance( ).

* Copy the Object Key into the Tag value

   lv_tag_value = is_lpor–instid.

* Check that the DataContext is supported via this client. As it only works for NWBC Client and not SAP GUI or NWBC for HTML

   IF lo_lsapi->is_supported( 0 ) EQ abap_true AND cl_nwbc=>context_get( )-nwbc_shell = cl_nwbc=>for_desktop.

* Set the tag ZOBJKEY in the DataContext with the Object Key   

     lo_lsapi->if_lsapi_data_context~set_tag_value( name  = ‘ZOBJKEY’

                                                    value = lv_tag_value  ).

   ENDIF.

ENDMETHOD.

Step 2 – Accessing the DataContext from the UI5 application

You want to automatically update the UI5 application the first time the Side Panel is loaded and everytime there is a change to the DataContext.

In order to do this you need to create a custom event handler function which can be called onChangedwithXML and then you will need to subscribe to the DataContext changedWithXML event setting the custom event handler.

See the event handler code below:

//event handler for event forwarding – done by NWBC

OnChangedWithXML: function(evtObject){

              //Get the Object Type and Object Key from the DataContext API

              var sObjType = window.external.DataContext.read(“/BSSP/:BORTYPE”, “CANVAS_appData”, null);

              var sObjKey = window.external.DataContext.read(“ZOBJKEY”, “CANVAS_appData”, null);

              // Load the workflow logs for Object Type and Key

              this.oWorkflowLogComp.loadObjTypeKey(sObjType, sObjKey);

}

Then you will use the epcm object which will be available from the NWBC Client to subscribe to the changedWithXML event setting the custom handler.

// Check that the Data Context API is available, and if it is register it to listen for “changedWithXML” event, which is triggered

// Initially when the Side Panel is loaded and everytime the Data Context is changed

if (window.external.DataContext != undefined){

    window.external.epcm.subscribeEventReliable(“com.sap.lsapi.dataContext”, “changedWithXML”, this, “OnChangedWithXML”);

}

Step 3 – Add the UI5 Application as a Side Panel

I’m not going to go into that here, as many other blogs cover that including one of my previous blogs: Real-time notifications and workflow using ABAP Push Channels (websockets) Part 5: Using the UI5 or Web Dynpro applications in Side Panels

Step 4 – Load the transaction with the Side Panel and expand it

Wider view: