Opening Linked Records from a List Page in Creatio Freedom UI

Opening Linked Records from a List Page in Creatio Freedom UI

In certain Creatio implementations, there’s a need to display clickable links inside a list page column — for example, showing a numeric value that opens a related record when clicked. While Creatio’s form pages can easily render clickable HTML in a rich text field, list pages don’t natively process these HTML tags as active links.

The Form Page Setup

On the form page, you can simply create a Rich Text field (e.g., QntUrl) and store HTML like:

<a href="http://localhost:4100/0/Shell/#Card/QntEmailAttachmentView_FormPage/edit/d54d2105-ce64-4b89-b28b-95c00424fc6e[modal=QntPage_obso4xq]">3</a>

When viewed on the form, this will render as an interactive link labeled 3, which will open the target record in a new modal window.

The Challenge in the List Page

When the same field is displayed in a Freedom UI list page, the HTML will be rendered as plain text rather than an active link. This means the user cannot directly click it to open the related record.

The Solution — Custom Click Handler

To enable clickable behavior in the list page, we can attach a click listener to the column cell. The following Freedom UI request handler captures clicks on the PDS_QntUrl column, extracts the URL from the rich text content, and opens it in a new tab or modal:

{
    request: "crt.HandleViewModelInitRequest",
    handler: async (request, next) => {
        setTimeout(() => {
            document.addEventListener("click", async function (e) {
                // Target the correct cell or number
                const cell = e.target.closest("td.cdk-column-PDS_QntUrl");
                if (!cell) return;
 
                const activeRow = document.querySelector("tr.crt-data-table-row-active");
                const rowId = activeRow?.getAttribute("row-id");
                if (!rowId) return;
 
                const accountModel = await sdk.Model.create("QntEmailAttachmentView");
                const filters = new sdk.FilterGroup();
                await filters.addSchemaColumnFilterWithParameter(
                    sdk.ComparisonType.Equal,
                    "Id",
                    rowId
                );
 
                const records = await accountModel.load({
                    attributes: ["Id", "QntUrl"],
                    parameters: [{
                        type: sdk.ModelParameterType.Filter,
                        value: filters
                    }]
                });
 
                let htmlValue = records?.[0]?.QntUrl?.trim();
                if (!htmlValue) return;
 
                const match = htmlValue.match(/href="([^"]+)"/);
                const href = match?.[1];
                if (href) {
                    window.open(href, "_blank");
                }
            });
        }, 500);
 
        return next?.handle(request);
    }
}

This code works for both clicking directly on the link text or the numeric label in the cell.