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>&nbsp;');

    })
}
// 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
.