Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Dhanasupriya
Active Participant
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
1 Comment
Labels in this area