Using custom dialog elements with the Aurelia DialogService

Help Requests
1

Hi all,

I’m working on a project that’s using Aurelia (aurelia 1), one of the things we’re using in our applications are dialogs.

Looking at the documentation Aurelia Dialogs, I see there is a topic about the default resources ( <ux-dialog> , <ux-dialog-header> etc). The docs also explain it’s possible to configure the plugin in such a way these default resources won’t be registered.

The only thing I could not find/figure out is how to use my own custom dialog elements.
Recently someone made a dialog template using f.e. <foo-dialog>, <foo-dialog-header>. Is it possible to use these templates in combination with the Aurelia DialogService?

I know I can specify the viewModel of the dialog to open. But this is not something that seems to work out of the box :blush:

Any help/ideas would be appreciated. If I need to provide more code/info, just let me know.

Thanks in advance!

1 Like
2

In the template of the view model that will be used as the dialog, those elements <foo-dialog/> etc can be required and used like normal, or they can also be registered globally and used everywhere. Did you try that?

1 Like
3

In case you want to retry the viewModel option, please note this GitHub comment.
DialogService is directly injected from aurelia-dialog

        this.dialogService.open({
            viewModel: PLATFORM.moduleName("<path to viewModel>")
        });

HTH

2 Likes
4

I think I got it working. Thanks for you help!

Ofcourse it helps if you inject a DialogController in your dialog :slight_smile:

Now I’m trying to figure out the result returned by the DialogService. Not sure how to check if the dialog was cancelled, without rejecting the promise and having to use a try -> catch.

I can only read the close result after checking dialogResult.wasCancelled, but this is done before the dialog is actually closed, so it’s always ends up in the path where we’re saving.
The BarDialog has 3 buttons:

  • Cancel -> dialogController.cancel()
  • Save (as default) -> dialogController.ok(true)
  • Save (as non-default) -> dialogController.ok(false) 
const dialogResult = await this.dialogService.open({ viewModel: BarDialog});
if (!dialogResult.wasCancelled) {
    const closeResult = await dialogResult.closeResult;
    const saveAsDefault = closeResult.output as boolean;
    //  function that saves stuff.
    await this.saveStuff(saveAsDefault);
}

Is it possible to check if the cancel button was pressed without adding the rejectOnCancel setting?
If that’s not possible, I can always implement the try -> catch.

Any ideas would be appreciated, thanks!

1 Like
5

After looking at the documentation again, I noticed there was another way to use the DialogService.
If I implement it by using the whenClosed() method, it works like a charm.

await this.dialogService.open({ viewModel: BarDialog}).whenClosed(async (response) => {
    if (!response.wasCancelled) {
        const saveAsDefault = response.output as boolean;
        //  function that saves stuff.
        await this.saveStuff(saveAsDefault);
    }
});
2 Likes