diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md index 469cd2746f1..31fa0a5a76e 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md @@ -8,11 +8,17 @@ The Block Custom View extension type lets you define a Web Component for represe ## Build a Custom View +{% hint style="info" %} +Before creating a Block Custom View, make sure you are familiar with the [Extension Registry in Umbraco](../../../customizing/extending-overview/extension-registry/register-extensions.md). +You can also refer to the tutorial [Custom Views for Block List](../../../tutorials/creating-custom-views-for-blocklist.md) for a step-by-step guide. +{% endhint %} + 1. Make a Document Type with a Property using a Block Editor of choice. 2. Configure at least one Block Type on the Block Editor. 3. Ensure the Element Type of the Blocks Content Model has a property using `headline` as the Property Alias. 4. Take note of the Element Type Alias as you will use that in the next step. -5. Add the following code to the `umbraco-package.json` file: +5. Create a Settings Model for the above Element Type and add a property with alias `theme`. +6. Add the following code to the `umbraco-package.json` file: {% code title="umbraco-package.json" %} ```json @@ -25,11 +31,12 @@ The Block Custom View extension type lets you define a Web Component for represe "type": "blockEditorCustomView", "alias": "my.blockEditorCustomView.Example", "name": "My Example Custom View", - "element": "/App_Plugins/welcome-dashboard/dist/example-block-custom-view.js", - "forContentTypeAlias": "{Insert Element Type Alias here}" + "element": "/App_Plugins/block-custom-view/dist/example-block-custom-view.js", + "forContentTypeAlias": "myElementTypeAlias", // insert element type alias here + "forBlockEditor": "block-list" // insert block type(s) here } ] - +} ``` {% endcode %} @@ -48,10 +55,14 @@ export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implemen @property({ attribute: false }) content?: UmbBlockDataType; + @property({ attribute: false }) + settings?: UmbBlockDataType; + render() { return html`
Headline: ${this.content?.headline}
+Theme: ${this.settings?.theme}
`; } diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/README.md b/17/umbraco-cms/customizing/extending-overview/extension-types/README.md index 6cfd32a3077..2b452c8eaac 100644 --- a/17/umbraco-cms/customizing/extending-overview/extension-types/README.md +++ b/17/umbraco-cms/customizing/extending-overview/extension-types/README.md @@ -23,7 +23,7 @@ The `backofficeEntryPoint` extension type is used to execute JavaScript upon ini ### [Block Custom View](block-custom-view.md) -The `blockEditorCustomView` extension type is used to define a custom web component for representing blocks inside the Umbraco block grid property editor. +The `blockEditorCustomView` extension type is used to define a custom web component for representing blocks inside the Umbraco block property editor. ### [Bundle](bundle.md)