Skip to Content

SAP UI5 - Dynamic Font color in Message Box

Hi All,

As we have requirement that we need to show the Error message in Red Color and Success Message in Green color , in a same Message Box.Where we get the success and error message from the odata services, by having a indicator where we can separate it.But to change the style class in SAP.M.Messagebox, for each message line item???

or is it feasible to have the same??


Vijayakumar SR

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    avatar image
    Former Member
    Mar 11, 2017 at 04:32 AM

    Hi Vijay,

    Using sap.m.MessageBox it is very difficult to achieve your requirement. It is better to use sap.m.Dialog.

    create a fragment as below

    <?xml version="1.0" encoding="UTF-8"?>
       <Dialog  title="Message">
          <VBox items="{/}">
              <ObjectStatus text="{text}" 
          <Button text="Ok" press="closeDialog"></Button>

    In the controller get the formatter and add the below functions for opening and closing the dialogues.

            // To open the dialog call this method from the view
            openDialog : function(oEvent)
    		if (!this._oDialog) {
    			this._oDialog = sap.ui.xmlfragment("sap.ui.demo.f4help1234.Dialog", this);
    			// read the data from backend and set it to the dialog through model
                            //if you use global model no need to set the model
    	closeDialog : function()

    Add the below formatter in formatter.js"sap.ui.demo.util.formatter");
    sap.ui.demo.util.formatter = {
    		status :  function (sStatus) {
                                    // I'm considering the message type flag as "E" or "S"
    				if (sStatus === "E") {
    					return "Error";
    					return "Success";

    I've used below dummy model to resolve the issue.


    {"text":"Success message1","type":"S"},

    {"text":"Success message2","type":"S"},

    {"text":"Error message1","type":"E"},

    {"text":"Success message3","type":"S"},

    {"text":"Error message2","type":"E"}


    Please find the screen shot of the dialog below.

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 10, 2017 at 04:57 PM

    why can't you use MessagePopover ?

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 14, 2017 at 05:50 AM


    You can use styleClass to achieve this. Here is a simple sample,js,output



    Add comment
    10|10000 characters needed characters exceeded