Merge pull request #2155 from umbraco/v14/feature/example-custom-view

Feature: example custom view

Author: nielslyngsoe

examples/block-custom-view/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/block-custom-view/block-custom-view.ts

@@ -0,0 +1,42 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import type { UmbBlockDataType, UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('example-block-custom-view')
+export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {
+	//
+	@property({ attribute: false })
+	content?: UmbBlockDataType;
+
+	override render() {
+		return html`
+			<div class="uui-text">
+				<h5 class="uui-text">My Custom View</h5>
+				<p>Headline: ${this.content.headline}</p>
+			</div>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+				box-sizing: border-box;
+				background-color: #dddddd;
+				border-radius: 9px;
+				padding: 12px;
+			}
+		`,
+	];
+}
+
+export default ExampleBlockCustomView;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-block-custom-view': ExampleBlockCustomView;
+	}
+}

examples/block-custom-view/index.ts

@@ -0,0 +1,12 @@
+import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestBlockEditorCustomView> = [
+	{
+		type: 'blockEditorCustomView',
+		alias: 'Umb.blockEditorCustomView.TestView',
+		name: 'Block Editor Custom View Test',
+		element: () => import('./block-custom-view.js'),
+		forContentTypeAlias: 'headlineUmbracoDemoBlock',
+		forBlockEditor: 'block-grid',
+	},
+];