Technical Articles
Display multiple Success/Error messages at one go in SAP UI5
Hey All
This blog is all about how we can display multiple success/error messages at a time in SAP Ui5.
It’s as simple as it looks.
Below are the changes and coding files i used.
view.xml : Used sap.m.NotificationListItem to display some info. Select few items from the list and click on Show More button.
<mvc:View controllerName="com.MultipleMessages.controller.DisplayMessages" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Toolbar>
<Label text="Display Multiple Messages" design="Bold"/>
<ToolbarSpacer/>
<Button text="Show More" press="onItemsPress"/>
</Toolbar>
<List noDataText="No Data" includeItemInSelection="true" visible="true" id="__list3" mode="MultiSelect" items="{/Orders}">
<items>
<NotificationListItem unread="true" title="Order ID : {OrderID}/ Customer ID : {CustomerID}" description="Ship Address : {ShipAddress}"
showCloseButton="false" priority="None" class="sapMLIB1" datetime="Order Date : {path : 'OrderDate', formatter: '.formatter.dateTime'}"
authorPicture="sap-icon://customer-order-entry"></NotificationListItem>
</items>
</List>
</mvc:View>
controller.js : On Show More click, I am opening a fragment where i can display multiple messages.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"com/MultipleMessages/model/formatter"
], function (Controller, formatter) {
"use strict";
return Controller.extend("com.MultipleMessages.controller.DisplayMessages", {
formatter: formatter,
onItemsPress: function (oEvent) {
var arr = [];
var selectedItems = this.getView().byId("__list3").getSelectedContexts();
for (var i = 0; i < selectedItems.length; i++) {
var oValues = selectedItems[i].getObject();
var obj = {
"Freight": oValues.Freight,
"ShipPostalCode": oValues.ShipPostalCode,
"ShipName": oValues.ShipName
};
arr.push(obj);
}
this.getView().getModel("oMsgModel").setData(arr);
if (!this.oMessage) {
this.oMessage = sap.ui.xmlfragment("com.MultipleMessages.Fragment.Message", this);
this.getView().addDependent(this.oMessage);
}
this.oMessage.open();
this.getOwnerComponent().getModel("oMsgModel").refresh(true);
},
onMessageClose: function () {
this.oMessage.close();
}
});
});
fragment.xml :
<core:FragmentDefinition xmlns:f="sap.ui.layout.form" xmlns:cm="sap.ui.commons" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"
xmlns="sap.m">
<Dialog title="Message" class=" sapUiNoContentPadding sapUiSizeCompact" verticalScrolling="true" type="Standard">
<content>
<List items="{oMsgModel>/}">
<CustomListItem class="sapUiTinyMargin" type="Inactive">
<HBox alignItems="Center" justifyContent="Center">
<Button icon="{path:'oMsgModel>Freight',formatter:'.formatter.getIcon'}" type="{path:'oMsgModel>Freight',formatter:'.formatter.getType'}"/>
<Text text="{oMsgModel>ShipPostalCode}" class="sapUiTinyMargin"/>
<Text text="{oMsgModel>ShipName}" class="sapUiTinyMargin"/>
</HBox>
</CustomListItem>
</List>
</content>
<endButton>
<Button text="Cancel" press="onMessageClose"></Button>
</endButton>
</Dialog>
</core:FragmentDefinition>
formatter.js : I am displaying the icon and type based on below condition.
sap.ui.define([], function () {
"use strict";
return {
dateTime: function (dateTime) {
if (dateTime !== null) {
return dateTime.getDate() + "." + (dateTime.getMonth() + 1) + "." + dateTime.getFullYear();
}
},
getType: function (oVal) {
if (oVal > "50.0000") {
return "Accept";
} else if (oVal > "12.0000" && oVal < "50.0000") {
return "Emphasized";
} else {
return "Reject";
}
},
getIcon: function (oVal) {
if (oVal > "50.0000") {
return "sap-icon://message-success";
} else if (oVal > "12.0000" && oVal < "50.0000") {
return "sap-icon://message-warning";
} else {
return "sap-icon://message-error";
}
}
};
});
Messages Display:
Enhance Learning!! 🙂
BR//Dhanasupriya Sidagam
Very nice blog!