Early Adopter's guide to Umbraco v14 - Opening dialogs.

On thing you might want to do with your new property editor, workspace or dashboard, it get the user to pick something. That might be an document, a document type, a data type of an icon.

In 'Old School' Umbraco we did this via the editorService.

function openIconPicker() {

   var options = {
       submit: function(model) {
           editorService.close();
       },
       close: function() {
           editorService.close();
       }
   };

   editorService.iconPicker(options);
}

In our "brave new world" the "model manager" has taken on much of the role of the editor service so we can use that to open up-dialogs.

Gettting the modal context.

To work with modals we first have to consume the modal manager context.

constructor() {
    super();
    this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
        this._modalContext = _instance;
    });
}

This will place a reference to the modal manager in our _modalContext value - we can then use that to open things!

Opening the Icon Picker.

So lets assume we have some html markup for our page, (code here) and we have a method wired up to the Click event.

Note! you could have actually just used the IconPicker property editor here. but we are showing how dialogs work, so we went the long way around

async _OpenIconPicker() {

    const pickerContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL);

    const data = await pickerContext?.onSubmit();
    if (!data) return;

    if (data.color) {
        this.color = data.color as string;
    }
    this.icon = data.icon as string;
}

This opens the icon picker for us.

Assuming we then have some markup we can display the icon.

<div>
   <uui-icon name="${this.icon}"
        style="color:var(${extractUmbColorVariable(this.color)})">
   </uui-icon>
   <pre>${this.icon} ${this.color}</pre>
</div>

Opening anything*

So at this point we can pretty much open any of the core dialogs... if only we know there names.

Searching the source some notable modals are:

• UMB_ICON_PICKER_MODAL
• UMB_DATA_TYPE_PICKER_MODAL,
• UMB_DOCUMENT_TYPE_PICKER_MODAL,
• UMB_TEMPLATE_PICKER_MODAL,
• UMB_DICTIONARY_ITEM_PICKER_MODAL,
• UMB_PARTIAL_VIEW_PICKER_MODAL,
• UMB_MEDIA_TREE_PICKER_MODAL
• UMB_BLOCK_CATALOGUE_MODAL,
• UMB_CODE_EDITOR_MODAL,
• UMB_CONFIRM_MODAL

There are many many more, i did a search of the source code for _MODAL, and these are the ones that jumped out at me.

Most of these pickers will just open up if you call them, but almost all of them can also take data to change how they open.

Confirm Modal

One example of a modal that needs options to open up is the confirm modal.

the confirm model, needs a headline, content, and some context for what your buttons will say

{
  headline: `Are you sure`,
  content: 'Do you really want to do the thing here?',
  confirmLabel: 'Confim',
  color: 'danger',
}

you pass this information in as data when you open the modal.

async openConfirm() {

  const confirmContext= this._modalContext?.open(UMB_CONFIRM_MODAL, {
    data: {
      headline: `Are you sure`,
      content: 'Do you really want to do the thing here?',
      confirmLabel: 'Confim',
      color: 'danger',
    }
  });

  confirmContext?.onSubmit()
    .then(()=> {
      console.log('confirm');
    })
    .catch(() => {
      console.log('cancel');
    });
}

And this gives you a nice confirm box. !

Code for calling these dialogs is in our sample repo:

dialogworkspace.element.ts