Setup an sap.m.MessagePopover quickly and easily!

This blog post shows how to quickly and easily setup an sap.m.MessagePopover. To be more precise, this blog post is about a custom control called MessageHandler that bundles the following functionalities:

sap.m.MessagePopover functionality
convert OData exceptions to messages
convert XML responses to messages
add messages and decide if existing messages should be deleted and if the sap.m.MessagePopover should open automatically if there is an error
determination of the icon, button type and count of the MessagePopoverButton in the view
clear all messages

A complete example implementation is available at the following GIT repo: https://github.com/BloggingWithJan/MessageHandler

Table of Contents

Step-by-Step Instructions

In the following we will go through the different steps to get the MessageHandler running in your application.

Import the MessageHandler custom control

Create a folder called MessageHandler in your application where you store the custom control. Import the MessageHandler custom control from the git repo into the folder.

💡 It is best to move the control to a library right from the start. Then it can be reused in any other application.

⚠️ After the files are imported into your application or an library make sure to adjust the namespace in the BaseObject.extend argument.

Include a Button (MessagePopoverButton) into your view

Next create a sap.m.Button in the view of your application where you want to use the MessageHandler and the sap.m.MessagePopover functionality.

<Button id="messagePopoverBtn" icon="{messagePopover>/icon}" type="{messagePopover>/type}" text="{messagePopover>/text}"
		press=".onMessagePopoverPress" ariaHasPopup="Dialog" tooltip="{i18n>messages}"/>

💡 The button will be used to toggle the sap.m.MessagePopover. the icon, the button type aswell as the text/count of the button will be determined by the MessageHandler everytime an message gets added.

Instantiate the MessageHandler in your controller

After that we can instantiate the MessageHandler in the corresponding controller of the view. Therefore we have to define the path in the controller to access the custom control.

sap.ui.define([
	"sample/MessageHandler/control/MessageHandler/MessageHandler"
], function (MessageHandler) {
});

The concstructor expects the MessagePopoverButton we defined in the previous step. Therefore we access the button via this.oMessagePopoverButton = this.getView().byId("messagePopoverBtn"); Additionally the constructor expects the controller reference of the view and a function for the activeTitlePress event of the sap.m.MessagePopover. After instantiating the custom control, the messagemodel of the MessageHandler can be registered in the view.

onInit: function () {			
	...	
	this.oMessagePopoverButton = this.getView().byId("messagePopoverBtn");
	this.oMessageHandler = new MessageHandler(this, this.oMessagePopoverButton, this.onActiveTitlePress.bind(this));
	this.getView().setModel(this.oMessageHandler.oMessageModel, "messagePopover");
},
/**
 * @description activeTitlePress method for the {@link MessageHandler}
 * @param {Object} oMessage - message object
 */
onActiveTitlePress: function (oMessage) {
	alert("onActiveTitlePress");
}

Implement the onMessagePopoverPress method

Something is missing? That’s right, the Button in the view has no implementation yet for the press event. The Button should toggle the sap.m.MessagePopover.

/**
 * @description event for the messagepopover button
 * opens the message popover of the messagehandler
 */
onMessagePopoverPress: function () {
	this.oMessageHandler.oMessagePopover.toggle(this.oMessagePopoverButton);
}

That’s it. Generate messages

Now everything is ready for use. Just generate messages via the method addMessages of the MessageHandler. Via the parameters bClear and bOpenWhenError you can decide if the current messages should be deleted and if the sap.m.MessagePopover automatically should open if an error occured.

var aMessages = [{
	type: "Error", //sap.ui.core.MessageType values
	title: "Lorem ipsum", 
	activeTitle: true, 
	subtitle: "Lorem ipsum",
	description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
}];
this.oMessageHandler.addMessages(aMessages, true, true);