New Features in Version 3.5

Components

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.

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.

Examples:

// 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.

Multiple-field sorting
Users can reposition fields and optionally turn off the display of specific fields.
Cerner specific fields that end in Id or Cd are excluded from the table by default but can be turned on with a simple preference change.
Fields ending with Date or DtTm are formatted as date and date/time respectively.
Row and Column clicks can be detected using Angular event emitters to give you the power to add interactivity to your tables.
Additional payload information can be sent through your CCL script to alter formatted and provide other information not displayed on the table.
User changes to column layout and sorting can easily be retrieved and saved for use later.
Columns on the left can be frozen in place for enhanced navigation. (MS Edge Only)
Limits can be set to force large tables into a paginated view to avoid MPage slow downs.
Works in Internet Explorer as a paginated view with auto-detection. Once you switch to Edge, new features automatically become available without code changes.

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>

Services

CustomService

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.

this.customService.load({
    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(); });

UtilityService

The UtilityService now offers the following new convenience methods.

asciiToHex: Converts ASCII text to hexadecimal.
camelWords: Converts camel case text to formatted text (e.g. nameFullFormatted -> Name Full Formatted).
hexToAscii: Converts a hexadecimal string to ASCII.