Using calculated columns to write HTML in Sharepoint

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

While SharePoint will render standard text strings as plain text, this can be navigated by leveraging JavaScript and altering calculated column output.

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>”

This formula will create a hyperlink that will direct users to Google results for each customer’s name. However, upon saving your calculated column, you will notice that instead of a clickable hyperlink, SharePoint renders the HTML code as plain text. Here’s where JavaScript becomes essential.

Step 4: Incorporate JavaScript to Render HTML

To make SharePoint interpret HTML correctly, we introduce the JavaScript code. Firstly, add a ‘Script Editor’ web part to the page where your list or library resides. Inside it, you should insert the following JavaScript code:

<script type="text/javascript">
   $(document).ready(function(){
       var text = $(".ms-vb2:contains('<div')";
       text.each(function() {
           var html = $(this).html();
           $(this).html(html);
       });
   });
</script>

This JavaScript code will work in tandem with jQuery, a fast and concise JavaScript library simplifying HTML document traversing and event handling. It will look for the text you included in your calculated column, get the HTML content present in the cell and then replace the cell’s content with that HTML. Hence, populating your calculated columns with fully functional and clickable HTML links.

Conclusion

Using calculated columns to write HTML is an innovative feature that can have far-reaching benefits. It opens a world of possibilities in representing your data in SharePoint list views. The seamless fusion of calculated columns, HTML, and JavaScript unveils endless potential for enhancing your SharePoint pages. Always remember that manipulating page code comes with a risk, so always take necessary precautions, such as testing on non-production environments before implementing the changes on a large scale.


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *