Technical Articles
SAPUI5 – User message compilation
When we make user interfaces in SAPUI5 there is a point that it’s necesary to thinking befor coding… What do we show the user to indicate that there are errors or everything is correct?
In this post I try to collect the most used messages in SAPUI5 to give feedback to the user:
Message Strip
Messages integrated in the screen that allow us to show information and errors (it will remind you of the old SAP GUI messages maybe)
https://sapui5.hana.ondemand.com/#/api/sap.m.MessageStrip
To show it we add in the view the following code:
<MessageStrip
text="Este formulario es provisional"
type="Warning"
showIcon="true"
showCloseButton="true"
class="sapUiMediumMarginBottom">
</MessageStrip>
Message View
Messages related to an element or component of the view. These messages can have the content we want and open like a bullet
https://sapui5.hana.ondemand.com/#/api/sap.m.MessageView
In this case is necesary add some code in view and some code in controller, but this type of message is the most complete
First off all, It’s necesary to add the libraries:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/BindingMode", // <-- Add this library
"sap/ui/core/message/Message", // <-- Add this library
], function (Controller,JSONModel,BindingMode,Message) {
In the controller we add the following code. First of all is register the object handler and then add the model (this model is an example)
onInit: function () {
var oMessageManager, oModel, oView;
oView = this.getView();
// Register message handler
oMessageManager = sap.ui.getCore().getMessageManager();
oView.setModel(oMessageManager.getMessageModel(), "message");
oMessageManager.registerObject(oView, true);
// Create example model for input parameters
oModel = new JSONModel({
MandatoryInputValue: "",
DateValue: null,
IntegerValue: undefined,
Dummy: ""
});
oModel.setDefaultBindingMode(BindingMode.TwoWay);
oView.setModel(oModel);
When the user add some data incorrectly, a warning appears, to give more detail, we will shoot a fragment by adding this function
_getMessagePopover : function () {
// create popover lazily (singleton)
if (!this._oMessagePopover) {
this._oMessagePopover = sap.ui.xmlfragment(this.getView().getId(),"<namespace_of_aplication>.fragments.MessageError", this);
this.getView().addDependent(this._oMessagePopover);
}
return this._oMessagePopover;
}
In the project, we will create a new folder called “fragment” and then, in this folder, we add a file called “MessageError.fragment.xml” with the following code:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<MessagePopover
items="{message>/}"
initiallyExpanded="true">
<MessageItem
type="{message>type}"
title="{message>message}"
subtitle="{message>additionalText}"
description="{message>description}"/>
</MessagePopover>
</core:FragmentDefinition>
Finally in the view, we add some fields with a standard formetter
<f:FormElement>
<f:label>
<Label text="Nombre" required="true"/>
</f:label>
<f:fields>
<Input id="Nombre" value="{ path: '/MandatoryInputValue', type: 'sap.ui.model.type.String', constraints: { minLength: 3 } }"/>
</f:fields>
</f:FormElement>
<f:FormElement>
<f:label>
<Label text="Fecha"/>
</f:label>
<f:fields>
<DatePicker id="date"
value="{ path:'/DateValue', type:'sap.ui.model.type.Date', formatOptions: { style: 'short', strictParsing: true }, constraints: { } }"/>
</f:fields>
</f:FormElement>
<f:FormElement>
<f:label>
<Label text="Valoración (0-10)"/>
</f:label>
<f:fields>
<Input id="int" value="{ path: '/IntegerValue', type:'sap.ui.model.type.Integer', constraints: { minimum: 0, maximum: 10 } }"/>
</f:fields>
</f:FormElement>
Message Box
Typical pop ups with one or more action buttons used as confirmation or warning messages when we want full user attention
https://sapui5.hana.ondemand.com/#/api/sap.m.MessageBox
For these messages we will add code in the controller
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/BindingMode",
"sap/ui/core/message/Message",
'sap/m/MessageBox' // <--- ADD this library
], function (Controller,JSONModel,BindingMode,Message,MessageBox) {
This function call the message:
lanzarMessageBox: function(oEvent) {
var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length;
MessageBox.confirm(
"Seguro que quieres cerrar esta ventana?", {
styleClass: bCompact ? "sapUiSizeCompact" : ""
}
);
},
In this example, we launch the message from a button in a view:
<Button
text="Message Box"
class="sapUiSmallMarginBottom"
press="lanzarMessageBox"
width="250px"/>
Message Toast
These messages appear and disappear without the user doing anything. Typically used when everything goes well
https://sapui5.hana.ondemand.com/#/api/sap.m.MessageToast
For these messages we will add code in the controller
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/BindingMode",
"sap/ui/core/message/Message",
"sap/m/MessageBox",
"sap/m/MessageToast" // <-- Add this library
], function (Controller,JSONModel,BindingMode,Message,MessageBox,MessageToast) {
"use strict";
The following code laungh the message, in this case add the trigger in “onInit” function
onInit: function () {
MessageToast.show("Hola, has iniciado el controlador :) ");
...
With these types of messaging you can cover practically all the cases that the user needs
Regards