Why does the Message Box appear without color or style?

[mahmood_hammood]

Hello everyone, I try to create message box with two buttons, one called English and the second called German, to select one of these languages. The names of button should be called from i18n file. I should to write this code only in Component.js file. The Problem is that the message box appears without colors or style. I had tried so much Samples but the same problem appear. also when I had tried to use style.css file!! You can see the photos, one which I want to make like it and the other what I made.

maybe someone can help please?

Thank you

sap.ui.define([ "sap/ui/core/UIComponent", "sap/m/ResponsivePopover", "sap/m/MessageBox"], function(UIComponent, ResponsivePopover, MessageBox) { "use strict"; MessageBox.information( "Select One Of These Languages Please.", { actions: ["ENGLISCH", "DEUTSCH"], title: "Language Selection", emphasizedAction: "ENGLISCH", onClose: function (oAction) {}
} ); return UIComponent.extend("com.example.FLPPlugins.Component", {
metadata: { manifest: "json" },
/** * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. * @public * @override */
init: function() { this._langswPopover; var renderer = sap.ushell.Container.getRenderer("fiori2"); renderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", { id: "langswButton", icon: "sap-icon://world", press: this._showLangsw.bind(this) }, true, false);
}, _showLangsw: function(oEvent) { var oLangswButton = oEvent.getSource(); var oDeButton; var oEnButton; if(this._langswPopover === undefined) { this._langswPopover = new ResponsivePopover({ title: this.getModel("i18n").getResourceBundle().getText("title"), placement: "Bottom", afterClose: this.onCloseLangsw.bind(this) }); var oFlexBox = new sap.m.FlexBox({ direction: "Column", alignItems: "Start" }); var langu = sap.ui.getCore().getConfiguration().getLanguage(); switch(langu) { case 'DE': case 'de': case 'de-DE': oDeButton = new sap.m.Button({ id: 'de-DE', text: this.getModel("i18n").getResourceBundle().getText("deButtonText"), press: this.onPressButton.bind(this), enabled: false }); oEnButton = new sap.m.Button({ id: 'en-EN', text: this.getModel("i18n").getResourceBundle().getText("enButtonText"), press: this.onPressButton.bind(this) }); break; case 'EN': case 'en': case 'en-EN': oDeButton = new sap.m.Button({ id: 'de-DE', text: this.getModel("i18n").getResourceBundle().getText("deButtonText"), press: this.onPressButton.bind(this) }); oEnButton = new sap.m.Button({ id: 'en-EN', text: this.getModel("i18n").getResourceBundle().getText("enButtonText"), press: this.onPressButton.bind(this), enabled: false }); break; } oFlexBox.addItem(oDeButton); oFlexBox.addItem(oEnButton); this._langswPopover.addContent(oFlexBox); this._langswPopover.addStyleClass("sapUiResponsiveContentPadding"); this._langswPopover.openBy(oLangswButton); } else { this.onCloseLangsw(); } }, onPressButton: function(oEvent) { var language = oEvent.getSource().getId(); var langu = language.split('-'); jQuery.sap.storage.put("langChange", true); window.location.search = 'sap-language=' + langu[1]; sap.ui.getCore().getConfiguration().setLanguage(langu); this.onCloseLangsw(); }, onCloseLangsw: function() { this._langswPopover.destroy(); this._langswPopover = undefined; } });});

[AlexNecula · Accepted solution]

1. The first dialog has the state Error. Yours is Information

2. First is for a newer theme, probably horizon. Your screenshot has an older theme, probably belize. You can change the theme in the Fiori Launchpad on the Settings option after clicking on your profile image. Select horizon (if available) or quartz light.

[mahmood_hammood · Accepted solution]

oh, thank you I made it. yes it was just an example. Can you tell me please how can I call the names of two buttons in message Box from i18n file in actions [ ]? without writing English and German?

[AlexNecula · Accepted solution]

mahmood_hammood, as far as I know the strings that you put in "actions" are the same ones that are shown on the screen and also the same given in the onClose event. Therefore, you have to use something like below:

MessageBox.information("Select One Of These Languages Please.", {
        actions: [this.getModel("i18n").getResourceBundle().getText("english"), "this.getModel("i18n").getResourceBundle().getText("german")],
        title: "Language Selection",
        emphasizedAction: "ENGLISCH",
        onClose: function(oAction) {
            switch (oAction) {
                when this.getModel("i18n").getResourceBundle().getText("english"):
                  ......
            }
        }
    });

[AlexNecula · Accepted solution]

You're probably still calling the message box outside your controller. Do that in the init function of your controller.