Status Indicators on SharePoint Online

Question

I am looking to create some kind of status indicators for a list that I have produced. I just want a simple red, amber, green setup.

I came across the status indicator webpart but I couldn't get this to work with my list. I have had a look online and have read that this webpart has been discontinued in SharePoint Online (https://support.office.com/en-us/article/discontinued-features-and-modified-functionality-in-microsoft-sharepoint-2013-bbbb0815-2538-4f1d-b647-1f7f6d508c93?ui=en-us&rs=en-us&ad=us)?!

Does anyone know if this is the case and if so how would I go about making a simple status indicator on my list on SharePoint Online?

Answer 1

Office-365 introduced a Client Rendering Mode (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider that approach. Example and Article

CSR Example
Assume you have Priority column in the list with (high, normal or low) values. Save following file as .js extension and upload to your style library and link to list webaprt JsLink property.

(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Fields = {
         'Priority': { 'View': priorityIndicatorFiledTemplate }
             };

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function priorityIndicatorFiledTemplate(ctx) { 
var _ProrityText = ctx.CurrentItem.Priority;


switch (_ProrityText.toLowerCase()) { 
        case "high": 
            return "<span style='color :#f00'><img src='/Style%20Library/Images/Red.png' width='10px' height='10px' /> " + _ProrityText+ "</span>"; 
            break; 
        case "normal": 
            return "<span style='color :#ff6a00'><img src='/Style%20Library/Images/Green.png' width='13px' height='13px' /> " + _ProrityText+ "</span>"; 
            break; 
        case "low": 
            return "<span style='color :#cab023'><img src='/Style%20Library/Images/Orange.png' width='10px' height='10px' /> " + _ProrityText+ "</span>"; 
    } 
}

---

RESULT

Answer 2

You can use the CSR (Client Side Rendering) technique. Create a .js file and add it as a JSLink to the webpart (View o Form). Here an example for a field called Status in a list view:

(function () {

    var statusFieldContext = {};
    statusFieldContext.Templates = {};
    statusFieldContext.Templates.Fields = {
        "Status": { "View": statusFieldTemplate }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldContext);

})();

function statusFieldTemplate(ctx) {

    var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    switch (status) {
        case "Completed":
            return "<span style='color :#008000'>" + status + "</span>";
            break;
        case "In Progress":
            return "<span style='color :#FDF5E6'>" + status + "</span>";
            break;
        case "Not Started":
            return "<span style='color :#FF0000'>" + status + "</span>";
    }
}

Here you can take a look on other examples and how to add the jslink to the webpart.