How to Set Width of sap.m.MessagePopover?

Question

The control sap.m.MessagePopover has an attribute _oPopover (containing sap.m.Popover inside). Using this attribute, I could set the popover width:

messagePopover._oPopover.setContentWidth("450px");

However, as SAP attributes starting from _ should not be used, does anybody know a cleaner way?

Answer 1

Another solution would be to use CSS class. However, there is a catch. As you can see from below generated DOM of the message popover, inline styling has been used :( .

Only way to override inline-style is by using !important in CSS which is again not recommended approach. However, considering inline CSS has been used, I would go with using !important keyword. Below is the working code:

XML Code ( for adding Class):

<MessagePopover id='myMP' class='myPopoverClass'>
    <items>
        <MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
    </items>
</MessagePopover>

CSS:

        .myPopoverClass {
            width:100rem;
        }
        .myPopoverClass .sapMPopoverCont {
            width:100% !important;
        }

You can play around with how much width you need for message Popover.

EDIT: This is from the source code:

MessagePopover.prototype.init = function () {
            var that = this;
            var oPopupControl;

            this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");

            this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
                showHeader: false,
                contentWidth: "440px",
                placement: this.getPlacement(),
                showCloseButton: false,
                modal: false,
                afterOpen: function (oEvent) {
                    that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
                },
                afterClose: function (oEvent) {
                    that._navContainer.backToTop();
                    that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
                },
                beforeOpen: function (oEvent) {
                    that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
                },
                beforeClose: function (oEvent) {
                    that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
                }
            }).addStyleClass(CSS_CLASS);

Answer 2

As of UI5 version 1.46, a more flexible control sap.m.MessageView can be used instead of the old sap.m.MessagePopover.

• There is no need to access internal properties or apply custom CSS style classes to manipulate the width as you can put MessageView anywhere you want (Still, Fiori Guideline recommends to use it only within a responsive popover or a dialog).

  const popover = new ResponsivePopover({
    contentWidth: "450px",
    contentHeight: "450px",
    content: [
      /*myMessageView*/
    ],
  });
  // ...
  popover.openBy(...);
  

• Compared to MessagePopover, MessageView can group items and more.

• Internally, MessagePopover uses MessageView too.