MessagePopover does not show any items

Question

I have downloaded the example Message Popover from https://sapui5.hana.ondemand.com/#/entity/sap.m.MessagePopover/sample/sap.m.sample.MessagePopover/code/view/MessagePopover.view.xml and have modified property binding to named model as follows:

oMessagePopover = new MessagePopover({
    items: {
        path: 'Message>/',
        template: oMessageTemplate
    },
    activeTitlePress: function () {
        MessageToast.show('Active title is pressed');
    }
});

and the model definition:

this.getView().setModel(new JSONModel(aMockMessages), "Message");

it shows item with empty values:

it should be

What am I doing wrong?

Here is the whole code:

sap.ui.define([
    'sap/m/MessagePopover',
    'sap/m/MessageItem',
    'sap/m/MessageToast',
    'sap/m/Link',
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/json/JSONModel'
], function (MessagePopover, MessageItem, MessageToast, Link, Controller, JSONModel) {
    "use strict";

    var oMessagePopover;

    return Controller.extend("sap.m.sample.MessagePopover.controller.MessagePopover", {
        onInit: function () {
            // create any data and a model and set it to the view

            var oLink = new Link({
                text: "Show more information",
                href: "http://sap.com",
                target: "_blank"
            });

            var oMessageTemplate = new MessageItem({
                type: '{type}',
                title: '{title}',
                activeTitle: "{active}",
                description: '{description}',
                subtitle: '{subtitle}',
                counter: '{counter}',
                link: oLink
            });

            var sErrorDescription = 'First Error message description. \n' +
                'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod' +
                'tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,' +
                'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo' +
                'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse' +
                'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non' +
                'proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

/*          oMessagePopover = new MessagePopover({
                items: {
                    path: '/',
                    template: oMessageTemplate
                },
                activeTitlePress: function () {
                    MessageToast.show('Active title is pressed');
                }
            });*/

            oMessagePopover = new MessagePopover({
                items: {
                    path: 'Message>/',
                    template: oMessageTemplate
                },
                activeTitlePress: function () {
                    MessageToast.show('Active title is pressed');
                }
            });

            var aMockMessages = [{
                type: 'Error',
                title: 'Error message',
                active: true,
                description: sErrorDescription,
                subtitle: 'Example of subtitle',
                counter: 1
            }, {
                type: 'Warning',
                title: 'Warning without description',
                description: ''
            }, {
                type: 'Success',
                title: 'Success message',
                description: 'First Success message description',
                subtitle: 'Example of subtitle',
                counter: 1
            }, {
                type: 'Error',
                title: 'Error message',
                description: 'Second Error message description',
                subtitle: 'Example of subtitle',
                counter: 2
            }, {
                type: 'Information',
                title: 'Information message',
                description: 'First Information message description',
                subtitle: 'Example of subtitle',
                counter: 1
            }];

            this.getView().setModel(new JSONModel(aMockMessages), "Message");
            //this.getView().setModel(new JSONModel(aMockMessages));
            this.byId("messagePopoverBtn").addDependent(oMessagePopover);
        },

        // Display the button type according to the message with the highest severity
        // The priority of the message types are as follows: Error > Warning > Success > Info
        buttonTypeFormatter: function () {
            var sHighestSeverityIcon;
            var aMessages = this.getView().getModel().oData;

            aMessages.forEach(function (sMessage) {
                switch (sMessage.type) {
                case "Error":
                    sHighestSeverityIcon = "Negative";
                    break;
                case "Warning":
                    sHighestSeverityIcon = sHighestSeverityIcon !== "Negative" ? "Critical" : sHighestSeverityIcon;
                    break;
                case "Success":
                    sHighestSeverityIcon = sHighestSeverityIcon !== "Negative" && sHighestSeverityIcon !== "Critical" ? "Success" :
                        sHighestSeverityIcon;
                    break;
                default:
                    sHighestSeverityIcon = !sHighestSeverityIcon ? "Neutral" : sHighestSeverityIcon;
                    break;
                }
            });

            return sHighestSeverityIcon;
        },

        // Display the number of messages with the highest severity
        highestSeverityMessages: function () {
            var sHighestSeverityIconType = this.buttonTypeFormatter();
            var sHighestSeverityMessageType;

            switch (sHighestSeverityIconType) {
            case "Negative":
                sHighestSeverityMessageType = "Error";
                break;
            case "Critical":
                sHighestSeverityMessageType = "Warning";
                break;
            case "Success":
                sHighestSeverityMessageType = "Success";
                break;
            default:
                sHighestSeverityMessageType = !sHighestSeverityMessageType ? "Information" : sHighestSeverityMessageType;
                break;
            }

            return this.getView().getModel().oData.reduce(function (iNumberOfMessages, oMessageItem) {
                return oMessageItem.type === sHighestSeverityMessageType ? ++iNumberOfMessages : iNumberOfMessages;
            }, 0);
        },

        // Set the button icon according to the message with the highest severity
        buttonIconFormatter: function () {
            var sIcon;
            var aMessages = this.getView().getModel().oData;

            aMessages.forEach(function (sMessage) {
                switch (sMessage.type) {
                case "Error":
                    sIcon = "sap-icon://error";
                    break;
                case "Warning":
                    sIcon = sIcon !== "sap-icon://error" ? "sap-icon://alert" : sIcon;
                    break;
                case "Success":
                    sIcon = "sap-icon://error" && sIcon !== "sap-icon://alert" ? "sap-icon://sys-enter-2" : sIcon;
                    break;
                default:
                    sIcon = !sIcon ? "sap-icon://information" : sIcon;
                    break;
                }
            });

            return sIcon;
        },

        handleMessagePopoverPress: function (oEvent) {
            oMessagePopover.toggle(oEvent.getSource());
        }
    });

});

Answer 1

In your MessageItem you should bind your attributes to the right model:

           var oMessageTemplate = new MessageItem({
                type: '{Message>type}',
                title: '{Message>title}',
                activeTitle: "{Message>active}",
                description: '{Message>description}',
                subtitle: '{Message>subtitle}',
                counter: '{Message>counter}',
                link: oLink
            });

or another solution is to set this JSON model as default this.getView().setModel(new JSONModel(aMockMessages));