yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Entity Data Picker: Data editor and value converter (#20661)

Browse Source 
* change property value to an object

* add const for picker data source type

* Add value editor and converter server-side

* register schema for property editor + move settings ui

---------

Co-authored-by: kjac <kja@umbraco.dk>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
This commit is contained in:
Mads Rasmussen
2025-10-27 16:40:16 +01:00
committed by GitHub
parent 1615740bdf
commit a3d6b4f844
16 changed files with 365 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/examples/picker-data-source/index.ts
View File

@@ -1,7 +1,9 @@
import { UMB_PICKER_DATA_SOURCE_TYPE } from '@umbraco-cms/backoffice/picker-data-source';
export const manifests: Array<UmbExtensionManifest> = [
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.CustomPickerCollection',
name: 'Custom Picker Collection Data Source',
api: () => import('./example-custom-picker-collection-data-source.js'),
@@ -13,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.CustomPickerTree',
name: 'Custom Picker Tree Data Source',
api: () => import('./example-custom-picker-tree-data-source.js'),
@@ -25,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.DocumentPicker',
name: 'Document Picker Data Source',
api: () => import('./example-document-picker-data-source.js'),
@@ -53,7 +55,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.MediaPicker',
name: 'Media Picker Data Source',
api: () => import('./example-media-picker-data-source.js'),
@@ -65,7 +67,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.LanguagePicker',
name: 'Language Picker Data Source',
api: () => import('./example-language-picker-data-source.js'),
@@ -77,7 +79,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.WebhookPicker',
name: 'Webhook Picker Data Source',
api: () => import('./example-webhook-picker-data-source.js'),
@@ -89,7 +91,7 @@ export const manifests: Array<UmbExtensionManifest> = [
},
{
type: 'propertyEditorDataSource',
dataSourceType: 'picker',
dataSourceType: UMB_PICKER_DATA_SOURCE_TYPE,
alias: 'Umb.PropertyEditorDataSource.UserPicker',
name: 'User Picker Data Source',
api: () => import('./example-user-picker-data-source.js'),

1
src/Umbraco.Web.UI.Client/src/packages/core/picker-data-source/constant.ts Normal file
View File

@@ -0,0 +1 @@
export const UMB_PICKER_DATA_SOURCE_TYPE = 'Umb.DataSourceType.Picker';

1
src/Umbraco.Web.UI.Client/src/packages/core/picker-data-source/index.ts
View File

@@ -1,4 +1,5 @@
export * from './collection-data-source/is-picker-collection-data-source.guard.js';
export * from './constant.js';
export * from './searchable-data-source/is-picker-searchable.data-source.guard.js';
export * from './tree-data-source/is-picker-tree-data-source.guard.js';
export type * from './types.js';

3
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/entry-point.ts
View File

@@ -1,5 +1,6 @@
import { manifests as entityDataPickerManifests } from './manifests.js';
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
import { UMB_PICKER_DATA_SOURCE_TYPE } from '@umbraco-cms/backoffice/picker-data-source';
import type { ManifestPropertyEditorDataSource } from '@umbraco-cms/backoffice/property-editor-data-source';
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
@@ -11,7 +12,7 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
extensionRegistry
.byTypeAndFilter<'propertyEditorDataSource', ManifestPropertyEditorDataSource>(
'propertyEditorDataSource',
(manifest) => manifest.dataSourceType === 'picker',
(manifest) => manifest.dataSourceType === UMB_PICKER_DATA_SOURCE_TYPE,
)
.subscribe((pickerPropertyEditorDataSource) => {
if (pickerPropertyEditorDataSource.length > 0 && !initialized) {

21
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/Umbraco.EntityDataPicker.ts Normal file
View File

@@ -0,0 +1,21 @@
export const manifests: Array<UmbExtensionManifest> = [
{
type: 'propertyEditorSchema',
name: 'Entity Data Picker',
alias: 'Umbraco.EntityDataPicker',
meta: {
defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.EntityDataPicker',
settings: {
properties: [
{
alias: 'validationLimit',
label: 'Amount',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
weight: 100,
},
],
},
},
},
];

4
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts
View File

@@ -128,7 +128,7 @@ export class UmbEntityDataPickerPropertyEditorUIElement
// Ensure the value is of the correct type before setting it.
if (Array.isArray(selection)) {
this.value = selection;
this.value = { ids: selection };
this.dispatchEvent(new UmbChangeEvent());
} else {
throw new Error('Selection is not of type array. Cannot set property value.');
@@ -137,7 +137,7 @@ export class UmbEntityDataPickerPropertyEditorUIElement
override render() {
return html`<umb-input-entity-data
.selection=${this.value ?? []}
.selection=${this.value?.ids ?? []}
.dataSourceAlias="${this._dataSourceAlias}"
.dataSourceConfig=${this._dataSourceConfig}
.min=${this._min}

50
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/manifests.ts
View File

@@ -1,33 +1,23 @@
import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';
import { manifests as schemaManifests } from './Umbraco.EntityDataPicker.js';
import { UMB_PICKER_DATA_SOURCE_TYPE } from '@umbraco-cms/backoffice/picker-data-source';
const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.EntityDataPicker',
name: 'Entity Data Picker Property Editor UI',
element: () => import('./entity-data-picker-property-editor-ui.element.js'),
meta: {
label: 'Entity Data Picker',
icon: 'icon-page-add',
group: 'pickers',
propertyEditorSchemaAlias: 'Umbraco.Plain.Json',
supportsReadOnly: true,
supportsDataSource: {
enabled: true,
forDataSourceTypes: ['picker'],
},
settings: {
properties: [
// TODO: Move this to schema manifest when server can validate it
{
alias: 'validationLimit',
label: 'Amount',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
weight: 100,
},
],
export const manifests: Array<UmbExtensionManifest> = [
{
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.EntityDataPicker',
name: 'Entity Data Picker Property Editor UI',
element: () => import('./entity-data-picker-property-editor-ui.element.js'),
meta: {
label: 'Entity Data Picker',
icon: 'icon-page-add',
group: 'pickers',
propertyEditorSchemaAlias: 'Umbraco.EntityDataPicker',
supportsReadOnly: true,
supportsDataSource: {
enabled: true,
forDataSourceTypes: [UMB_PICKER_DATA_SOURCE_TYPE],
},
},
},
};
export const manifests: Array<UmbExtensionManifest> = [manifest];
...schemaManifests,
];

4
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/types.ts
View File

@@ -1 +1,3 @@
export type UmbEntityDataPickerPropertyEditorValue = Array<string>;
export type UmbEntityDataPickerPropertyEditorValue = {
ids: Array<string>;
};