SharePoint 2019 Calculated Hyperlink Column Not Displaying as a Clickable Link
SharePoint 2019 users often run into an issue where a Calculated Hyperlink Column displays as plain text instead of an actual hyperlink. This can be frustrating, especially when using Script Editor Web Part (SEWP) with JavaScript or trying to format it with JSON in Classic Mode. The problem can disrupt workflows and reduce the usability of list data.
Let’s break down why this happens and explore solutions to make sure your hyperlinks display correctly.
What Is a Calculated Hyperlink Column in SharePoint 2019?
A calculated column in SharePoint allows you to create dynamic values based on other columns in a list or library. When formatted correctly, it can generate hyperlinks using a formula.
However, unlike Hyperlink Columns, calculated columns store URLs as plain text. This makes it difficult to display them as clickable links without additional customization.
How Does It Compare to Other Columns?
- Hyperlink Column: Stores URLs as actual links and allows input directly.
- Calculated Column: Can generate URLs dynamically but outputs them as plain text.
- Lookup Column: Pulls data from another list but is limited in formatting.
Because calculated columns don’t inherently support clickable links, extra steps are needed to format them properly.
Why SEWP JavaScript Fails to Format Calculated Hyperlink Column
One common approach to displaying calculated hyperlinks is by using JavaScript inside a Script Editor Web Part (SEWP). However, even with correct code, the hyperlink often remains as plain text.
Common Reasons This Happens:
- Incorrect JavaScript syntax when modifying list views.
- Changes in SharePoint 2019 security policies restricting inline scripting.
- Page rendering issues causing scripts to load before list data.
Troubleshooting Steps
1. Check for JavaScript Errors
Use the browser’s developer tools (F12 > Console) to identify script errors.
2. Ensure Compatibility With SharePoint 2019
Older scripts designed for SharePoint 2013 or 2016 may not work due to security enhancements.
3. Test in Different Browsers and Environments
Sometimes, browser extensions or different environments can cause issues.
Fixing the JavaScript Issue in SEWP
If your calculated column isn’t showing links correctly, here’s how to fix it.
Update The Format of Your JavaScript Code
Sometimes, minor changes in syntax can resolve issues. Try modifying your script to properly load after the page renders:
document.addEventListener("DOMContentLoaded", function() {
var elements = document.querySelectorAll("[title='URL Column Name']");
elements.forEach(function(el) {
el.innerHTML = "<a href='" + el.innerText + "' target='_blank'>" + el.innerText + "</a>";
});
});
Embed JavaScript inside a Script Editor Web Part
If the Content Editor Web Part (CEWP) isn’t working, switch to SEWP:
- Add the Script Editor Web Part inside your list page.
- Insert the updated JavaScript code.
- Ensure proper permissions are set for script execution.
Classic Mode JSON Formatting Issues
For those using Classic Mode, JSON formatting also fails to turn calculated links into clickable hyperlinks.
Possible Causes:
- Calculated columns don’t support JSON formatting in Classic Mode.
- SharePoint restrictions prevent direct manipulation of list views.
- Incorrect JSON syntax might be preventing proper rendering.
Alternative Approach: Use SharePoint REST API
Instead of relying on JSON, retrieving data using SharePoint REST API can be a more flexible solution.
Example request using REST API:
fetch("https://yourSharePointSite/_api/web/lists/getbytitle('YourList')/items", {
headers: { "Accept": "application/json;odata=verbose" }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
This method gives full control over how hyperlink data appears.
Troubleshooting JSON in Classic Mode
1. Verify Permissions
Users must have the necessary permissions to modify list views.
2. Test JSON in a Separate Environment
Try replicating the issue in a test list before applying changes to production.
3. Consult the SharePoint Community
The Microsoft Tech Community and forums like Stack Overflow often have solutions for SharePoint customization challenges.
Best Practices for Handling SharePoint 2019 Calculated Hyperlink Columns
To prevent these issues in the future:
- Follow SharePoint Documentation: Always refer to Microsoft’s latest guidelines on using calculated columns in SharePoint.
- Keep Your Code Updated: Security updates or minor SharePoint changes can break previous customizations.
- Regularly Monitor Column Functionality: Set up test cases to verify hyperlink columns work as expected after updates.
Final Thoughts
The calculated hyperlink column in SharePoint 2019 can be frustrating when it appears as plain text, but solutions exist.
For JavaScript issues in SEWP, ensure scripts execute after the page loads and are compatible with SharePoint 2019. If you’re struggling with JSON formatting in Classic Mode, consider using the REST API to fetch and display hyperlinks properly.
Are you using another method to solve this issue? Share your experience in the comments!
0 Comments