How can I configure my words and background on the List View with colors - like the default ToDo (erpnext14) has on its List View?
Place a {doctype}_list.js file
ToDo example: https://github.com/frappe/frappe/blob/develop/frappe/desk/doctype/todo/todo_list.js
Hi @clars :
You can define Status field color customizing doctype too.
Other fields can be done with _list.js file, as @revant_one well said above.
Hope this helps.
3 Likes
Hi, after doing some research, I found that you can use these words which already have a preset stylus. You can see how it works here. frappe/frappe/public/js/frappe/utils/utils.js at caf2c45ed0679735b798cfb0231a04933b2c2b29 · frappe/frappe (github.com)
guess_style: function (text, default_style, _colour) {
var style = default_style || "default";
var colour = "gray";
if (text) {
if (has_words(["Pending", "Review", "Medium", "Not Approved"], text)) {
style = "warning";
colour = "orange";
} else if (
has_words(["Open", "Urgent", "High", "Failed", "Rejected", "Error"], text)
) {
style = "danger";
colour = "red";
} else if (
has_words(
[
"Closed",
"Finished",
"Converted",
"Completed",
"Complete",
"Confirmed",
"Approved",
"Yes",
"Active",
"Available",
"Paid",
"Success",
],
text
)
) {
style = "success";
colour = "green";
} else if (has_words(["Submitted"], text)) {
style = "info";
colour = "blue";
}
}
return _colour ? colour : style;
},
For the custom fields in the form, I’ve crafted this script. Please note that I haven’t tested it extensively, so there might be some glitches. If you’re not sure about how it works, it’s better not to use it.
const doctypeName = 'ToDo'
frappe.listview_settings[doctypeName] = frappe.listview_settings[doctypeName] || {}
// let fields = frappe.list_view_settings['ToDo']
// console.log(fields)
let standardFilterFields = frappe.get_meta(doctypeName).fields.filter(field => field.in_list_view === 1)
let statesArray = frappe.get_meta(doctypeName).states; // Suponiendo que esto devuelve un array
let statesObject = {};
statesArray.forEach(el => {
statesObject[el.title] = el.color;
});
function getColorFromTitle(title) {
let statusColorMap = statesObject
const statusValue = title.split(':').pop();
let color = statusColorMap[statusValue.trim()] ? statusColorMap[statusValue.trim()].toLowerCase() : '';
return color || "grey"; // Color por defecto
}
frappe.listview_settings[doctypeName] = {
hide_name_column: true,
get_indicator: function(doc) {
const status_colors = {
"Open": "red",
"Closed":"green",
"Cancelled":"grey",
};
return [__(doc.status), status_colors[doc.status], "status,=,"+doc.status];
},
refresh: function(listview) {
standardFilterFields.forEach(field => {
listview.$page.find('.list-row').each(function() {
// Encontrar el elemento con el atributo 'title' que contiene 'custom_status_1:'
const titleElement = $(this).find(`[title^="${field.label}:"]`);
// const titleElement = $(this).find(`[title^="Code:"]`);
if (titleElement.length) {
const title = titleElement.attr('title');
const color = getColorFromTitle(title);
// Cambiar el color del elemento
const childSpan = titleElement.find('span.filterable.indicator-pill');
if (childSpan.length) {
childSpan.removeClass('gray blue green red orange'); // Ajusta según tus clases
childSpan.addClass(color);
}
}
});
})
}
};
Frappe v15
frappe V14
Regarding the script I mentioned for the form’s custom fields, it’s designed to work specifically with customized fields as well as the ‘status’ field. This has been tested and confirmed to function on both Frappe versions 14 and 15. However, as my testing period has been limited, I advise caution. If you’re not confident in understanding how it operates, it’s better not to use it.
5 Likes