What is MessageManager?
The MessageManager in SAPUI5 helps us to manage and display messages like errors, warnings, or informational notes in our application. These messages often appear in a MessagePopover or directly next to form fields, giving users real-time feedback.
Let’s go through step by step to understand how we can use MessageManager effectively in our SAPUI5 app.
Step 1: Register the View with MessageManager
Before displaying any messages, we need to register our view with the MessageManager. This tells SAPUI5 to monitor form fields and automatically bind any messages to the right controls.
Add this line in the init function of our Component.js (or) Main.view.xml:
sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);
Screenshot 1.1
Please Note: If we’re using manifest.json, there’s also a declarative way to register it, but for simplicity, we’re going with manual registration here.
Step 2: Add a MessagePopover Control
To show the messages visually, add a MessagePopover in our view. We can do this in XML or JavaScript.
XML Example:
<Button text=”Show Messages” press=”onOpenMessagePopover” />
Screenshot 1.2.1
Please Note: Just for your understanding, as per the screenshot, I have used Main.view.xml for button which could trigger the validation based on the user input on this form fields.
<MessagePopover id=”messagePopover” items=”{ path: ‘/messages’ }”>
<items>
<MessageItem type=”{type}” title=”{message}”
description=”{description}” />
</items>
</MessagePopover>
Screenshot 1.2.2
Please Note: Just for your understanding, as per the screenshot, I have used separate fragment for for MessagePopover which could pop up when while validation has been called off.
Step 3: Add Messages to the MessageManager
Whenever we want to show a message (e.g., an error if a form field is empty), use the addMessages() method:
sap.ui.getCore().getMessageManager().addMessages(
new sap.ui.core.message.Message({
message: “Please fill all required fields.”,
type: sap.ui.core.MessageType.Error,
target: “/field”, // Optional: bind to a specific field
processor: this.getView().getModel()
})
);
Screenshot 1.3
Please Note: Just for your understanding, as per the screenshot, I have used separate method as addErrorMessage to add dynamic error messages for multiple forms.
Available Message Types:
ErrorWarningSuccessInformation
Step 4: Open the MessagePopover
When the user clicks the button (or at the right moment in our flow), open the MessagePopover:
onOpenMessagePopover: function (oEvent) {
if (!this._oMessagePopover) {
this._oMessagePopover = this.byId(“messagePopover”);
}
this._oMessagePopover.openBy(oEvent.getSource());
}
Screenshot 1.4
Please Note: Just for your understanding, as per the screenshot, I have used separate fragment for for MessagePopover which could pop up when Button has been triggered. (ex. while user clicks the submit button without filling the mandatory fields)
Step 5: Clear Messages
If needed (e.g., after a successful save), we can clear all messages like this:
sap.ui.getCore().getMessageManager().removeAllMessages();
Screenshot 1.5
Please Note: Just for your understanding, as per the screenshot, I have used separate method as removeErrorMessage to remove dynamic error messages.
Complete Flow – Here’s the full flow in a nutshell:
Register our view with the MessageManagerAdd a MessagePopover controlInsert messages into the MessageManagerTrigger the MessagePopover on user interactionClear messages when appropriate
Complete Code: (For Reference)
MessageManager.controller.js
sap.ui.define([
“./BaseController”,
“sap/ui/core/message/Message”,
“sap/ui/core/Fragment”
],
function (BaseController, Message, Fragment) {
“use strict”;
return BaseController.extend(“testapp.controller.MessageManager”, {
onInit: function () {
var oMessageManager, oView;
oView = this.getView();
oMessageManager = sap.ui.getCore().getMessageManager();
oView.setModel(oMessageManager.getMessageModel(), “message”);
oMessageManager.registerObject(oView, true);
},
onOpenMessagePopover: function (oEvent) {
var oSource = oEvent.getSource();
this._createMessagePopover().then(function (oMessagePopover) {
oMessagePopover.openBy(oSource);
});
},
_createMessagePopover: function (oEvent) {
var oView = this.getView();
if (!this._pMessagePopover) {
this._pMessagePopover = Fragment.load({
id: oView.getId(),
name: “testapp.fragment.MessagePopover”
}).then(function (oMessagePopover) {
oView.addDependent(oMessagePopover);
return oMessagePopover;
});
}
return this._pMessagePopover;
},
addErrorMessage: function (sMessage, sTarget) {
var oMessage = new Message({
message: sMessage,
type: MessageType.Error,
target: sTarget,
processor: this.oModel,
activeTitle: true
});
sap.ui.getCore().getMessageManager().addMessages(oMessage);
},
removeErrorMessages: function () {
sap.ui.getCore().getMessageManager().removeAllMessages(
new Message({
target: “/uiDataInput”,
processor: this.oModel
})
);
},
onContinue: function (oEvent) {
const oSource = oEvent.getSource();
if (!this.uiOrderFieldValidation()) {
oSource.setBusy(true);
Promise.resolve().finally(() => {
oSource.setBusy(false);
});
}
},
uiOrderFieldValidation: function () {
let bOrderHasErrors = false;
this.removeErrorMessages();
const oResourceBundle = this.getOwnerComponent().getModel(“i18n”).getResourceBundle();
var sErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_GENERAL”);
const sFirstName = this.oModel.getProperty(“/uiDataInput/firstname”);
if (!sFirstName || sFirstName.trim().length === 0) {
const sNameErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_USER_FIRSTNAME”);
this.addErrorMessage(sNameErrorMessage, “/uiDataInput/firstName”);
sErrorMessage = sNameErrorMessage;
bOrderHasErrors = true;
}
const sLastName = this.oModel.getProperty(“/uiDataInput/lastName”);
if (!sLastName || sLastName.trim().length === 0) {
const sLastNameErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_USER_LASTNAME”);
this.addErrorMessage(sLastNameErrorMessage, “/uiDataInput/lastName”);
sErrorMessage = sLastNameErrorMessage;
bOrderHasErrors = true;
}
//Similarly you can check for all the remaining fields
return bOrderHasErrors;
}
});
});
MessageManager.view.xml
<mvc:View controllerName=”testapp.controller.MessageManager”
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns:core=”sap.ui.core”
xmlns:l=”sap.ui.layout”
xmlns:u=”sap.ui.table”
xmlns:f=”sap.ui.layout.form”
xmlns=”sap.m”>
<Page class=”sapUiSizeCompact sapUiContentPadding” showHeader=”false”>
<Panel headerText=”Validation check using Message Manager” backgroundDesign=”Transparent”
class=”sapUiSmallMarginBottom”>
<f:SimpleForm backgroundDesign=”Transparent” editable=”true”
layout=”ResponsiveGridLayout” labelSpanL=”3″ labelSpanM=”3″
labelSpanS=”12″ adjustLabelSpan=”true” emptySpanXL=”0″ emptySpanL=”0″ emptySpanM=”0″
emptySpanS=”0″ columnsL=”1″ columnsM=”1″
singleContainerFullSize=”false”>
<f:content>
<Label text=”First Name” required=”true” />
<Input type=”Text” width=”18.5em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/firstName’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
<Label text=”Last Name” required=”true” />
<Input type=”Text” width=”18.5em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/lastName’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
</HBox>
<Label text=”Contact Number” required=”true” />
<HBox>
<HBox width=”27em” justifyContent=”End”>
<Input type=”Number” width=”25em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/contactNumber’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
</HBox>
</HBox>
<Label text=”Email Address” />
<HBox>
<HBox width=”27em” justifyContent=”End”>
<Input width=”25em” maxLength=”241″
value=”{path: ‘globalModel>/uiDataInput/emailID’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 241 }}” />
</HBox>
</HBox>
<Label text=”Address” />
<TextArea height=”7em”
value=”{globalModel>/uiDataInput/address}”
rows=”3″
width=”25em”
liveChange=”onTextAreaLiveChange”
/>
</f:content>
</f:SimpleForm>
</Panel>
<Toolbar>
<Button text=”BACK” visible=”false”
class=”sapUiSmallMarginBegin sapUiMediumMarginTopBottom”
type=”Emphasized” press=”.navToOverview” />
<ToolbarSpacer />
<Button
icon=”sap-icon://alert”
text=”{= ${message>/}.length }”
visible=”{= ${message>/}.length > 0 }”
type=”Emphasized”
press=”.onOpenMessagePopover” />
<Button text=”NEXT”
class=”sapUiTinyMarginEnd sapUiMediumMarginTopBottom”
type=”Emphasized” press=”onContinue” />
</Toolbar>
</Page>
</mvc:View>
MessagePopover.fragment.xml
<core:FragmentDefinition
xmlns=”sap.m”
xmlns:core=”sap.ui.core”>
<MessagePopover
items=”{message>/}”
initiallyExpanded=”true”
activeTitlePress=”.onActiveTitlePressed”>
<MessageItem
activeTitle=”true”
type=”{message>type}”
title=”{message>message}”
subtitle=”{message>additionalText}”
description=”{message>description}”/>
</MessagePopover>
</core:FragmentDefinition>
Real World Scenario
Let’s say a user submits a form without filling all the required fields:
You add error messages to the MessageManager.The messages automatically link to the empty fields.When the user clicks Show Messages, the MessagePopover displays all the issues clearly.After correcting the errors, you can clear all messages and proceed.
Thank you for taking the time to read this blog!
If you found this helpful, feel free to share your thoughts, feedback or questions in the comments! Let’s keep learning and growing together.
Dear experts, I’m new to blogging, please feel free to correct me if any information is inaccurate.
What is MessageManager?The MessageManager in SAPUI5 helps us to manage and display messages like errors, warnings, or informational notes in our application. These messages often appear in a MessagePopover or directly next to form fields, giving users real-time feedback.Let’s go through step by step to understand how we can use MessageManager effectively in our SAPUI5 app. Step 1: Register the View with MessageManagerBefore displaying any messages, we need to register our view with the MessageManager. This tells SAPUI5 to monitor form fields and automatically bind any messages to the right controls.Add this line in the init function of our Component.js (or) Main.view.xml:sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);Screenshot 1.1Please Note: If we’re using manifest.json, there’s also a declarative way to register it, but for simplicity, we’re going with manual registration here. Step 2: Add a MessagePopover ControlTo show the messages visually, add a MessagePopover in our view. We can do this in XML or JavaScript.XML Example:<Button text=”Show Messages” press=”onOpenMessagePopover” />Screenshot 1.2.1Please Note: Just for your understanding, as per the screenshot, I have used Main.view.xml for button which could trigger the validation based on the user input on this form fields.<MessagePopover id=”messagePopover” items=”{ path: ‘/messages’ }”>
<items>
<MessageItem type=”{type}” title=”{message}”
description=”{description}” />
</items>
</MessagePopover>Screenshot 1.2.2Please Note: Just for your understanding, as per the screenshot, I have used separate fragment for for MessagePopover which could pop up when while validation has been called off. Step 3: Add Messages to the MessageManagerWhenever we want to show a message (e.g., an error if a form field is empty), use the addMessages() method:sap.ui.getCore().getMessageManager().addMessages(
new sap.ui.core.message.Message({
message: “Please fill all required fields.”,
type: sap.ui.core.MessageType.Error,
target: “/field”, // Optional: bind to a specific field
processor: this.getView().getModel()
})
);Screenshot 1.3Please Note: Just for your understanding, as per the screenshot, I have used separate method as addErrorMessage to add dynamic error messages for multiple forms.Available Message Types:ErrorWarningSuccessInformation Step 4: Open the MessagePopoverWhen the user clicks the button (or at the right moment in our flow), open the MessagePopover:onOpenMessagePopover: function (oEvent) {
if (!this._oMessagePopover) {
this._oMessagePopover = this.byId(“messagePopover”);
}
this._oMessagePopover.openBy(oEvent.getSource());
}Screenshot 1.4Please Note: Just for your understanding, as per the screenshot, I have used separate fragment for for MessagePopover which could pop up when Button has been triggered. (ex. while user clicks the submit button without filling the mandatory fields) Step 5: Clear MessagesIf needed (e.g., after a successful save), we can clear all messages like this:sap.ui.getCore().getMessageManager().removeAllMessages();Screenshot 1.5Please Note: Just for your understanding, as per the screenshot, I have used separate method as removeErrorMessage to remove dynamic error messages. Complete Flow – Here’s the full flow in a nutshell:Register our view with the MessageManagerAdd a MessagePopover controlInsert messages into the MessageManagerTrigger the MessagePopover on user interactionClear messages when appropriate Complete Code: (For Reference)MessageManager.controller.jssap.ui.define([
“./BaseController”,
“sap/ui/core/message/Message”,
“sap/ui/core/Fragment”
],
function (BaseController, Message, Fragment) {
“use strict”;
return BaseController.extend(“testapp.controller.MessageManager”, {
onInit: function () {
var oMessageManager, oView;
oView = this.getView();
oMessageManager = sap.ui.getCore().getMessageManager();
oView.setModel(oMessageManager.getMessageModel(), “message”);
oMessageManager.registerObject(oView, true);
},
onOpenMessagePopover: function (oEvent) {
var oSource = oEvent.getSource();
this._createMessagePopover().then(function (oMessagePopover) {
oMessagePopover.openBy(oSource);
});
},
_createMessagePopover: function (oEvent) {
var oView = this.getView();
if (!this._pMessagePopover) {
this._pMessagePopover = Fragment.load({
id: oView.getId(),
name: “testapp.fragment.MessagePopover”
}).then(function (oMessagePopover) {
oView.addDependent(oMessagePopover);
return oMessagePopover;
});
}
return this._pMessagePopover;
},
addErrorMessage: function (sMessage, sTarget) {
var oMessage = new Message({
message: sMessage,
type: MessageType.Error,
target: sTarget,
processor: this.oModel,
activeTitle: true
});
sap.ui.getCore().getMessageManager().addMessages(oMessage);
},
removeErrorMessages: function () {
sap.ui.getCore().getMessageManager().removeAllMessages(
new Message({
target: “/uiDataInput”,
processor: this.oModel
})
);
},
onContinue: function (oEvent) {
const oSource = oEvent.getSource();
if (!this.uiOrderFieldValidation()) {
oSource.setBusy(true);
Promise.resolve().finally(() => {
oSource.setBusy(false);
});
}
},
uiOrderFieldValidation: function () {
let bOrderHasErrors = false;
this.removeErrorMessages();
const oResourceBundle = this.getOwnerComponent().getModel(“i18n”).getResourceBundle();
var sErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_GENERAL”);
const sFirstName = this.oModel.getProperty(“/uiDataInput/firstname”);
if (!sFirstName || sFirstName.trim().length === 0) {
const sNameErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_USER_FIRSTNAME”);
this.addErrorMessage(sNameErrorMessage, “/uiDataInput/firstName”);
sErrorMessage = sNameErrorMessage;
bOrderHasErrors = true;
}
const sLastName = this.oModel.getProperty(“/uiDataInput/lastName”);
if (!sLastName || sLastName.trim().length === 0) {
const sLastNameErrorMessage = oResourceBundle.getText(“ORDER_FORM_ERROR_MESSAGE_USER_LASTNAME”);
this.addErrorMessage(sLastNameErrorMessage, “/uiDataInput/lastName”);
sErrorMessage = sLastNameErrorMessage;
bOrderHasErrors = true;
}
//Similarly you can check for all the remaining fields
return bOrderHasErrors;
}
});
}); MessageManager.view.xml<mvc:View controllerName=”testapp.controller.MessageManager”
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns:core=”sap.ui.core”
xmlns:l=”sap.ui.layout”
xmlns:u=”sap.ui.table”
xmlns:f=”sap.ui.layout.form”
xmlns=”sap.m”>
<Page class=”sapUiSizeCompact sapUiContentPadding” showHeader=”false”>
<Panel headerText=”Validation check using Message Manager” backgroundDesign=”Transparent”
class=”sapUiSmallMarginBottom”>
<f:SimpleForm backgroundDesign=”Transparent” editable=”true”
layout=”ResponsiveGridLayout” labelSpanL=”3″ labelSpanM=”3″
labelSpanS=”12″ adjustLabelSpan=”true” emptySpanXL=”0″ emptySpanL=”0″ emptySpanM=”0″
emptySpanS=”0″ columnsL=”1″ columnsM=”1″
singleContainerFullSize=”false”>
<f:content>
<Label text=”First Name” required=”true” />
<Input type=”Text” width=”18.5em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/firstName’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
<Label text=”Last Name” required=”true” />
<Input type=”Text” width=”18.5em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/lastName’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
</HBox>
<Label text=”Contact Number” required=”true” />
<HBox>
<HBox width=”27em” justifyContent=”End”>
<Input type=”Number” width=”25em” maxLength=”30″
value=”{path: ‘globalModel>/uiDataInput/contactNumber’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 30 }}” />
</HBox>
</HBox>
<Label text=”Email Address” />
<HBox>
<HBox width=”27em” justifyContent=”End”>
<Input width=”25em” maxLength=”241″
value=”{path: ‘globalModel>/uiDataInput/emailID’,
type: ‘sap.ui.model.type.String’,
constraints: { minLength: 1, maxLength: 241 }}” />
</HBox>
</HBox>
<Label text=”Address” />
<TextArea height=”7em”
value=”{globalModel>/uiDataInput/address}”
rows=”3″
width=”25em”
liveChange=”onTextAreaLiveChange”
/>
</f:content>
</f:SimpleForm>
</Panel>
<Toolbar>
<Button text=”BACK” visible=”false”
class=”sapUiSmallMarginBegin sapUiMediumMarginTopBottom”
type=”Emphasized” press=”.navToOverview” />
<ToolbarSpacer />
<Button
icon=”sap-icon://alert”
text=”{= ${message>/}.length }”
visible=”{= ${message>/}.length > 0 }”
type=”Emphasized”
press=”.onOpenMessagePopover” />
<Button text=”NEXT”
class=”sapUiTinyMarginEnd sapUiMediumMarginTopBottom”
type=”Emphasized” press=”onContinue” />
</Toolbar>
</Page>
</mvc:View> MessagePopover.fragment.xml<core:FragmentDefinition
xmlns=”sap.m”
xmlns:core=”sap.ui.core”>
<MessagePopover
items=”{message>/}”
initiallyExpanded=”true”
activeTitlePress=”.onActiveTitlePressed”>
<MessageItem
activeTitle=”true”
type=”{message>type}”
title=”{message>message}”
subtitle=”{message>additionalText}”
description=”{message>description}”/>
</MessagePopover>
</core:FragmentDefinition> Real World ScenarioLet’s say a user submits a form without filling all the required fields:You add error messages to the MessageManager.The messages automatically link to the empty fields.When the user clicks Show Messages, the MessagePopover displays all the issues clearly.After correcting the errors, you can clear all messages and proceed.Thank you for taking the time to read this blog! If you found this helpful, feel free to share your thoughts, feedback or questions in the comments! Let’s keep learning and growing together. Dear experts, I’m new to blogging, please feel free to correct me if any information is inaccurate. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
