Skip to Content

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…

016.PNG

Select UI5 Application and press Next

017.PNG

Give the Project a name: ZWF_WF_INBOX_MINI

018.PNG

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

019.PNG

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

020.PNG


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

021.PNG

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:

022.PNG

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

023.PNG

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

To report this post you need to login first.

1 Comment

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

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

    (0) 

Leave a Reply