2

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>","")

enter image description here

it works but does not show icon (shows text): enter image description here

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

3

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

enter image description here

You can view more detailed information in my article here

  • 1
    Another example has Tobias Zimmergren: zimmergren.net/… – Gennady G Aug 4 '17 at 14:16
  • This is exatly the same answer as this one. Either the questions are equal and they should be merged, or the questions are different calling for a different answer. – Benny Skogberg Mar 18 at 8:45
5

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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.