show a status icon in a browse

[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:

[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);
}

[ARWEN]

Kevin, your my hero! This was exactly what I was looking for. Thank you so much !

[admin]

.