Customize the way Item Links are rendered

Modified on Sun, 20 Mar 2022 at 09:04 PM

Imagine you want to present item links not just as a link, but you want to show additional information in the cell where item is rendered.

This is especially useful for MULTI ITEM LINKS , as they do not support sub-columns.

Example: have a multi item link column Effects, and show together with effect description, also its severity:

We can use typeProperties.itemTemplate config option to customize the way the item is rendered:

    {
     "headerGroup":"Potential risks",
     "headerGroupCss": "headPotentialRisks",
     "headerCss": "headPotentialRisks",
     "header": "Effects",
     "type": "multiItemLink",
     "width": 200,
     "filterable": true,
     "level": 2,
     "id":"effects",
     "canCreate":true,
     "typeProperties": {
         "linkRole": "effect",
         "linkTypes": "risk",
         "createInCurrentDocument":true,
         "itemTemplate":"<span style=\"display: table-cell;width:100%;padding-right:4px;\">$item.fields().description().render().htmlFor().forFrame() </span><span style=\"display: table-cell;white-space: nowrap;\">[S:$item.fields().get(\"severityRating\").render().withIcon(false).htmlFor().forFrame()]"
     }
    },