Early Adopter's guide to Umbraco v14 - Opening dialogs.
Tags: umbraco
Published: 2024-02-18 18:26:57

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.

```js
function openIconPicker() {

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

   editorService.iconPicker(options);
}
```
<figcaption>Old school angular dialogs</figcaption>

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.

```ts
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


```ts
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. 

![Open Icon picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5frabtvpphruodov1f9.png)
<figcaption>Opening the icon picker</figcaption>

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

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

![red ship icon and button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfhqvjxb5i7guylwsnxl.png)
<figcaption>Our super amazing icon picker</figcaption>

## 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

```json
{
  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.

```ts
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. ! 

![A Confirm dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wouavtqmgvc94gfrjj5b.png)

<figcaption>Confirm box</figcaption>

Code for calling these dialogs is in our sample repo: 

[dialogworkspace.element.ts](https://github.com/KevinJump/TimeDashboard/blob/master/TimeDashboard.Client/assets/src/workspace/views/dialogworkspace.element.ts)