Restoring Html Markup In Sharepoint Online Calculated Columns

What is Causing Loss of HTML Markup in Calculated Columns

SharePoint Online displays calculated columns by rendering their output on the client-side by default. This means that the formula and formatting for a calculated column is processed by each user’s web browser rather than on the SharePoint servers. When content is rendered client-side, certain HTML tags may get stripped out or be incompatible with all web browsers.

Examples of HTML markup that may get removed from calculated columns when displayed in SharePoint Online include:

– Bold text
– Italic text
– Underline text
<img> – Embedded images
<a> – Hyperlinks

This happens because the client-side rendering process is optimized to avoid security issues and formatting problems across different devices and browsers. The result is that much of the HTML is stripped out before the calculated column output is shown to users.

Table of Contents

Workarounds to Preserve HTML Tags

There are some partial workarounds that can help retain some HTML formatting in calculated columns when using client-side rendering:

Column formatting rules can explicitly add some HTML tags like , etc. But this only applies the tags to the entire column cell, not specific parts of the text.
Using carriage returns or line breaks in the formula can simulate paragraphs and lists. However, true HTML list or table structures are not possible.

The major limitation with these workarounds is that client-side rendering always strips many HTML tags because allowing them could introduce security issues, cause browser crashes, or create unpredictable display issues.

Enabling Server-Side Rendering with REST APIs

Server-side rendering avoids limitations with client-side calculated columns by processing the formulas and HTML markup on the SharePoint Online servers. This uses the SharePoint REST APIs behind the scenes to evaluate the column output.

Here is some sample code to enable server-side rendering for a calculated column named “CalcColumn” so HTML tags are retained:

/sites/[site-url]/_api/web/lists/getbytitle('[list-name]')/items?$select=CalcColumn/Format&$expand=CalcColumn/Format

When that REST format is specified for a column, the SharePoint servers process the formula and output the fully rendered HTML markup for each item in that list or library.

Step-by-Step Guide to Configuring Calculated Columns

Follow these steps to configure a SharePoint calculated column to use server-side rendering:

Create the new column in the List Settings or Library Settings
Set the data type to “Calculated Column”
In the formula box, insert the template HTML tags needed along with any references to other columns
Check “Show as percentage” if needed to format numbers or dates
Save the column and make note of the internal name assigned
While still in List or Library settings page, edit the column to append &Format=Rendered to the end of the Source ID for that specific column
Save settings and confirm HTML tags appear as expected in column output

Following those steps configures SharePoint to process the calculated column formula and HTML tags server-side whenever items are rendered. The output will then be consistent across all web browsers and devices.

Common HTML Tags to Use in Calculated Columns

Here are some of the most useful HTML tags to use within calculated columns for formatted text, hyperlinks, images and lists:

Text Formatting Tags

– Bold tag
– Italic tag
– Underline tag
– Subscript text
– Superscript text
– Color formatted text

Link, Image and List Tags

<a href=”[url]”> – Add a hyperlink</a>
<img src=”[url]” /> – Embed an image
<ul><li> – Unordered lists</li></ul>
<ol><li> – Ordered numbered lists</li></ol>

When used within calculated columns configured for server-side rendering, tags like these allow robust formatting while outputting values from other columns and formulas.

Troubleshooting Issues with HTML Rendering

In some cases, HTML from calculated columns may still not appear correct even when server-side rendering is enabled. Try these troubleshooting tips:

Verify column is truly configured for server-side rendering by checking for &Format=Rendered in the column definition
Check browser developer tools – valid HTML may be present but hidden or overridden by CSS
Test output in alternate browsers – issues may be browser specific
Try escaping special characters that could conflict with HTML tags

Ensuring server-side processing is enabled is the first step. From there analyze if the tags themselves are malformed or if browser CSS issues may be hiding proper output.

Additional Tips for Advanced Formatting

Along with standard HTML tags in calculated columns, developers can optionally apply custom CSS styles or dynamically embed data for more advanced formatting:

Use embedded CSS inside <style> tags for per-column styling rules
Reference values from other columns using syntax like [Column Name]
Look into column formatting options such as coloring text or bar graphs
Explore further REST API options for additional server processing

With some creative CSS and data linking, calculated columns can take on more application-like interfaces without needing complicated client-side scripting or custom web parts.