Calculated field shows text instead of image

Question

SP Online, task list. Created calculated field with this formula:

=IF([Task Status]="Completed","<DIV><img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png /></DIV>","")

it works but does not show icon (shows text):

Returned value is 'Number', so as I uunderstang SharePoint should render html and show image.. How can I fix it?

Update:

Thank You much guys for Your answers! Replaced with CSR (attached like "~sitecollection/libname/filename.js" in Webpart -> Miscellaneous -> JsLink section):

(function () {
    // custom JSlink overrides hierarchytaskslist.js, so we need to load it by ourself
    // https://sharepoint.stackexchange.com/questions/211494/csr-to-render-task-status-destroys-task-checkboxes
    RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
    LoadSodByKey('hierarchytaskslist.js', null);

    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.Templates.Fields = {
        'Ico':
        {
            'View': returnIcon
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();


function returnIcon(ctx) {

    var isCurrentItemCompleted = ctx.CurrentItem["Checkmark"];
    console.log("Is current item completed: " + isCurrentItemCompleted);

    if (isCurrentItemCompleted === "Yes") {

        var pathToIcon = "<span><img src='" + "https://server.sharepoint.com" + "/Style%20Library/project/ok-24.png' width='24px' height='24px'style='border:0px;'></span>";

        return pathToIcon;
    } else {
        return "";
    }
}

The only problem that remains - is that all works like a charm on Views pages, but not on Home.aspx, where I have other webparts with custom javascript.. Select/Deselect tasks does not wotk there at all, maybe something breaks hierarchytaskslist.js

Answer 1

You can achieve this functionality using Client Side Rendering. Below code show how to compare 2 columns and show image icon in the 3rd column based on the condition.

(function () {
var overrideCurrentContext = {};
overrideCurrentContext.Templates = {};
overrideCurrentContext.Templates.Fields = {
    'Target_x0020_Status': { 'View': TargetStatus }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();


function TargetStatus(ctx) {

var totalSalesVal =ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
var targetSalesVal =ctx.CurrentItem.Sales_x0020_Target.replace(",", "");

if(parseInt(totalSalesVal) > parseInt(targetSalesVal))
{
 returnvalue = "<span><img src='/sites/Playground/SiteAssets/TargetMet.jpg' width='20px' height='20px'style='border:0px;'></span>";
 return returnvalue ;

}
else if(parseInt(targetSalesVal)- parseInt(totalSalesVal) <=1000 )
{
 returnvalue = "<span><img src='/sites/Playground/SiteAssets/Reaching.jpg' width='20px' height='20px'style='border:0px;'></span>";
 return returnvalue ;
}
else
{
 returnvalue = "<span><img src='/sites/Playground/SiteAssets/LongWay.jpg' width='20px' height='20px'style='border:0px;'></span>";
 return returnvalue ;
}
}

You can view more detailed information in my article here

Answer 2

SharePoint doesn't support HTML in calculated field since June 2017. So it's not working.

You can use CSR using JSLINK for achieve your functionality.

Please check this link for more detail.

Answer 3

This unofficial feature has recently been removed.

See Handling HTML markup in SharePoint calculated fields for more details.

Danny Engelman has provided some code to a similar question which restores this functionality. You can find it here.