Real-time notifications and workflow using ABAP Push Channels (websockets) Part 4: Creating a Web Dynpro ABAP Application for receiving notifications

This is Part 4 of the below series of blogs:

• Real-time notifications and workflow using ABAP Push Channels (websockets) Part 1: Creating the APC and AMC
• Real-time notifications and workflow using ABAP Push Channels (websockets)  Part 2: Broadcasting the message via Workitem exits
• Real-time notifications and workflow using ABAP Push Channels (websockets)  Part 3: Creating a UI5 Application for receiving notifications
• Real-time notifications and workflow using ABAP Push Channels (websockets)  Part 4: Creating a Web Dynpro ABAP Application for receiving notifications
• Real-time notifications and workflow using ABAP Push Channels (websockets) Part 5: Using the UI5 or Web Dynpro applications in Side Panels

Now we are going to create a similar application to what we did in Part 3, however this time we are going to use APC (websockets) in a Web Dynpro ABAP application. We do this using a fairly new feature called HTML Islands.

Create a new Web Dynpro ABAP component called ZWDC_WF_INBOX_MINI

In the Component Controller create a new Node

Enter the following:
Node Name: WORKITEMS
Dictionary structure: SWR_WIHDR
Cardinality: 0..n
Init. Lead Selection: No

Then press the Add Attributes from Structure button

Select the WI_TEXT, WI_CD and WI_CT attributes and press the green tick

Create a new method GET_USER_WORKITEMS is the Component Controller and put the following code in it:

METHOD get_user_workitems .
      DATA: lo_nd_workitems TYPE REF TO if_wd_context_node.

      DATA: lt_workitems TYPE wd_this->elements_workitems.

      lo_nd_workitems = wd_context->get_child_node( name = wd_this->wdctx_workitems ).

      CALL FUNCTION ‘SAP_WAPI_CREATE_WORKLIST’
           TABLES
                worklist = lt_workitems.

      SORT lt_workitems BY wi_id DESCENDING.

      lo_nd_workitems->bind_table( new_items = lt_workitems set_initial_elements = abap_true ).

ENDMETHOD.

Then add the following code to the WDDOINIT Method:

METHOD wddoinit .
      wd_this->get_user_workitems( ).
ENDMETHOD.

In the V_MAIN View, go to Context and map WORKITEMS to CONTEXT by dragging and dropping it from the right side to the left side.

Go into Layout tab and start by changing the ROOTUIELEMENTCONTAINER Layout to a RowLayout:

Right click on ROOTUIELEMENTCONTAINER and click Insert Element.

Enter the following:
ID: WS_HTML_ISLAND
Typ: HtmlIsland

Select WS_HTML_ISLAND and change the height and width to 0px as we do not want this HTML Island to be visible.

Now right click on WS_HTML_ISLAND and click on Insert Event.

Give the Event a name ON_MESSAGE and the press the Create button next to onAction to Create an event handler.

Enter the Action name as ON_MESSAGE and make sure to tick Transfer UI Event Parameters, then press the green tick.

Double click on the ON_MESSAGE action created to forward navigate into the method. Then paste in the code below

METHOD onactionon_mesage .
      DATA: lo_api_controller     TYPE REF TO if_wd_controller.

      lo_api_controller ?= wd_this->wd_get_api( ).

*   report message
      lo_api_controller->get_message_manager( )->report_message( message_text = data
                                                                message_type = if_wd_message_manager=>co_type_info
                                                                is_permanent = abap_false  ).
* refresh work items
      wd_comp_controller->get_user_workitems( ).
ENDMETHOD.

Go back into the Layout tab and right click on WS_HTML_ISLAND again and add a script this time.

Enter in websocket_wf_notify.js in the source field. We wil create and upload this javascript file afterwards.

Save the following source to a file name websocket_wf_notify.js and upload it as a MIME object for the webdynpro.

Source code:

var MySocket = { 

      init: function(callback){

            //Save the call back object to this object

            this.callback = callback;

            var that = this;

            var hostLocation = window.location, socket, socketHostURI, webSocketURI;

            if (hostLocation.protocol === “https:”) {

                  socketHostURI = “wss:”;

            } else {

                  socketHostURI = “ws:”;

            }

            socketHostURI += “//” + hostLocation.host;

            webSocketURI = socketHostURI + ‘/sap/bc/apc/sap/zapc_wf_notify’;

       

            try {

                  socket = new WebSocket(webSocketURI);

                  socket.onopen = function() { };

                  var that = this;

  

                  //Create function for handling websocket messages

                  socket.onmessage = function(wfNotify) {

                        // When a message is received fire an event to call the web dynpro code to post the message and

                        // refresh the worklist

                        that.callback.fireEvent(‘ON_MESSAGE’, wfNotify.data);

                  };

  

                  socket.onclose = function() {

                  };

            } catch (exception) {

  

            }

      }

};

Right click on the web dynpro component and go to Create->Mime Object->Import.

Select the file you created in the previous step websocket_wf_notify.js and click open.

Then press save.

Right click on ROOTUIELEMENTCONTAINER again and Insert Element.

And enter MESSAGE_AREA and select MessageArea as the Type.

Make sure ROOTUIELEMENTCONTAINER is selected and then press the Wizard button

Select Table and press Continue.

Press Context to select the WORKITEMS context:

Select WORKITEMS and press the green tick.

No Need to change anything on the next screen, just press the green tick.

In the table properties change design to Alternating and set visibleRowCount to 25.

Now go into the Methods tab and select the WDDOMODIFYVIEW method.

And enter the following code to initialise the web socket when the view first loads:

METHOD wddomodifyview .
      DATA: lo_html_island TYPE REF TO cl_wd_html_island.

      IF first_time EQ abap_true.

           lo_html_island ?= view->get_element( `WS_HTML_ISLAND` ).

           lo_html_island->add_script_call( cl_wd_html_script_call=>new_call( )->variable( `MySocket` )->function( `init` )->add_callback_api( )  ).
      ENDIF.
ENDMETHOD.

Right click on ZWDC_WF_INBOX_MINI and go to Create->Web Dynpro Application.

Enter an application name and Description and press the green tick.

Save and activate everything then right click the Web Dynpro application to run.

Now open the window next to the SAP GUI and create a new parked journal, which will go to my inbox for approval. On saving the Parked Journal document, the notification is immediately displayed in my browser window and the list is automatically refreshed.

Before saving:

After Saving – Inbox updated with new document automatically and notification displayed: