How I can change the color of the msg iterator

I want to know how I can change the color of the msg iterator, as it always comes by default in blue color, and I would like it to be green or red

@Danny_Gallegos,

You can pass the indicator argument to msgprint dialog,

eg. frappe.msgprint("MSG", indicator="red")

@makarand_b,

does this work only out of server-side (Python) code? If I try this from the client-side JavaScript, it ignores the indicator (only msgprint: function(html, title))

Is there a way to use the indicator from the JavaScript as well?

Found myself having the same problem - the indicator parameter seems to be ignored when the msg dialog is triggered from client side.

my messy workaround for now is to force the addition of the “red” classname to the indicator element right after triggering the dialog. If you arrive here having the same problem, here’s how it worked for me:

var validation_err_msg = "My validation error message";
// trigger the dialog:
frappe.msgprint(validation_err_msg, title="Validation Error(s)");

// force the msgprint indicator to change to red:
var indicator_el = document.querySelector("div.modal-dialog div.modal-content div.modal-header div.row div.col-xs-7 span.indicator.blue");
indicator_el.className = "indicator red";

Update on this: Today I’ve gotten around to actually checking the code for the frappe.msgprint() JS function.

It turns out, this is how we should set the title, message and indicator parameters so that they will take effect:

frappe.msgprint({
    "title": "My message title",
    "message": "This is my message body.",
    "indicator": "red" //or blue, orange, green
}, title);

Here’s what the msgprint function currently looks like:

var msg_dialog = null;
frappe.msgprint = function (msg, title) {
	if (!msg) return;

	if ($.isPlainObject(msg)) {
		var data = msg;
	} else {
		if (typeof msg === 'string' && msg.substr(0, 1) === '{') {
			var data = JSON.parse(msg);
		} else {
			var data = { 'message': msg, 'title': title };
		}
	}

	if (!data.indicator) {
		data.indicator = 'blue';
	}

	if (data.message instanceof Array) {
		data.message.forEach(function (m) {
			frappe.msgprint(m);
		});
		return;
	}

	if (data.alert) {
		frappe.show_alert(data);
		return;
	}

	if (!msg_dialog) {
		msg_dialog = new frappe.ui.Dialog({
			title: __("Message"),
			onhide: function onhide() {
				if (msg_dialog.custom_onhide) {
					msg_dialog.custom_onhide();
				}
				msg_dialog.msg_area.empty();
			}
		});
		msg_dialog.msg_area = $('<div class="msgprint">').appendTo(msg_dialog.body);

		msg_dialog.loading_indicator = $('<div class="loading-indicator text-center" \
				style="margin: 15px;">\
				<img src="/assets/frappe/images/ui/ajax-loader.gif"></div>').appendTo(msg_dialog.body);

		msg_dialog.clear = function () {
			msg_dialog.msg_area.empty();
		};

		msg_dialog.indicator = msg_dialog.header.find('.indicator');
	}

	if (data.message == null) {
		data.message = '';
	}

	if (data.message.search(/<br>|<p>|<li>/) == -1) {
		msg = replace_newlines(data.message);
	}

	var msg_exists = false;
	if (data.clear) {
		msg_dialog.msg_area.empty();
	} else {
		msg_exists = msg_dialog.msg_area.html();
	}

	if (data.title || !msg_exists) {
		msg_dialog.set_title(data.title || __('Message'));
	}

	if (data.indicator) {
		msg_dialog.indicator.removeClass().addClass('indicator ' + data.indicator);
	} else {
		msg_dialog.indicator.removeClass().addClass('hidden');
	}

	if (msg_exists) {
		msg_dialog.msg_area.append("<hr>");
	}

	msg_dialog.msg_area.append(data.message);
	msg_dialog.loading_indicator.addClass("hide");

	msg_dialog.show_loading = function () {
		msg_dialog.loading_indicator.removeClass("hide");
	};

	msg_dialog.$wrapper.css("z-index", 2000);
	msg_dialog.show();

	return msg_dialog;
};
4 Likes