Skip to Content
0

SAP UI5 - Dynamic Font color in Message Box

Mar 10, 2017 at 10:48 AM

158

avatar image

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??

Thanks,

Vijayakumar SR

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Sudheer Kumar Akkalapotu Mar 11, 2017 at 04:32 AM
0

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"?>
<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">
 
   <Dialog  title="Message">
   
   <content>
      <VBox items="{/}">
        <items>
          <ObjectStatus text="{text}" 
                     state="{path:'type',
                             formatter:'sap.ui.demo.util.formatter.status'
                       }">
          </ObjectStatus>
         </items>
      
        </VBox>
      </content>
    <beginButton>
      <Button text="Ok" press="closeDialog"></Button>
     </beginButton>
   </Dialog>
</core:FragmentDefinition>

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
                        this._oDialog.setModel(oModel);
		}
		   this._oDialog.open();
		
	},
	closeDialog : function()
	{
		this._oDialog.close();
	},

Add the below formatter in formatter.js

jQuery.sap.declare("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";
				} 
				else 
				{
					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.


dialog.png (7.5 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks :)

0
Srikanth KV Mar 10, 2017 at 04:57 PM
0

why can't you use MessagePopover ?

Share
10 |10000 characters needed characters left characters exceeded
Dennis Seah
Mar 14, 2017 at 05:50 AM
0

Hi

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

http://jsbin.com/wuzuxoy/edit?css,js,output

Thanks

-D

Share
10 |10000 characters needed characters left characters exceeded