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
You can pass the indicator argument to msgprint dialog,
eg. frappe.msgprint("MSG", indicator="red")
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;
};