Custom Block Grid Views: Too Complicated

Questions
,
49

I haven’t read the entire discussion from front to back, so maybe I’m glossing over important things or doing something that was already done, but I needed to display a block in the RTE and that obviously needed a custom view. And although I understand certain concerns, I really didn’t find it too complicated. So I thought I post the example here without using any scaffolding or something that need to compile. It’s really just a file and a registration. So there is no need for a package.json, no need to use vite.

It’s just a button (knop in Dutch) you can add to the RTE and it simply has a link picker:

image
image481×268 8.37 KB

image
image473×252 6.41 KB

And it should just be displayed as a button in the RTE, using the link name as the text:

image
image1033×242 10 KB

This is the view. It uses stuff that is already available in Umbraco, so no need for other NPM packages.
wwwroot/App_Plugins/ProudNerds.Customer/block-custom-view-button.js

import { html, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

export class BlockCustomViewButton extends UmbElementMixin(UmbLitElement) {

    static get properties() {
        return {
            content: { type: Object, attribute: false },
            settings: { type: Object, attribute: false }
        };
    }

    render() {
        const buttonText = this.content?.buttonLink[0]?.name || 'Button';

        return html`
            <div class="button-container">
                <div class="button">
                    ${buttonText}
                </div>
            </div>
        `;
    }

    static get styles() {
        return [
            css`
            .button-container {
                text-align:center;
            }    
            
            .button {
                    display: inline-block;
                    margin: 1rem;
                    padding: 1rem 2rem;
                    text-align: center;
                    background-color: #002526;
                    color: #fff;
                    border-radius: 4px;
                }
            `
        ];
    }
}

// Register the custom element without decorators
customElements.define('block-custom-view-button', BlockCustomViewButton);

export default BlockCustomViewButton;

You can access all property and settings data easily.

The only other thing I needed to do was register it. Simply use the alias to connect the view to the block.
wwwroot/App_Plugins/ProudNerds.Customer/umbraco-package.json

{
  "name": "Customer extensions",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "blockEditorCustomView",
      "alias": "proudnerds.customer.blockview.button",
      "name": "Button block editor custom view",
      "element": "/App_Plugins/ProudNerds.Customer/block-custom-view-button.js",
      "forContentTypeAlias": "buttonElementGlobal"
    }
  ]
}

So I hope this brings something (new?) to the table. And I especially hope that you see that it doesn’t require a massive scaffolding and implementing an entire build pipeline with vite just for this.

3 Likes