MPage Tree Component

Overview

The MPage Tree Component gives you the ability to render a tree control, giving your users the ability to quickly navigate through a hierarchical structure such as hospital locations.

The tree component defaults to the location hierarchy, however, using your own CCL script for other sets of data is fairly simple.

Required Imports

To use the tree component in your component, you must import the MpageTreeComponent from @clinicaloffice/mpage-developer and the FormsModule from @angular/forms. You must also include them in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageTreeComponent} from '@clinicaloffice/mpage-developer';
import {FormsModule} from '@angular/forms';

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

Usage

The MPage Tree component requires a numeric array for storage and model binding. This array can be a simple numeric array or an Angular signal.

protected location: number[] = [];                           // Simple numeric array
protected location: WritableSignal<number[]> = signal([]);   // Signal numeric array

Implement the tree component by adding the <mpage-tree></mpage-tree> element to your Angular HTML code and bind it to your numerical array object.

<mpage-tree label="Location" [(ngModel)]="location"></mpage-tree>

When you run your MPage you will see the location tree as a drop-down. On a tree that has no items bound in the tree variable (location) the field will simply display the label "Location". If the bound variable contains valid values, those values will be automatically loaded from Cerner, and populated in your tree control.

If the searchable option has been set, you can search for a tree item and have it highlighted on the tree.

Options

{showUnits:['NURSEUNIT','AMBULATORY'],maxViewLevel:'UNIT'}

Script Parameters

One of the options listed in the options grid is called scriptParams. This object variable should contain any optional code you may want to use in your CCL script.

The default "1co5_location_tree" script uses an object to control what types of units are displayed in the tree, the maximum depth of the tree that can be navigated as well as optional organization security settings.

An example of scriptParams in the location tree is as follows.

scriptParams={showUnits:['NURSEUNIT','AMBULATORY'], maxViewLevel:'UNIT', orgSecurity:true, censusInd:true}

The following table describes each of the available scriptParam values.

CCL Submission of Tree Parameters

Submitting your prompt values is typically done through executing a CustomService load event to your custom CCL script. In the example below, we are passing our "location" array from our example above into the parameters object of our CCL script submission.

this.customService.load({
    customScript: {
        script: [{
            name: '1co_v35_test',
            run: 'pre',
            id: 'test-tree',
            parameters: {
                location: this.location
            }
        }],
        "clearPatientSource":true
    }
});

CCL Script Processing

Inside your CCL script, you must execute 1co5_location_routines:group1 passing in your scriptParam values and the name of your location parameter as shown below.

execute 1co5_location_routines:group1 ^"showUnits":["NURSEUNIT","AMBULATORY"],"maxViewLevel":"UNIT"^, ^location^

This code will populate a record structure called rFilteredLocations that you can now use in your SELECT statements. rFilteredLocations contains three fields, however, the only one meant for script use is the locationCd field, which will either contain ambulatory/nurse unit level code values or bed level code values.

The content of locationCd is directly controlled by the "maxViewLevel" value included in your scriptParams. If "maxViewLevel" is set to "ALL", locationCd will contain the code values representing all beds values selected in your tree. Any other selection will default in the ambulatory/nurse unit level values.

Implementing rFilteredLocations in your CCL script is a simple matter of using the CCL EXPAND function as follows.

declare nNum = i4

select
from    encounter       e
plan e
    where expand(nNum, 1, size(rFilteredLocations->data, 5), e.loc_nurse_unit_cd, rFilteredLocations->data[nNum].location_cd)
with expand=1

Styling

The table below describes the styles specific to the MPage Tree 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.

In addition to the styling above, the tree control is affected by the style settings of the MPage Input and MPage Select components as those components are used by the MPage Tree component.