Umbraco Manifest Picker

What is it?

The

component provides a picker UI for selecting registered extensions from the Umbraco extension registry. It allows users to pick from any extension type (workspaces, dashboards, property editors, etc.) and returns the selected manifest. This is useful for configuration UIs where users need to reference other extensions.

Documentation

Always fetch the latest docs before implementing:

Extension Registry

:

https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Foundation

:

https://docs.umbraco.com/umbraco-cms/customizing/foundation

Reference Example

The Umbraco source includes a working example:

Location

:

/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/manifest-picker/

This example demonstrates a dashboard that lets users browse and select extensions by type.

Related Foundation Skills

Extension Registry

For understanding how extensions are registered

Reference skill:

umbraco-extension-registry

Umbraco Element

For creating picker UIs Reference skill: umbraco-umbraco-element Workflow Fetch docs - Use WebFetch on the URLs above Ask questions - What extension types to pick? How to use selection? Generate files - Create element with manifest picker Explain - Show what was created and how selection works Basic Usage import { html , customElement , state } from '@umbraco-cms/backoffice/external/lit' ; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element' ; import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components' ; @ customElement ( 'my-manifest-picker-example' ) export class MyManifestPickerExampleElement extends UmbLitElement { @ state ( ) private _selectedManifest = '' ;

onChange

( event : { target : UmbInputManifestElement } ) { const selectedManifest = event . target . value ; this . _selectedManifest = selectedManifest ?. value ?? '' ; } override render ( ) { return html `

${ this . _selectedManifest ? html `

Selected: ${ this . _selectedManifest }

: '' } </uui-box> ; } } Dynamic Extension Type Selection import { html , customElement , state , when , nothing } from '@umbraco-cms/backoffice/external/lit' ; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry' ; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element' ; import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components' ; import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui' ; interface Option { name : string ; value : string ; selected : boolean ; } @ customElement ( 'my-extension-browser' ) export class MyExtensionBrowserElement extends UmbLitElement {

options

: Option [ ] = [ ] ; @ state ( ) private _selectedExtensionType = 'dashboard' ; @ state ( ) private _selectedManifest = '' ; constructor ( ) { super ( ) ; // Build list of available extension types from registry this . observe ( umbExtensionsRegistry . extensions , ( extensions ) => { const types = [ ... new Set ( extensions . map ( ( x ) => x . type ) ) ] ; this .

options

= types . sort ( ) . map ( ( x ) => ( { name : x , value : x , selected : x === this . _selectedExtensionType , } ) ) ; } ) ; }

onTypeSelect

( event : UUISelectEvent ) { this . _selectedManifest = '' ; this . _selectedExtensionType = event . target . value as string ; }

onManifestChange

( event : { target : UmbInputManifestElement } ) { const selectedManifest = event . target . value ; this . _selectedManifest = selectedManifest ?. value ?? '' ; } override render ( ) { return html ` <uui-select slot="editor" label="Select type" placeholder="Select type..." .options= ${ this .

options

} @change= ${ this .

onTypeSelect

}

${ when ( this . _selectedExtensionType , ( ) => html ` <umb-property-layout label="Select Extension" description="Pick a ${ this . _selectedExtensionType } "

, ( ) => nothing ) } ${ when ( this . _selectedManifest , ( ) => html

, ( ) => nothing ) } </uui-box> ; } } Getting All Extension Types import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry' ; // In your element constructor this . observe ( umbExtensionsRegistry . extensions , ( extensions ) => { // Get unique extension types const types = [ ... new Set ( extensions . map ( ( x ) => x . type ) ) ] ; console . log ( 'Available types:' , types ) ; // Filter by type const dashboards = extensions . filter ( ( x ) => x . type === 'dashboard' ) ; console . log ( 'Dashboards:' , dashboards ) ; // Get extension by alias const specific = extensions . find ( ( x ) => x . alias === 'Umb.Dashboard.Welcome' ) ; console . log ( 'Specific extension:' , specific ) ; } ) ; Common Extension Types Type Description dashboard Section dashboards workspace Entity workspaces workspaceView Views within workspaces workspaceAction Workspace action buttons propertyEditorUi Property editor UIs propertyEditorSchema Property editor schemas entityAction Context menu actions tree Navigation trees treeItem Tree item renderers section Backoffice sections sectionView Section views headerApp Header bar apps modal Modal dialogs condition Extension conditions UmbInputManifest Properties Property Type Description extensionType string The type of extension to pick from value ManifestBase | undefined The selected manifest Events Event Detail Description change { target: UmbInputManifestElement } Fired when selection changes Accessing Selected Manifest Data

onManifestChange

( event : { target : UmbInputManifestElement } ) { const manifest = event . target . value ; if ( manifest ) { console . log ( 'Alias:' , manifest . alias ) ; console . log ( 'Name:' , manifest . name ) ; console . log ( 'Type:' , manifest . type ) ; console . log ( 'Full manifest:' , manifest ) ; } } Use Cases Configuration screens - Let users select which dashboard/workspace to show Extension management - Browse and inspect registered extensions Dynamic routing - Configure navigation targets Condition configuration - Select conditions to apply Package development - Test extension registration Best Practices Clear selection - Reset _selectedManifest when type changes Handle undefined - Check if value exists before accessing properties Use property layout - Wrap in for consistent styling Show feedback - Display selected manifest alias/name to confirm selection Sort types - Sort extension type options alphabetically for usability That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.