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:
Great write up Brad. As you know I'm really impressed with this work, I think it works great and is perfect use for the NWBC side panel.
I also like how by using the sap.m UI5 controls the content in the side panel adjusts to the width of the side panel; making columns visible etc... as the space allows. Using responsive design in the NWBC side panel - that's cool. 😀
Cheers,
Simon
Thanks Simon. Great spec 🙂 It was a cool thing to work on.
As you know this Workflow Log is used in multiple applications, therefore figuring out a way to write once and re-use was really important. This is where the UI5 Components concept came in really handy, as well as the responsive design features of the sap.m library. It was really a matter of just setting some properties in the sap.m.Column to instruct it how to react in different screen sizes and the rest just magically happens 🙂
Cheers,
Brad
Excellent blog Brad.
We've implemented a similar functionality in our customer. We're using the web dynpro CHIP on side panel to launch UI5 Workflow History application. In our case, we're using sap.suite.ui.commons.ProcessFlow to display workflow history in the graphical way.
It's good to know there is a BADI available to set the tag value. Thank you for sharing.
Regards,
Fendy
Hi Fendy, that sounds cool too. Can you share a screenshot?
Hi Simon,
I'm happy to share the screenshot upon client permission. I'm thinking to write the blog about this. Stay tuned 🙂
Regards,
Fendy
Thanks Fendy.
Sounds really interesting what you guys did. It would be really cool to see a screenshot 🙂
Is the web dynpro CHIP loading the application in an HTML5 island or some other way?
And does the UI5 application update when there are DataContext changes?
Hadn't actually seen the ProcessFlow control until now, as it doesn't have an example in SAPUI5 SDK - Demo Kit however I found a nice example here: JS Bin - Collaborative JavaScript Debugging… It looks really cool!
Cheers,
Brad
Hi Brad,
In our case, the web dynpro CHIP loads web dynpro ABAP to display the workflow overview of a Business Object (i.e.Purchase Requisition, Service Entry, Trip, etc) similar to the one displayed in GOS workflow overview. The CHIP works correctly when the DataContext changes.
When user clicks on the workflow item, The workflow history UI5 application will be launched in the new window. We choose to display in the new window to cater for all workflow scenarios. Some workflows have up to 4 level approvers and we do have multiple agents approver (i.e. Shared Service) . ProcessFlow UI caters for this scenario and it looks very cool. I like to give credit to Joanna Chan as she discovers the ProcesFlow UI on the SAPUI5 SDK.
I'm happy to share the screenshot upon client permission. I'm thinking to write the blog about this 🙂
PS: Brad, there are 3 examples on the SAPUI5 SDK about the ProcessFlow UI as shown in the following link:
SAPUI5 Explored
Cheers,
Fendy
Hi Fendy,
Sounds cool! Thanks for the link to the examples. That control looks extremely cool. You should definitely try write a blog about it 🙂
Cheers,
Brad
Very nice blog. And a super solution.
Anything you do to help your business users get transparency of their business processes deserves a big fat medal 🙂
Alan
Thanks Alan! 🙂
Hi Brad,
in my case, cl_nwbc=>context_get( ) is always empty, although I can see the context in the AppData Viewer via NWBC.
What am I missing?
I use NWBC 5 PL3 with NWBC Runtime Patch 43.
Thanks and Regards
Daniel
Have you enabled the tagging sending and reciept in the WD_global_setting?
You can do that in TC: SICF
Hi Jakob,
jeah, both are enabled.
It is working fine if I use the tag table NWBC_VC_GUI_TAG,
but not setting tags via LSAPI in the ABAP report.
Hi Daniel,
I have used this code before with success to set company code for example.
DATA: ld_tag_value TYPE string.
ld_tag_value = 1000.
cl_lsapi_manager=>get_instance( )->if_lsapi_data_context~set_tag_value(
EXPORTING name = '/BSSP/:BUKRS'
value = ld_tag_value
EXCEPTIONS OTHERS = 0 ).
Hi Jakob and @all,
the issue is solved.
Reason:
set_tag_value in NWBC 5.0 is only working with SAP GUI 740!
Hi Brad
Great blog (as always!); makes for very interesting reading!
I have a question on the GOS feature.
The GOS button is not visible by default (the application in questions here is Project and Portfolio Management). Is it rendered only when you choose the SAP GUI theme?
Or is there a specific setting to render it for certain transaction codes?
Thanks
Arijit