Enabling Html Rendering In Sharepoint Calculated Columns

What is a Calculated Column?

A calculated column in SharePoint is a column that displays a value that is calculated based on another column, metadata, or embedded formula. Calculated columns allow users to add dynamic content to SharePoint lists and libraries without writing server-side code. By default, calculated columns render content as plain text.

Key capabilities of calculated columns include:

Performing calculations using metadata from the current item
Concatenating text strings and data values
Embedding formulas to carry out numeric calculations
Referencing data from other columns and lists
Displaying dynamically generated content based on the current item

Why Enable HTML Rendering?

Enabling HTML rendering in SharePoint calculated columns provides additional formatting and interactivity options, including:

Table of Contents

Applying CSS styles to calculated text values
Linking from calculated columns to URLs or other list items
Rendering images stored in libraries or referenced externally
Creating multi-level outlines, definition lists, and nested hierarchy
Embedding JavaScript for advanced formatting and interactivity

By rendering HTML, calculated columns can show richer, more engaging content without having to customize form templates or schema. HTML calculated columns can help make SharePoint lists and libraries more usable and aesthetically pleasing.

Limitations to Consider

When enabling HTML rendering in SharePoint calculated columns, organizations should keep the following limitations and risks in mind:

Stored XSS vulnerabilities if unfiltered HTML allows malicious code injection
HTML rendering may consume more server resources, affecting performance
Users may unknowingly post insecure HTML or JavaScript
Advanced HTML/CSS may not render well in all SharePoint interfaces
Could enable phishing or UI redressing attacks

Organizations should have governance policies regarding permitted HTML tags, scripting, iFrame usage, and external resource references.

Step-by-Step Guide

Follow these steps to enable HTML rendering in SharePoint calculated columns:

Navigate to List or Library Settings
Click Create Column or Modify Existing Column
Select Calculated Column and define calculation formula
Enable “Allow multiple lines of text”
Set data type to “Multiple Lines of Text”
Check “Render format as ‘HTML'” under advanced settings
Define HTML output format in calculated formula
Click Ok to create the HTML calculated column
Add column to Default View

Now any HTML tags, markup, images, links, CSS, etc. added in the calculated formula will render as HTML when items are viewed.

Example Calculated Columns

Here are some examples of HTML calculated columns:

Linked Images

Show images that link to item pages or external URLs:

"<a href='" & [Page URL] & "'><img src='https://contoso.sharepoint.com/sites/assets/logo.png'></a>"

Colored Text

Apply colors to calculated strings:

 
"<span style='color:blue'>" & Title & "</span>"

Embed PDF Document

Embed a PDF document stored in a library:

"<iframe src='https://contoso.sharepoint.com/sites/docs/report.pdf'></iframe>"

Additional examples at fauxsamples.com

Troubleshooting Issues

Some common issues when working with HTML calculated columns include:

HTML Markup Escaped

Check that “Render format as HTML” option is selected under column settings advanced options.

CSS Not Applied

Reference style sheet with link tag or use inline styles.

<link rel="stylesheet" href="styles.css">

Images Not Appearing

Use complete absolute URLs for linked images. Verify permissions allow access.

JavaScript Not Executing

By default scripts will not execute. Use caution allowing scripts as they pose security risks.

Additional Tips for Advanced Formatting

Techniques to extend HTML calculated columns:

Reference larger style sheets via links for robust styling
Build nested HTML elements for tabs, accordions, etc.
Pair with client-side scripts for advanced interactivity
Cross filter related views using query string parameters
Integrate with other SharePoint web parts on pages

Complex computed queries are possible by combining HTML, JavaScript, CSS, and SharePoint REST APIs.

Frequently Asked Questions

Is enabling HTML risky?

HTML in calculated columns introduces additional security risks if not filtered correctly, including code injection and XSS issues. Proper input validation and output encoding is necessary.

What HTML features are supported?

Most standard HTML5 elements as well as embedded scripts, iframes, CSS, and images. Some advanced features may have issues rendering.

What are the performance impacts?

HTML calculated columns require more resources to render than plain text, especially when using complex mark-up. Columns should be kept simple if used in high scale lists.

Additional FAQs are available at fauxsamples.com/faq