In this brand new tutorial, we'll learn how we can create a real-time notification list custom widget for SAC Analytic app.
As mentioned in Fiori Design Guidelines, notifications are the best way to make users aware of a situation that requires timely action or attention and reduce the amount on information and actions to its minimum, but provide enough information to decide weather it´s important or not.
For the real time communication medium I am using a service from PubNub. There is no specific reason, I just want to try a new thing. You can also use RabbitMQ, Kafka, socket.io or others. I have wrote tutorials to use SAC widget with RabbitMQ and Kafka that you can find in the reference section.
Let's move on to write a code for custom widget. I will focus on the main part. For the rest of the part or how it works, you can refer to my blog in the reference section.
Firstly, we need to load the PubNub JavaScript library (pubnub.4.29.9.js) into runtime. We do this by this function:
Secondly, we'll subscribe to the channel "sac" and listens to the messages sent from the NodeJS app. This NodeJS app sends the notification lists to custom widget via a PubNub service.
And finally, we use SAPUI5 sap.m.NotificationListGroup and sap.m.NotificationListItem to show the notifications.
For simplicity I will use NodeJS to send the notifications to custom widget. You can use others like Python to do the same thing. Refer to this documentation.
Intro
As mentioned in Fiori Design Guidelines, notifications are the best way to make users aware of a situation that requires timely action or attention and reduce the amount on information and actions to its minimum, but provide enough information to decide weather it´s important or not.
PubNub Service
For the real time communication medium I am using a service from PubNub. There is no specific reason, I just want to try a new thing. You can also use RabbitMQ, Kafka, socket.io or others. I have wrote tutorials to use SAC widget with RabbitMQ and Kafka that you can find in the reference section.
- Create an account in PubNub and create a new app.
- Enter an app name and select Chat App. Click Create to continue.
- Navigate to Keys and select Create New Keyset.
- Enter the keyset name and click Create.
- You will get the generated Publish Key and Subscribe Key. We will use these keys in our code later.
Custom Widget WebComponents
Let's move on to write a code for custom widget. I will focus on the main part. For the rest of the part or how it works, you can refer to my blog in the reference section.
Firstly, we need to load the PubNub JavaScript library (pubnub.4.29.9.js) into runtime. We do this by this function:
onCustomWidgetAfterUpdate(changedProperties) {
console.log(changedProperties);
var that = this;
if (this._firstLoadLib === 0) {
this._firstLoadLib = 1;
let pubnubjs = "http://localhost/SAC/sacnotificationlistitem/pubnub.4.29.9.js";
async function LoadLibs() {
try {
await loadScript(pubnubjs, _shadowRoot);
} catch (e) {
alert(e);
} finally {
letsGo(that, changedProperties);
}
}
LoadLibs();
}
}Secondly, we'll subscribe to the channel "sac" and listens to the messages sent from the NodeJS app. This NodeJS app sends the notification lists to custom widget via a PubNub service.
function letsGo(that, changedProperties) {
// Update this block with your publish/subscribe keys
pubnub = new PubNub({
publishKey: "REPLACE_WITH_YOUR_PUBLISH_KEY",
subscribeKey: "REPLACE_WITH_YOUR_SUBSCRIBE_KEY",
uuid: "REPLACE_WITH_RANDOM_STRING"
})
pubnub.addListener({
status: function(statusEvent) {},
message: function(msg) {
loadthis(that, changedProperties, msg);
},
presence: function(presenceEvent) {}
})
console.log("Subscribing...");
pubnub.subscribe({
channels: ['sac']
});
loadthis(that, changedProperties, "");
};And finally, we use SAPUI5 sap.m.NotificationListGroup and sap.m.NotificationListItem to show the notifications.
onInit: function() {
console.log("-------oninit--------");
if (that._firstConnection === 0) {
that._firstConnection = 1;
var oModel = new JSONModel({
"headers": []
});
this.getView().setModel(oModel);
sap.ui.getCore().setModel(oModel, "core");
} else {
console.log("----after---");
var oModel = sap.ui.getCore().getModel("core");
var data = new JSONModel(msg.message);
oModel.setProperty("/headers", data.oData.headers);
this.getView().setModel(data);
oModel.refresh(true);
}
}NodeJS App
For simplicity I will use NodeJS to send the notifications to custom widget. You can use others like Python to do the same thing. Refer to this documentation.
const PubNub = require('pubnub');
const pubnub = new PubNub({
publishKey: "REPLACE_WITH_YOUR_PUBLISHKEY",
subscribeKey: "REPLACE_WITH_YOUR_SUBSCRIBE_KEY",
uuid: "REPLACE_WITH_RANDOM_STRING",
});
async function publishSampleMessage() {
console.log(
"Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish."
);
const result = await pubnub.publish({
channel: "sac",
message: {
"headers": [{
"heading": "SAC Notification List Custom Widget",
"datetime": "1 hr",
"authorName": "Marie Khan",
"authorPicture": "http://localhost/SAC/sacnotificationlistitem/Woman_04.png",
"id": "ID1",
"items": [{
"id": "item1",
"title": "New order (#2524)",
"Descr": "Short description",
"datetime": "3 days",
"priority": "Low",
"authorName": "Ferry Djaja",
"authorPicture": "sap-icon://group"
}, {
"id": "item2",
"title": "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"Descr": "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"datetime": "2 hr",
"priority": "High",
"authorName": "JS",
"authorPicture": "sap-icon://person-placeholder"
},{
"id": "item3",
"title": "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"Descr": "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"datetime": "2 hr",
"priority": "Medium",
"authorName": "Linda",
"authorPicture": "sap-icon://person-placeholder"
},{
"id": "item4",
"title": "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"Descr": "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
"datetime": "2 hr",
"priority": "None",
"authorName": "Linda",
"authorPicture": "sap-icon://person-placeholder"
}]
}],
},
});
console.log(result);
}
console.log("Subscribing..");
publishSampleMessage();Demo Video
References
- SAP Managed Tags:
