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....
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more