Suite dialogs

The SuiteDialogModule can be used to open custom Dialogs an Drawers.

A Dialog is shown in the middle of the screen, whereas a Drawer is shown on the left/right side of the screen.

Dialog Contents: UI Component

The contents of our dialog will be displayed using a UI component. This is a normal component, which can inject SUITE_DIALOG_DATA to obtain contextual data provided by the caller when opening the dialog. For example:

// user-dialog/user-dialog.component.ts
@component({
    selector: 'its-user-dialog',
    template: '{{user | json}}'
})
export class UserDialogComponent {
    constructor(
        @Inject(SUITE_DIALOG_DATA)
        public user: User
    ) {}
}

Dialog Lazy Loaded Module

Our UI components usually have dependencies, like SuiteButtonsModule, etc. The Suite Dialogs will lazy load a module which contains all the dependencies of the component to be shown, and declares the component.

The module could look something like this:

// user-dialog/user-dialog.module.ts
@NgModule({
    imports: [
        // [..]
    ],
    declarations: [UserDialogComponent]
})
export class UserDialogModule {}

We will also include a barrels file to quickly expose both, the module and component:

// user-dialog/index.ts
export * from './user-dialog.component.ts';
export * from './user-dialog.module.ts';

Dialog Configuration

In the module where we are gonna open the dialog, we need to declare a configuration for it. We do so by injecting the DialogService:

// user-list.module.ts
@NgModule({
    imports: [SuiteDialogModule]
})
export class UserListModule {
    constructor(dialogService: DialogService) {
        dialogService.registerDialog({
            configurationId: USERS_VIEW_MORE_DIALOG,
            loadModule: () =>
                import('./user-dialog').then((m) => ({
                    module: m.UserDialogModule,
                    component: m.UserDialogComponent
                }))
        });
    }
}

Opening a dialog

To open/close a dialog, we can use actions. The Suite Dialog Module exposes two action creators that we can use to quickly open/close dialogs.

export const USERS_VIEW_MORE_DIALOG = 'users-view-more';

export const userDialogOpened = createOpenDialogAction(
    '[User List] User dialog opened',
    USERS_VIEW_MORE_DIALOG,
    props<{
        contextData: { correlationId: string };
    }>()
);

export const userDialogClosed = createCloseDialogAction(
    '[User List] User dialog closed'
);

Then we can simply dispatch the actions using the store or a facade.

Non Lazy Dialogs

Sometimes we don't need a lazy dialog, and some times we can't use one. In such cases, we can register the dialog without lazy loading, but using the registering module's component factory resolver. This makes sure the component is resolved with the proper dependencies, like other components it depends on.

// user-list.module.ts
@NgModule({
    imports: [SuiteDialogModule]
})
export class UserListModule {
    constructor(
        dialogService: DialogService,
        resolver: ComponentFactoryResolver
    ) {
        dialogService.registerDialog({
            configurationId: USERS_VIEW_MORE_DIALOG,
            loadModule: resolver.resolveComponentFactory(UserDialogComponent)
        });
    }
}