Images in calculated columns

Question

I have a calculated column, formatted as number which is showing and image. Everything works fine on list views and in the web parts. But when I view a specific item, the calculated column only shows me the HTML code and not the image.

What am I doin wrong?

This is my formula:

=IF(Area="HR";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/hr_logo.jpg'></div>";IF(Area="IT";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/it_logo.jpg'></div>";IF(Area="KC";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/kc_logo.jpg'></div>";IF(Area="PR";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/pr_logo.jpg'></div>";IF(Area="BO";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/bo_logo.jpg'></div>")))))

Answer 1

It is true that I need to go for CSR.

1. I went into the edit mode on the DispForm view for one of my items.
2. Go into the Web Part attributes -> Miscellaneous
3. Enter the JSLink to your file (in my case it is ~sitecollection/SiteAssets/logo.js)

Sharepoint is showing my HTML code as a text string and for this I simply exchanged the innerHTML with my innerText. The only trick is to use the Sharepoint OnLoad function.

_spBodyOnLoadFunctionNames.push("change");

function change() {
    var elem = document.getElementById("SPFieldCalculated")

    //innerText does not exist in FF
    if (typeof elem.textContent !== "undefined") {
        elem.innerHTML = elem.textContent;
    } else {
        elem.innerHTML = elem.innerText;
    }
}

Answer 2

Note:

in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

---

**Original answer:**

The Number trick to display HTML only works in Views, it shows the bare HTML on Forms and in Alerts.

#Full explanation and pros & cons at: https://www.365csi.nl/vm365com/#/How

For Forms you have to go for Client-Side-Rendering (CSR)

###BTW

Your Formula:

=IF(Area="HR"
;"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/hr_logo.jpg'></div>"
;IF(Area="IT"
    ;"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/it_logo.jpg'></div>"
    ;IF(Area="KC";"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/kc_logo.jpg'></div>"
        ;IF(Area="PR"
            ;"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/pr_logo.jpg'></div>"
            ;IF(Area="BO"
                ;"<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/bo_logo.jpg'></div>"
                )
            )
        )
    )
)

###Can be rewritten to

="<div><img style='float: left' src='http://intranet.contoso.eu/PublishingImages/Logos/"
&IF(Area="HR"
;"hr_logo.jpg"
;IF(Area="IT"
    ;"it_logo.jpg"
    ;IF(Area="KC";"kc_logo.jpg"
        ;IF(Area="PR"
            ;"pr_logo.jpg"
            ;IF(Area="BO"
                ;"bo_logo.jpg"
                )
            )
        )
    )
)
&"'></div>"

###Which can be shortened to:

="<img style='float:left' src='http://intranet.contoso.eu/PublishingImages/Logos/"
&LOWER( [Area] )
&"_logo.jpg'>"

iCC

Answer 3

Just an idea to accomplish your requirement in a different way is to use CSR.

I think the pro's of CSR are in your case:

1. Only one column
2. You can sort by column and get the real name instead of the html code
3. Easy to use in different libraries

If you have questions about the tutorial, don't be afraIT to ask.