Page 1 of 1
show a status icon in a browse
Posted: Thu Apr 09, 2020 1:32 pm
by ARWEN
I'd want to pimp up my browse form a little by showing a status icon. Is there a function to load a png from the server and show it in a browse column in front of a text?
Something like in column Status:
Re: show a status icon in a browse
Posted: Fri Apr 10, 2020 10:51 am
by kev1n
Here's a function to add a status icon before the text in a column. It uses font awesome icons (
https://fontawesome.com/v4.7.0/icons/ )
browse_icons_font_awesome.png
-> Add this JavaScript code to your form's
Custom Code field:
-> Change the status descriptions, icons, colors in
statusArr if necessary.
Code: Select all
var statusArr = [
{status:"Pending",class:"fa fa-clock-o",color:"#f1c40f"}, // orange
{status:"Completed",class:"fa fa-check-circle",color:"#2ecc71"}, // green
{status:"Cancelled",class:"fa fa-ban",color:"#e74c3c"}, // red
{status:"New",class:"fa fa-circle-o",color:"#707070"}, // grey
{status:"In progress",class:"fa fa-spinner",color:"#3498db"} // blue
]
function addStatusIconFA(col) {
$("[data-nu-column='" + col + "']").each(function(index) {
var status = $(this).html();
var index = statusArr.findIndex(x => x.status === status);
var _class = statusArr[index].class;
var color = statusArr[index].color;
$(this).prepend('<i class="' + _class + '" aria-hidden="true" style="font-size:medium;color:' + color + ';"></i> ');
})
}
// Example: Add a status icon in the first column.
Code: Select all
if (nuFormType() == 'browse') {
addStatusIconFA(0);
}
Re: show a status icon in a browse
Posted: Mon Apr 20, 2020 4:15 pm
by ARWEN
Kevin, your my hero! This was exactly what I was looking for. Thank you so much !
Re: show a status icon in a browse
Posted: Tue Apr 21, 2020 12:40 am
by admin
.