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

[bradp]

This is Part 3 of the below series of blogs:

• Real-time notifications and workflow using ABAP Push Channels (websockets) Part 1: Creating the APC ...
• Real-time notifications and workflow using ABAP Push Channels (websockets)  Part 2: Broadcasting the...
• 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 D...
• Real-time notifications and workflow using ABAP Push Channels (websockets) Part 5: Using the UI5 or ...

Here we are going to create a simple UI5 Application which consumes the standard Gateway TASKPROCESSING service. This requires component IWPGW to be installed on the system and is the same service as is used by the Unified Inbox and Fiori Approve Requests. The application will display the users workflow inbox and will automatically notify them of new messages and refresh the list when a new work item is created via the workitem exit created in Part 2.

In Eclipse Using the UI5 Toolkit Create a new application.

Goto File->New->Other…

Select UI5 Application and press Next

Give the Project a name: ZWF_WF_INBOX_MINI

Give the view a name: Main and leave the Development Paradigm as Javascript and press Finish.

Expand the application created and paste the following code into Main.controller.js and Main.view.js

Main.view.js code:

sap.ui.jsview("zwf_inbox_mini.Main", {

      /** Specifies the Controller belonging to this View.

      * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

      * @memberOf zwf_inbox_mini.Main

      */

      getControllerName : function() {

            return "zwf_inbox_mini.Main";

      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

      * Since the Controller is given to this method, its event handlers can be attached right away.

      * @memberOf zwf_inbox_mini.Main

      */

      createContent : function(oController) {

            //Create List

            var oList = new sap.m.List();

            //Create ListItem Template

            var oListItem =

            //Bind list to collection

            oList.bindItems("/TaskCollection",

                                    new sap.m.StandardListItem({title : "{CreatedByName}", description : "{TaskTitle}"}),

                                    new sap.ui.model.Sorter ("CreatedOn", true));

            return new sap.m.Page("idPage1",{

                  title: "Worklist",

                  content: [ oList

                  ]

            });

      }

});

Main.controller.js code:

sap.ui.controller("zwf_inbox_mini.Main", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf zwf_inbox_mini.Main

*/

      onInit: function() {

            //Initialise the websocket connection

            this.initWorkflowNotifyWebsocket();

            //Initialise OData Model using SAP standard TASK PROCESSING service from component IWPGW

            oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/IWPGW/TASKPROCESSING;v=2");

            sap.ui.getCore().setModel(oModel);

            //Get Work item count

            this.setWorkitemsCount();

      },

      // this function returns the count of work items

      setWorkitemsCount: function(){

            // Get Tasks count

          $.get( sap.ui.getCore().getModel().sServiceUrl +"/TaskCollection/$count" , function(data) {      

            sap.ui.getCore().byId("idPage1").setTitle("Worklist (" + data + ")");

              }, "text")  ; 

      },

      //this function initialises the websocket connection

      initWorkflowNotifyWebsocket : function() {

            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 refresh the OData model

                        sap.ui.getCore().getModel().refresh(false, null, null);

                        //Re-calculate the workitem count

                        that.setWorkitemsCount();

                        //Create a popup toast message to notify the user

                        sap.m.MessageToast.show(wfNotify.data);  

                  };

                  socket.onclose = function() {

                  };

            } catch (exception) {

            }

      },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

* @memberOf zwf_inbox_mini.Main

*/

//    onBeforeRendering: function() {

//

//    },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

* @memberOf zwf_inbox_mini.Main

*/

//    onAfterRendering: function() {

//

//    },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf zwf_inbox_mini.Main

*/

//    onExit: function() {

//

//    }

});

Deploy the application on your ABAP server or wherever you choose to and run it.

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 with the worklist count in the header increasing from 260 to 261.

Before save:

After save - Inbox updated with new document automatically and popup notification displayed:

If you would like to try create a similar application in Web Dynpro ABAP see: Real-time notifications and workflow using ABAP Push Channels (websockets)  Part 4: Creating a Web D...