umbraco-modern-guide

Umbraco Modern Development (v14+)

Architecture Overview

Umbraco 14+ uses a modern architecture:

• Backoffice: Lit-based web components
• API: Content Delivery API and Management API
• Caching: HybridCache (v15+)
• .NET: 8.0+ (9.0 for v15, 9.0/10.0 for v16)

Lit Property Editor

Basic Property Editor

// App_Plugins/MyPackage/property-editors/color-picker.element.ts
import { LitElement, html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-color-picker')
export class MyColorPicker extends LitElement implements UmbPropertyEditorUiElement {
    @property({ type: String })
    value: string = '#000000';

    @state()
    private _colors: string[] = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];

    static styles = css`
        :host {
            display: block;
        }
        .color-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
        }
        .color-swatch {
            width: 40px;
            height: 40px;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }
        .color-swatch.selected {
            border-color: var(--uui-color-selected);
        }
    `;

    render() {
        return html`
            <div class="color-grid">
                ${this._colors.map(color => html`
                    <button
                        class="color-swatch ${this.value === color ? 'selected' : ''}"
                        style="background-color: ${color}"
                        @click=${() => this.#selectColor(color)}
                    ></button>
                `)}
            </div>
            <uui-input
                type="text"
                .value=${this.value}
                @change=${this.#onInputChange}
                placeholder="#RRGGBB"
            ></uui-input>
        `;
    }

    #selectColor(color: string) {
        this.value = color;
        this.#dispatchChange();
    }

    #onInputChange(e: Event) {
        const input = e.target as HTMLInputElement;
        this.value = input.value;
        this.#dispatchChange();
    }

    #dispatchChange() {
        this.dispatchEvent(new UmbPropertyValueChangeEvent());
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'my-color-picker': MyColorPicker;
    }
}