cancel
Showing results for 
Search instead for 
Did you mean: 

Why does the Message Box appear without color or style?

mahmood_hammood
Participant
0 Kudos

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; } });});

Accepted Solutions (1)

Accepted Solutions (1)

AlexNecula
Active Contributor

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
Participant
0 Kudos

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
Active Contributor
0 Kudos

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
Active Contributor

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

Answers (0)