Changing the backoffice collection toolbar (adding additional filters)

WittySailboat · May 2, 2025, 3:14pm

I would love the ability to add other filters to a collection. For example, if my documents have a status dropdown value, I would like to be able to filter by status in the collection view.

However, I have no idea where to start with this. I’ve looked through the documentation and scoured the github for a sign that it is possible, but I’m not coming up with anything. The only thing I’ve been able to find is that there is a file here showing the document collection element and it renders the collection toolbar. But I’m not seeing a way to edit what is in the toolbar or add filters.

github.com/umbraco/Umbraco-CMS

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts

1c1035e1e

import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';

@customElement('umb-document-collection')
export class UmbDocumentCollectionElement extends UmbCollectionDefaultElement {
	protected override renderToolbar() {
		return html`
			<umb-collection-toolbar slot="header">
				<umb-collection-filter-field></umb-collection-filter-field>
			</umb-collection-toolbar>
		`;
	}
}

/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
export default UmbDocumentCollectionElement;

export { UmbDocumentCollectionElement as element };

declare global {

This file has been truncated. show original

WittySailboat · May 5, 2025, 5:12pm

I also found this context file, but do I have to create my own context with a custom filter model? I’m just not quite sure where to go from here.

github.com/umbraco/Umbraco-CMS

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts

1c1035e1e

import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js';
import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './constants.js';
import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext<
	UmbDocumentCollectionItemModel,
	UmbDocumentCollectionFilterModel
> {
	constructor(host: UmbControllerHost) {
		super(host, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS);
	}
}

export { UmbDocumentCollectionContext as api };