I’m running into an issue with my custom UFM component setup in Umbraco 14. I have a block list that includes a multiUrlPicker, and I need to render a label for a property called link title. For clarity, I understand that a string (like a primitive) is different from an object (which is nested), and in this case, the link title is nested inside an object. I see that this has been solved on v15, but we are required to stay with v14. One of potential solutions that I saw was writing custom ufm component that will fetch Multi Url Picker property called Link Title.
Here’s what I’ve tried so far:
I added new manifest to umbraco-package.json
{
"type": "ufmComponent",
"alias": "My.CustomComponent",
"name": "My Custom UFM Component",
"api": "/App_Plugins/ufmCustomizations/ufmCustomizations.js",
"meta": {
"marker": "%"
}
}
I created ufm component. Currently it doesn’t do much. I am having problems rendering it.
import { UmbUfmComponentBase } from '@umbraco-cms/backoffice/ufm';
import type { UfmToken } from '@umbraco-cms/backoffice/ufm';
console.log('MyCustomComponent module loaded'); // Debug
export class MyCustomComponent extends UmbUfmComponentBase {
render(token: UfmToken) {
console.log('Rendering token:', token);
return `<ufm-custom-label text="${token.text}"></ufm-custom-label>`;
}
}
export{ MyCustomComponent as api };
My Vite config has an input for ufmCustomizations:
input: {
ufmCustomizations: './src/ufmCustomizations/main.ts',
},
output: {
dir: '../Project/wwwroot/App_Plugins',
entryFileNames: ({ name }) => `${name}/[name].js`,
format: 'es',
},
Basically this custom component needs will be copiled as pure js in App_Plugins and manifest should register it as an api.
But in dev tools I see this error
Extension of alias “My.CustomComponent” did not succeed instantiate a API class via the extension manifest property ‘api’, using either a ‘api’ or ‘default’ export
{type: ‘ufmComponent’, alias: ‘My.CustomComponent’, name: ‘My Custom UFM Component’, api: ‘https://localhost:44370/App_Plugins/ufmCustomizations/ufmCustomizations.js’, meta: {…}}
For a start I would just love to actually don’t get this error and see component and consol log inside compiled.
If I understand correctly, within this component I need to import an element that will fetch block list multi url picker link titles using block entry context and return it inside this custom ufm component that will be used as an api by manifest and thanks to custom name such as %name, placed in label we could actually see that in backoffice?
