SharePoint offers an array of functionalities to enhance the user experience. One of these is the ability to use calculated columns to write HTML. Utilizing this capacity, you could represent your data more visually, providing users with an interactive and engaging experience. This post offers a comprehensive guide to mastering this feature, and integrating with frameworks such as React.
What are Calculated Columns?
Calculated columns are fields you create in your SharePoint lists or libraries, deriving their values from the content of other fields. You can hide, display, or utilize the fields based on your needs.
Step 1: Create a New Calculated Column
To get started, navigate to the necessary list or library, choose ‘Library Settings’ or ‘List Settings’ from the Ribbon, and then select ‘Create Column.’ Define your column name, select the ‘Calculated (calculation based on other columns)’ for the type of information, and click on the ‘More Options’ link to proceed.
Step 2: Write Formulas in the Formula Field
The Formula field allows you to define the value of the respective calculated column. Much like Excel, SharePoint calculated fields accommodate simple mathematical operations and even intricate Excel-like formulas. However, the key to using the calculated columns to write HTML is to appreciate that SharePoint interprets all text strings as plain text.
Step 3: Writing HTML in Calculated Columns
For instance, suppose you want to display a Google search link for each entry in your ‘Customer’ column. You can create a calculated column named ‘Google Search’ with the following formula:
=”<a href='https://www.google.com/search?q=” & [Customer] & “‘ target=’_blank’>Google Search</a>”