How to set a linked page's "Name" for block lablel?

Questions
1

In my block list that has a Muti URL Picker property in the block and I am trying to make the lable for the list that of the Name of the page pciked in the URL picker. I saw a similare question and the suggstion was

{umbLink: url}

but that displays nothing. I trued

{umbLink: name}

and still nothing is displayed for the label. How do I get the name value?

2

In the new versions of Umbraco (up to version 17, if I remember correctly), you need to create a custom component to retrieve link names. Here’s an example of how I implemented it:

According to the documentation, you should add a vite.config file and configure it so that it generates a JavaScript file from the code you write—either in Lit (as I did) or using another framework. However, Lit is the officially recommended approach.

I created a folder named ufmCustomComponents, and inside it a subfolder ufmLinkName containing the fetchLinkName.ts file, which looks like this:

import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbUfmElementBase } from '@umbraco-cms/backoffice/ufm';

@customElement('ufm-link-name')
export class FetchUfmData extends UmbUfmElementBase {
    @property()
    alias?: string;

    constructor() {
        super();
        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, async (context) => {
            const content = await context.contentValues();
            this.observe(
                content,
                (value) => {
                    if (!this.alias || typeof value !== 'object') return;
                    const record = (value as Record<string, unknown>)[this.alias];
                    Array.isArray(record) && (this.value = record[0]?.name);
                },
                'observeValue',
            );
        });
    }
}

export default FetchUfmData;

declare global {
    interface HTMLElementTagNameMap {
        'ufm-link-name': FetchUfmData;
    }
}

Then I created ufmLinkName.ts to register the custom component logic:

import { UfmToken, UmbUfmComponentBase } from '@umbraco-cms/backoffice/ufm';
import './fetchLinkName.js';

export class UfmLinkNameComponent extends UmbUfmComponentBase {
    render(token: UfmToken) {
        if (!token) return;

        return `<ufm-link-name alias="link"></ufm-link-name>`;
    }
}

export { UfmLinkNameComponent as api };

Finally, outside of the ufmLinkName folder, I created a main.ts file to register the component:

import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";

const manifest = {
    type: "ufmComponent",
    alias: "ProjectName.CustomUfmComponent",
    name: "Project UFM Component",
    api: () => import("./ufmLinkName/ufmLinkName"),
    meta: {
        marker: "=ufmLinkName",
    },
};

umbExtensionsRegistry.register(manifest);

And here’s how I use it in Umbraco to retrieve the value:

undefined
undefined775×437 11.7 KB

3

Thanks, I don’t know anything about TS or Lit and honestly I think is it stupid that a full custom implementation needs to be done just to get a normal umbraco property value. I am actually just going to add a text box property to the block element and put the page’s name in there manually then use that for the label property. I think that will be the easier solution over custom code to maintain and site redeploys.