Custom List view get content name not Id

[gordonsaxby]

I have a page type that includes a content picker (Contentment DataList ) that stores the selections as the page Id. it allows multiple items to be picked.

I have created a custom List View and added the “Categories” property with the template “{{ value }}” and it shows values like

["10309"]

But I would like it to show the category name, e.g. “Books”.

Is that possible?

[jemayn (Jesper Mayntzhusen)]

It’s possible if you use a standard Umbraco content picker or multinodetreepicker. Is there a specific reason you use contentment for what Umbraco can already do out of the box?

[gordonsaxby]

Mainly because I need to be selective about which items are shown in the picker, and it’s easiest to do that in code.

[jemayn (Jesper Mayntzhusen)]

Alright, well the easiest way would be to write your own filter then.

Umbraco has the ncNodeName filter that can receive a UDI and return the name of that node, you can see the filter code here:
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js at release-13.7.0 · umbraco/Umbraco-CMS

You’d have to create your own filter ( Configuring Block Editor Label Properties | Umbraco CMS) that does the same but takes an array of ids from the contentment value and then returns a string of names.

The entityResource that the core filter uses has a getByIds method that takes an array of int ids and an entity type so should be fairly straightforward to change the code into what you need.
Umbraco 13 Backoffice UI API Documentation: umbraco.resources.entityResource

[gordonsaxby]

Thanks for the links, but I’m struggling to get anything to work.

If I want to call my filter “shopCategoryName” and the category picker alias is “categories”, would the template be "{{ categories | shopCategoryName }}"?

I tried copying the code for “ncNodeName” and changing the filter name to “shopCategoryName” but it didn’t work - if I debug it in the browser, it doesn’t seem to receive any values.

Can you explain how I get the categories picker value into the filter code (show me a basic filter template?), then maybe I can manage the rest!

[HFloyd (Heather Floyd)]

@gordonsaxby - Is it possible for your custom DataList source code to store a UDI rather than the Node Id? That will guarantee an unchanging ID value, even if you end up with a multiple-environment setup. It might also make your Angular filter easier to write, since I believe you’d be able to use the built-in Umbraco ncNodeName filter as a template (as per Jesper’s comment with link).

[gordonsaxby]

Yes, I can change the ID to be UDI … but I’m still struggling to write the filter itself - or specifically get the ID value(s) into the filter function.

[gordonsaxby]

So, with a basic filter:

angular.module("umbraco.filters").filter("categoryName", function () {
        return function (input) {
            return `input="${input}"`;
        }
    });

Defined in the List view as

I get

How do I get the list of selected categories to pass into my filter?

[HFloyd (Heather Floyd)]

This is the way I’ve used the ncNodeName with multiple values as the ListView template:

{{ value | umbCmsJoinArray:', ' | ncNodeName}}

so, in your example, perhaps try:
{{ value | umbCmsJoinArray:', ' | categoryName}}

[gordonsaxby]

Thanks @HFloyd , that got me headed in the right direction!