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