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