Loading...
Loading...
Implement dynamic root origins and query steps in Umbraco backoffice using official docs
npx skill4agent add umbraco/umbraco-cms-backoffice-skills umbraco-dynamic-rootimport type { ManifestDynamicRootOrigin } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestDynamicRootOrigin = {
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.SiteRoot',
name: 'Site Root Origin',
meta: {
originAlias: 'SiteRoot',
label: 'Site Root',
description: 'Start from the root of the current site',
icon: 'icon-home',
},
};
export const manifests = [manifest];import type { ManifestDynamicRootQueryStep } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestDynamicRootQueryStep = {
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.NearestBlog',
name: 'Nearest Blog Query Step',
meta: {
queryStepAlias: 'NearestBlog',
label: 'Nearest Blog',
description: 'Find the nearest blog ancestor',
icon: 'icon-article',
},
};
export const manifests = [manifest];import type { ManifestDynamicRootOrigin, ManifestDynamicRootQueryStep } from '@umbraco-cms/backoffice/extension-registry';
const originManifests: ManifestDynamicRootOrigin[] = [
{
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.CurrentPage',
name: 'Current Page Origin',
meta: {
originAlias: 'CurrentPage',
label: 'Current Page',
description: 'Start from the page being edited',
icon: 'icon-document',
},
},
{
type: 'dynamicRootOrigin',
alias: 'My.DynamicRootOrigin.Parent',
name: 'Parent Page Origin',
meta: {
originAlias: 'Parent',
label: 'Parent Page',
description: 'Start from the parent of current page',
icon: 'icon-arrow-up',
},
},
];
const queryStepManifests: ManifestDynamicRootQueryStep[] = [
{
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.Children',
name: 'Children Query Step',
meta: {
queryStepAlias: 'Children',
label: 'Children',
description: 'Get all child pages',
icon: 'icon-tree',
},
},
{
type: 'dynamicRootQueryStep',
alias: 'My.DynamicRootQueryStep.Ancestors',
name: 'Ancestors Query Step',
meta: {
queryStepAlias: 'Ancestors',
label: 'Ancestors',
description: 'Get ancestor pages',
icon: 'icon-navigation-up',
},
},
];
export const manifests = [...originManifests, ...queryStepManifests];// Example C# implementation for a custom origin
public class SiteRootDynamicRootOrigin : IDynamicRootOrigin
{
public string OriginAlias => "SiteRoot";
public Task<Guid?> GetOriginAsync(Guid contentKey, string? entityType)
{
// Return the site root GUID based on the content's position
// Implementation depends on your site structure
return Task.FromResult<Guid?>(GetSiteRootForContent(contentKey));
}
}
// Example C# implementation for a custom query step
public class NearestBlogQueryStep : IDynamicRootQueryStep
{
public string QueryStepAlias => "NearestBlog";
public Task<IEnumerable<Guid>> ExecuteAsync(Guid originKey, string? entityType)
{
// Find nearest blog ancestor from the origin
// Return matching content GUIDs
return Task.FromResult(FindNearestBlogAncestors(originKey));
}
}
// Register in Composer
public class DynamicRootComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
builder.DynamicRootSteps()
.AddOrigin<SiteRootDynamicRootOrigin>()
.AddQueryStep<NearestBlogQueryStep>();
}
}| Property | Description |
|---|---|
| Unique identifier matching backend implementation |
| Display name in picker configuration |
| Help text explaining the origin |
| Icon shown in configuration UI |
| Property | Description |
|---|---|
| Unique identifier matching backend implementation |
| Display name in picker configuration |
| Help text explaining the query step |
| Icon shown in configuration UI |