Early Adopter's guide to Umbraco v14 - Header apps and modal dialogs

One thing we are being promised with the new Umbraco backoffice is flexability, and the ability to customize things we couldn't really customeize before.

One of those places is the header bar - specifically the buttons to the right.

As with other posts, the code used in this series is avalible on github https://github.com/KevinJump/TimeDashboard

Header bar buttons.

Guess what. you need to define a manifest:

const header : ManifestHeaderApp = {

    type: 'headerApp',
    alias: 'time.header.app',   
    name: 'time app',
    js: () => import('./time-header-element.js'),
    weight: 850,
    meta: {
        label: 'time',
        icon: 'icon-alarm-clock',
        pathname: 'time'
    }
};

Header button element

like other bits of the UI, you then need to define your header element in the file you imported into the manifest.

@customElement('time-header-app')
export class TimeHeaderAppElement extends UmbElementMixin(LitElement) {

    #onTime() {
       // do something when you click
    }

    render() {
        return html`
            <uui-button @click=${this.#onTime}
                look="primary"
                label="time"
                compact>
                <uui-icon name="icon-alarm-clock"></uui-icon>
            </uui-button>
        `
    }

    static styles = css`
        uui-button {
            font-size: 18pt;
            --uui-button-background-color: transparent;
        }
    `
}

and this gives you a icon in the header (the clock is ours)

but at the moment, nothing happens when you click on it, so lets add a simple popup when you do.

popup modal

In Umbraco v8-13 you could use the overlayservice to open up a popup dialog on the page, with Umbraco v14 these dialogs are part of the whole modal domain.

We will probibly go into opening modals, in more depth later on, but for now lets open a simple popup

A modal is again a umbraco element

@customElement('time-header-modal')
export class TimeHeaderModalElement extends UmbModalBaseElement {

    #handleClose() {
    this.modalContext?.reject();
    }

    render() {
        return html`
            <uui-dialog-layout class="uui-text"
                headline="a modal dialog box">
                <p>Some modal things go here</p>

                <uui-button slot="actions" id="close" label="Close"
                    look='primary'  color='danger'
                     @click="${this.#handleClose}">Close</uui-button>

            </uui-dialog-layout>
        `;
    }
}

wrapping our html in a <uui-dialog-layout> tag will give it more of a popup vibe! .

you also need to register your modal with a manifest.

const modal: ManifestModal = {
    type: 'modal',
    alias: 'time.header.modal',
    name: 'time header modal',
    js: () => import('./time-header-modal.js'),
}

Calling th modal

modals can be opened using the ModalManagerContext, if you pass the alias of your modal, then it opens.

so in our #onTime method above we can add:

#onTime() {
    this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (manager) =>{
        manager.open('time.header.modal', {});
    } )
}

And we get a modal!

Closing the modal

the modal itself is responsible for closing the popup, if you don't add that in, you have to reload the browser to break out!

you might have noticed our modal element extended UmbModalBaseElement this element already has a modalContext so we can close the modal by calling reject.

this.modalContext?.reject();

As with other posts, the code used in this series is avalible on github https://github.com/KevinJump/TimeDashboard

So simple modal's are easy, but what about complex ones....