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 skemp for pointing me in the right direction with this and the idea of turning this into a blog and john.moy3 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 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:
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 ...
Step 4 - Load the transaction with the Side Panel and expand it
Wider view:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
7 | |
5 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 |