HTML markup code not working for SharePoint Online List calculated column, displays plain text

Calculated fields have been around for years and used to display values based on formulas in SharePoint Lists and Libraries, similar to Microsoft Excel.
It also allowed developers to add HTML markup or script elements into calculated fields.

But the functionality to execute custom markup in calculated fields in SharePoint Online has been blocked and deprecated since 2017. For SharePoint on-premises 2013 and 2016 versions, you can keep this enabled using the CustomMarkupInCalculatedFieldDisabled property.

Microsoft announcement Reference - Handling HTML markup in SharePoint calculated fields

❓️ Can I add custom HTML markup to calculated fields in SharePoint Online ?

No, you will just see the plain HTML code as text. Calculated fields are blocked to execute custom markup since June 13, 2017 and all unsupported markup is ignored.
SharePoint Calculated field HTML markup not working.PNG
SharePoint Calculated field HTML markup not working

❓️ Can I add custom HTML markup to calculated fields in SharePoint 2013/2016 ?

Yes, can be enabled using CustomMarkupInCalculatedFieldDisabled property or using JSLink to render list fields. This web application setting lets an on-premises administrator determine whether execution of custom markup in calculated fields in a given web application is blocked.
$webApp = Get-SPWebApplication
$webApp.CustomMarkupInCalculatedFieldDisabled = $false
The value of CustomMarkupInCalculatedFieldDisabled is true by default, set it to false.

❓️ How can I add custom HTML markup in SharePoint Online column ?

Use JSON column formatting to customize Modern SharePoint. Works with SharePoint on-prem as well. Refer steps here.

Considering same example shown earlier, lets use JSON column formatting to customize the display for the related calculated or any other filed.
  "$schema": "",
  "elmType": "a",
  "txtContent": "Open Task",
  "attributes": {
    "target": "_blank",
    "href": "='' + @currentField"
txtContent = text for the link
@currentField = filed which has the TaskID
HTML markup using JSON column formatting.PNG
HTML markup using JSON column formatting

⭐ Different ways to add custom HTML code to SharePoint List fields ?

  1. JSON column formatting with Modern SharePoint sites - Preferred approach.
  2. SPFX extensions for SharePoint Modern sites - Recommended, requires more development.
  3. Power Automate to set the column value using FLOW when List item is added/updated.
  4. Custom JQuery Script Classic SharePoint sites - Not recommended, avoid HTML injection.
  5. JSLink to render fields using Script Editor web part - Not recommended with Modern framework.
  6. SharePoint Designer customization - Not recommended, SPD 2013 will be deprecated in few years.
Try Out Code2care Dev Tools:


Android Java Linux Microsoft Google Python macOS Notepad++ Microsoft Teams CSS PHP SharePoint Html Linux C Programs Bootstrap jQuery Sublime Android Studio Facebook Eclipse WhatsApp News MySQL Json HowTos JavaScript FTP S3


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR -