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:

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:

001.PNG

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.

002.PNG

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:

003.PNG

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_lporinstid.

* 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

004.PNG

Wider view:

005.PNG

006.PNG

007.PNG

To report this post you need to login first.

16 Comments

You must be Logged on to comment or reply to a post.

  1. Simon Kemp

    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

    (0) 
    1. Brad Pokroy Post author

      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

      (0) 
  2. Fendy Wongso

    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

    (0) 
      1. Fendy Wongso

        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

        (0) 
    1. Brad Pokroy Post author

      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

      (0) 
      1. Fendy Wongso

        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

        (0) 
        1. Brad Pokroy Post author

          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

          (0) 
  3. Alan Rickayzen

    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

    (0) 
  4. Daniel Klein

    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

    (0) 
      1. Daniel Klein

        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.

        (0) 
        1. Jakob Marius KjĂŚr

          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 ).

          (0) 
  5. Arijit Das

    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

    (0) 

Leave a Reply