Clinical Office:MPage Edition
home Home auto_stories Documentation school Training sell Purchase quiz FAQ

New Features in Version 3.5


Activity Log

Our activity log component now reports CCL errors in real-time as they happen.

Date Picker Header 2

A new Date Picker Header called DatepickerHeader2 has been added to allow easier navigation through the use of drop down lists for the month and year.

This new Date Picker Header is also used by the new MPage Calendar control described below.

MPage Calendar

The MPage Calendar control is a simplified method for adding a drop-down calendar prompt to your MPage with binding to a variable.

The following code produces the output shown below.

<mpage-calendar label="Birth Date" [(ngModel)]="dateVariable"></mpage-calendar>

Additional parameters are available to set the CSS style of the control, a hint label and minimum and maximum date values.

MPage Select

The MPage Select component will become your swiss army knife select box. Based on the Angular Material Select Box, the MPage Select component is highly opinionated and tightly integrated with Cerner allowing you the ability to quickly create select boxes with in-memory content, code sets, providers and your own CCL scripts.

This control includes many options such as label, hintLabel, search ahead character limits, CSS styling, CCL script name, code set, search limits and more.


// Basic select list with Name, Birth Date and Gender as options
<mpage-select label="Sort by" [(ngModel)]="selectTest1" [values]="['Name','Birth Date','Gender']"></mpage-select>

// Code Set 72 select with content control and multiple selection
<mpage-select label="Event" [(ngModel)]="selectTest2" [codeSet]="72" [multiple]="true" [searchable]="true"
    [allOption]="true" hintLabel="There are too many events to list them all."></mpage-select>

// All providers
<mpage-select label="Provider" [(ngModel)]="selectTest3" [physicianInd]="true" [multiple]="true"></mpage-select>

// Custom CCL script that returns note types (demo only, script not part of Clinical Office)
<mpage-select label="Note Type" [(ngModel)]="selectTest4" script="1js_all_mp_note_types" [multiple]="true"
                  [searchable]="true" class="w10rem" [searchLimit]="300" [allOption]="true"></mpage-select>

MPage Table

The new MPage Table Component is the most anticipated feature in Clinical Office V3.5. Packed with features, your table can take a JSON documented loaded from CCL (or another external service) and automatically convert the raw data to a usable table.

Some of the features of the MPage Table Component are.

The following line of code converts the contents of the "tableData" object into the table shown below.

<mpage-table [tableData]="tableData" (clickRow)="tableClick($event)" *ngIf="tableData.length > 0" [toolbar]="true"></mpage-table>

JSON Source

Table Output

MPage Tree

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 includes a CCL script for the location hierarchy however using your own CCL script for other sets of data is fairly simple.

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



CustomService now offers an optional parameter allowing the ability to pass a callback function to your CCL request. When the CCL script has completed, your callback function will be executed allowing you to issue any post-run functionality you design.

    customScript: {
        script: [
              name: '1co_load_document:group1',
              run: 'pre',
              id: this.scriptId,
              parameters: {
                parentEventId: change.currentValue.eventId
        clearPatientSource: false
}, [this.customService.mpage.emptyPatientSource], () => { this.documentLoadCallback(); });


The UtilityService now offers the following new convenience methods.