Patient Search Component

Overview

The patient search component will present your users with an interactive patient or encounter search window. Similar to the patient search functionality in PowerChart, users can search for a specific patient or encounter directly from your MPage.

The patient search window can be embedded directly into your MPage content and will resize itself to the full height and width of its parent container. It can also be triggered in a modal dialog window.

Required Imports - Embedded

To use the patient search component as an embedded component, you must import the MpagePatientSearchComponent from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

import {MpagePatientSearchComponent} from '@clinicaloffice/mpage-developer';

@Component({
    selector: 'your-component',
    imports: [MpagePatientSearchComponent],
    templateUrl: './your-component.component.html',
    styleUrl: './your-component.component.scss',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

You can directly add the patient search component to your MPage through the <mpage-patient-search /> HTML element.

The result of your patient search will be emitted with the searchResult emitter as shown in the example below.

<mpage-patient-search [personAlias]="['MRN']" [birthDate]="true" (searchResult)="mySearchResult = $event" />

Required Imports - Modal Dialog

If you plan on presenting the patient search as a pop-up modal window, you can do so with an Angular CDK Dialog. For MPage components running inside the Cerner MPage Component Framework, it is important to understand that the Angular CDK Dialog exists at the document root level and not inside the DOM of your MPage component.

When using the MPage Developer Component GitHub template, all services associated to your MPage are not available outside your self-contained MPage Component. This means that you need to do some additional work and pass any services used in a component to the dialog for them to work. For the patient search component, this means we will need to reference MPageService, CustomService, and CodeValueService.

import {MPageService, CodeValueService, CustomService, MpagePatientSearchComponent} from '@clinicaloffice/mpage-developer';
import {Dialog} from '@angular/cdk/dialog';

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

Inside your code (likely through a button), you would trigger the dialog through a protected or public method. The first step is to open the MpagePatientSearchComponent with the Dialog open method and assign it to a reference object.

Next, we need to assign our three services to the matching objects in MpagePatientSearchComponent.

If you want to change any patient search options, you can do so by assigning the values directly in the dialog (e.g. dialogRef.componentInstance.fullName.set(true)).

The final step is to execute the init() method in the dialog and to subscribe to the closed method.

protected assignVisit(): void {
    const dialogRef = this.dialog.open(MpagePatientSearchComponent);

    if (dialogRef.componentInstance) {
        dialogRef.componentInstance.MPage = this.MPage;
        dialogRef.componentInstance.customService = this.customService;
        dialogRef.componentInstance.codeValueService = this.codeValueService;

        dialogRef.componentInstance.fullName.set(true);
        dialogRef.componentInstance.birthDate.set(true);
        dialogRef.componentInstance.sex.set(true);
        dialogRef.componentInstance.personAlias.set(['MRN']);
        dialogRef.componentInstance.encntrAlias.set(['FIN NBR']);

        dialogRef.componentInstance.init();
    }

    dialogRef.closed.subscribe((response: any) => {
        // Assign response to whatever you want. It will contain the full person or encounter row returned from the CCL script
    });
  }

Options

All input options listed below can be accessed directly in the dialog component reference if displayed as a dialog. For HTML embedded templates, pass the options directly inside the HTML element.

Output Values

The output returned as dialog response data or as the searchResult emitter will either be in the format of the person row shown in the search window, or the person row combined with the encounter row. The content will be based on the data populated in 1co5_enc_search_data or your own custom script.

The following fields are available in the result object returned from the patient search component.

Person

personId, name, vip, mrn, sex, birthDate, age, homeAddress, phoneNumbers, ethnicGroup

Encounter

personId, name, vip, mrn, sex, birthDate, age, homeAddress, phoneNumbers, ethnicGroup, encntrId, finNumber, facility, nurseUnit, roomBed, regDtTm, dischDtTm, medicalService, encounterType, attendingPhysician

Replacing 1co5_enc_search_data.prg with your own script

The standard 1co5_enc_search_data.prg script is equipped to present your users with some common fields typical of an encounter search. Your site may want other fields displayed to users such as additional providers, patient address or other data not included in the standard script.

Creating your own person search data script is simple. 1co5_enc_search_data.prg has been included in the combined CCL package file as well as made available as an independent file in your CCL source code library. You are encouraged to copy this file and make a new version with your desired fields.

The 1co5_enc_search_data script makes use of the patient_source record structure to determine which person/encounter records are to be used. With a list of the desired person and encounter records, the CCL script simply collects the appropriate data and populates the rCustom record structure shown below.

record rCustom (
    1 person[*]
        2 person_id             = f8
        2 name                  = vc
        2 vip                   = vc
        2 mrn                   = vc
        2 sex                   = vc
        2 birth_date            = dq8
        2 age                   = vc
        2 home_address          = vc
        2 phone_numbers         = vc
        2 ethnic_group          = vc
    1 encounter[*]
        2 encntr_id             = f8
        2 person_id             = f8
        2 fin_number            = vc
        2 facility              = vc
        2 nurse_unit            = vc
        2 room_bed              = vc
        2 reg_dt_tm             = dq8
        2 disch_dt_tm           = dq8
        2 medical_service       = vc
        2 encounter_type        = vc
        2 attending_physician   = vc
)

Styling

All styling for the patient search is controlled through the default table and input field settings.