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