Confirm Dialog Component

Overview

The confirm dialog component gives you the ability to present your users with a modal pop-up window containing a title, HTML formatted message and confirmation/cancel buttons.

When presented to a user, the contents of the screen are shrouded in gray, forcing the user to act on the dialog. The user can click one of the buttons presented, or hit the escape key on the keyboard to dismiss the dialog.

Required Imports

To use the icon component in your component, you must import the Dialog and MpageConfirmComponent from @clinicaloffice/mpage-developer. You must also include the MpageConfirmComponent in your component imports array in your component TypeScript file and inject the Dialog component into your class.

e.g. your-component.ts

import {Dialog, MpageConfirmComponent} from '@clinicaloffice/mpage-developer';

@Component({
    selector: 'your-component',
    imports: [MpageConfirmComponent],
    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(MpageConfirmComponent,
        {
            width: '50%',
            data: {
                title: 'Save Changes?',
                icon: 'add_task',
                text: '<h2>Do you wish to save changes to your default preferences?</h2><p>It would be a good idea</p>',
                showCancelButton: true
            }
          }
    );
}

Custom Properties

You will customize the content that appears in your dialog with the data object. This object is a simple object with several optional properties defined.

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 be a string containing the values "true" or "false" if the confirm or cancel buttons are clicked on the dialog. 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.

Other Settings

The confirm dialog uses the MPage Developer Dialog service to render content. By default, the dialog is rendered as a modal dialog. You can also use the modal and closeTimer method properties found in the Dialog service if you wish to have the dialog appear as a non-modal dialog. Please refer to the Dialog documentation for more information.

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.