Document how to apply conditions to your own extension types

[LennardF1989]

It has been documented how to create your own conditions.

It is however not documented how to support conditions for your custom types.

Eg. I made a custom type which can be retrieved with the extensionRegistry. I would however like to add support for a conditions-array, so I could - for example - conditionally render a list of items, which can also update itself if a condition later sets itself to this.permitted = true.

I've tried looking through the source, but I can't seem to link it all together.

@nielslyngsoe Could you perhaps point me in the right direction?

[nielslyngsoe]

Hi @LennardF1989

Good question, and I understand that it can be tricky. Lets see if these pointers will work for you.

1. Get the Typings right for your Manifest Type.
For this you can make your interface extend ManifestWithDynamicConditions, give it the generic type of UmbExtensionConditionConfig
Lets use workspaceInfoApp as your source-code reference, see the Manifest-Type here:
https://github.com/umbraco/Umbraco-CMS/blob/3bd66b89e159ab37c5e73c875814a561a85b1632/src/Umbraco.Web.UI.Client/src/packages/core/workspace/info-app/workspace-info-app.extension.ts

2. Initialize the extensions with condition handling.
Using the Extension-registry directly does not handle conditions, for this we have a few Elements, which is backed by some Controller/Classes that you also could use, but I would surely recommend using these elements, that makes it all simpler:

For the workspace info apps, the implementation looks like this:
<umb-extension-slot type="workspaceInfoApp"></umb-extension-slot>

or for multiple types:
<umb-extension-slot .type=${["workspaceInfoApp", "anotherType"]}></umb-extension-slot>

Notice if your extension type both brings an element and an api, then use <umb-extension-slot-with-api-slot>.

**3. Customizing extension rendering **
Notice how the element can be configured to your needs.

Example you can add the single attribute if you only need the extension with the highest weight to be rendered.

There is also an option to declare a filter-method, which can be used to only show some of the extensions of the given type/types.

<umb-extension-slot
    type="menu"
    .filter=${(manifest) => manifest.alias === 'My.Menu.Alias'}>
</umb-extension-slot>

You can also parse props, properties that will be set on the element:

<umb-extension-slot
    type="searchResultItem"
    .props=${{ item: searchResult }}>
</umb-extension-slot>

I hope this will work for you, good luck :-)

As part of this answer I appended JS Docs, to the two elements, hopefully improving the knowledge for everyone moving forward.
#21645

As a thanks, I will appriciate if you bring your new knowledge as a contribution to the Umbraco Docs.

Also, please feel free to use the discussion on how to improve on this matter so future users can have a better experience with this, but if you feel it is resolved, please close the discussion :-)

Huge thanks in advance

[LennardF1989]

Thanks for this, I'll give it a spin over the coming week and report back :)