Dialog Service

Overview

The dialog services grants the ability to render a component as a modal or modeless dialog window.

There are two tasks to consider when using custom dialog components. The first task is to create your custom dialog component, and the second is to trigger the dialog from a component with associated data and the ability to handle any responses returning from the dialog component.

The ConfirmDialog is an example of a dialog that was created using the dialog service.

Custom Dialog Component

Overview

A custom dialog component starts the same as any other Angular component. Simply create a new component and add the two required references to an HTMLDialogElement input called dialogRef and an input called data. You can use the older @Input() method or Angular signal inputs in your component.

Import

import {ChangeDetectionStrategy, Component, input} from '@angular/core';

Input Assignment

Your component must have the following public inputs regardless if you use them or not.

export class YourDialogComponent {
  public dialogRef = input<HTMLDialogElement>();
  public data = input<any>();
}

The dialogRef input is a reference to the dialog service that calls your dialog component and offers a single method called close that can be used to close the dialog and optionally return data to the calling component. The data input can contain any data you wish to send into your dialog component.

Other than these two inputs, your component will function like any other Angular component, allowing calls to your MPage services or other components (e.g. MPageTable).

Methods

Executing the close method will immediately close the dialog window and return to the calling component.

You can optionally pass a string value back to your calling component. If you need to send a JavaScript object back to your component, you can wrap your result in a JSON.stringify call.

this.dialogRef.close(JSON.stringify(this.returnObjectData));

Styling

You are free to use whatever CSS styling you wish inside your dialog component. That, said, your dialog will be contained within a wrapper <div> element that will use the styling described at the bottom of this page.

Using Your Custom Dialog Component

To use your custom dialog in a component, you must import both the Dialog service and your custom component. Your custom component also must be assigned in the imports array of your component template and you need to inject the Dialog service into an object variable.

import {Dialog} from '@clinicaloffice/mpage-developer';
import {YourDialogComponent} from ....;

@Component({
    selector: 'your-component',
    imports: [YourDialogComponent],
    templateUrl: './your-component.component.html',
    styleUrl: './your-component.component.scss',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
    private dialog = inject(Dialog);
}

Usage

The confirm dialog component is different from other MPage Developer components in that you do not access it with an HTML selector. Instead, you pass the MpageConfirmComponent object to the Dialog service along with display properties.

The code shown below could be triggered by a button click or some other action in your MPage.

public openDialog(): void {
    const dialogRef = this.dialog.open(YourDialogComponent,
        {
            width: '50%',
            data: { ...whatever you want...  }
          }
    );
}

Handling Button Clicks

Often you will want to take some type of action once the confirm or cancel button has been clicked on your dialog. This can be easily accomplished by adding an event listener to the close() event of your dialog component.

The close() listener should be placed immediately after the dialog.open assignment statement.

dialogRef.addEventListener('close', () => {
    console.log(dialogRef.returnValue);
});

The value returned to returnValue will depend on what you pass back from your custom component. If the escape key is pressed, an empty string will be returned. You can use JSON.parse(dialogRef.returnValue) to convert your result from a string to an object if desired provided you test for an empty string first.

Methods

Styling

The table below describes the styles specific to the MPage confirm component that you can customize. These changes are global to your MPage. If you are building a component to be used in the Cerner MPage Component Framework, these styles are specific to your component and changes will have no impact on other Clinical Office components displayed on the same page.