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 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
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", {
/**SpecifiestheControllerbelongingtothisView.
*Inthecasethatitisnotimplemented,orthat"null"isreturned,thisViewdoesnothaveaController.
*@memberOfzwf_inbox_mini.Main
*/
getControllerName : function() {
return"zwf_inbox_mini.Main";
},
/**IsinitiallycalledonceaftertheControllerhasbeeninstantiated.ItistheplacewheretheUIisconstructed.
*SincetheControllerisgiventothismethod,itseventhandlerscanbeattachedrightaway.
*@memberOfzwf_inbox_mini.Main
*/
createContent : function(oController) {
//Create List
varoList = new sap.m.List();
//Create ListItem Template
varoListItem =
//Bind list to collection
oList.bindItems("/TaskCollection",
new sap.m.StandardListItem({title : "{CreatedByName}", description : "{TaskTitle}"}),
new sap.ui.model.Sorter ("CreatedOn", true));
returnnew sap.m.Page("idPage1",{
title: "Worklist",
content: [ oList
]
});
}
});
Main.controller.js code:
sap.ui.controller("zwf_inbox_mini.Main", {
/**
*CalledwhenacontrollerisinstantiatedanditsViewcontrols(ifavailable)arealreadycreated.
*CanbeusedtomodifytheViewbeforeitisdisplayed,tobindeventhandlersanddootherone-timeinitialization.
*@memberOfzwf_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() { };
varthat = 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) {
}
},
/**
*SimilartoonAfterRendering,butthishookisinvokedbeforethecontroller'sViewisre-rendered
*(NOTbeforethefirstrendering!onInit()isusedforthatone!).
*@memberOfzwf_inbox_mini.Main
*/
// onBeforeRendering: function() {
//
// },
/**
*CalledwhentheViewhasbeenrendered(soitsHTMLispartofthedocument).Post-renderingmanipulationsoftheHTMLcouldbedonehere.
*ThishookisthesameonethatSAPUI5controlsgetafterbeingrendered.
*@memberOfzwf_inbox_mini.Main
*/
// onAfterRendering: function() {
//
// },
/**
*CalledwhentheControllerisdestroyed.Usethisonetofreeresourcesandfinalizeactivities.
*@memberOfzwf_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