How to Remove Hyperlinks from the First Column of an Entity List in Power Pages

 Background

In Power Pages (formerly known as Power Apps portals), Entity Lists often present clickable hyperlinks on the first column. While this is convenient for navigation to detailed records, sometimes you might want to display this information as plain text instead. For example, you may have a “Case Number” or “Grievance Number” column that you want visible, but not clickable.

The out-of-the-box configuration may not allow you to disable these links directly. Luckily, you can accomplish this by adding a small amount of custom JavaScript to your Web Page. By leveraging a MutationObserver, you can wait until the list fully loads and then remove the hyperlink while retaining the text.

What You Need to Know

1. Column Text Selector: Identify the exact text used in the column header. In the script below, we use data-th="Grievance Number" as a selector. Update this to the actual column text from your list.
2. Link Selector: The default link inside these cells usually has the CSS class .details-link. You can confirm this by using your browser’s developer tools to inspect the rendered list. Update if needed.
   
   
   
   
   
   
   
3. Implementation Location:
   Add this script to the “Custom JavaScript” section on the Options tab of your List. 

Sample Code
Replace "Grievance Number" with the text of your column header. If your first column is “Case Number,” use that text instead. Additionally, confirm that the .details-link class exists by inspecting your rendered HTML (as shown in the example <a> tag below).

document.addEventListener('DOMContentLoaded', function()

{

    let container = document.querySelector('.entity-grid.entitylist');

    if (container)

    {

        const observer = new MutationObserver(function()

        {

            let links = document.querySelectorAll('td[data-th="Grievance Number"] a.details-link');

            if (links && links.length > 0)

            {

                links.forEach(function(link)

                {

                    let text = link.textContent.trim();

                    link.closest('td').textContent = text;

                });

            }

        });

        observer.observe(container, { childList: true, subtree: true });

    }

});

Verifying the Changes

1. Navigate to your published page containing the Entity List.
2. Inspect the first column. Previously clickable text should now appear as static text.
3. If it still appears as a link, double-check that you have the correct column header text and that the .details-link class is present on the generated links.

Conclusion
By using this small JavaScript snippet, you gain finer control over how Entity List columns are presented, ensuring that certain fields remain non-clickable while still providing valuable information to your users.