example

Author: nielslyngsoe

examples/property-editor/README.md

@@ -0,0 +1,7 @@
+# Property Dataset Dashboard Example
+
+This example is a work in progress example of how to write a property editor.
+
+This example covers a few points:
+
+- Using an existing Property Editor Schema

examples/property-editor/index.ts

@@ -0,0 +1,25 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestPropertyEditorUi> = [
+	{
+		type: 'propertyEditorUi',
+		alias: 'example.propertyEditorUi.propertyEditor',
+		name: 'Example Property Editor UI',
+		element: () => import('./property-editor.js'),
+		meta: {
+			label: 'Example Editor',
+			propertyEditorSchemaAlias: 'Umbraco.ListView',
+			icon: 'icon-code',
+			group: 'common',
+			settings: {
+				properties: [
+					{
+						alias: 'customText',
+						label: 'Custom text',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+					},
+				],
+			},
+		},
+	},
+];

examples/property-editor/property-editor.ts

@@ -0,0 +1,20 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+
+@customElement('example-property-editor')
+export class ExamplePropertyEditor extends UmbElementMixin(LitElement) {
+	override render() {
+		return html` <h1 class="uui-h2">Property Editor Example</h1> `;
+	}
+
+	static override styles = [UmbTextStyles];
+}
+
+export default ExamplePropertyEditor;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-property-editor': ExamplePropertyEditor;
+	}
+}

src/packages/data-type/components/property-editor-config/property-editor-config.element.ts

@@ -12,7 +12,7 @@ import { UmbDataPathPropertyValueFilter } from '@umbraco-cms/backoffice/validati
  */
 @customElement('umb-property-editor-config')
 export class UmbPropertyEditorConfigElement extends UmbLitElement {
-	// TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs.
+	// TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. [NL]
 	#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
@@ -53,7 +53,8 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 							property-editor-ui-alias=${property.propertyEditorUiAlias}
 							.config=${property.config}></umb-property>`,
 				)
-			: html`<div>No configuration</div>`;
+			: // TODO: Localize this [NL]
+				html`<div>No configuration</div>`;
 	}
 
 	static override styles = [UmbTextStyles];