Skip to Content
Author's profile photo Brad Pokroy

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

This is Part 3 of the below series of blogs:

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


                                    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 onetime initialization.

* @memberOf zwf_inbox_mini.Main


      onInit: function() {

            //Initialise the websocket connection



            //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”);



            //Get Work item count



      // 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 += “//” +;

            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



                        //Create a popup toast message to notify the user



                  socket.onclose = function() {


            } catch (exception) {




* Similar to onAfterRendering, but this hook is invoked before the controller’s View is rerendered

* (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). Postrendering 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 Dynpro ABAP Application for receiving notifications

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Amita Jain
      Amita Jain

      Hi i am facing issue on getting message on sapui5 application.

      500 sap internal server error

      ERROR: Cross-Site Request Forgery (XSRF) check has failed ! (termination: ABORT_MESSAGE_STATE).