MPage Select Component

Overview

The MPage Select component has been designed to greatly reduce the workload of populating data into a drop-down select box while offering advanced features such as real-time searching and limiting content on large lists. Featuring built-in support for code value, personnel searches, in-memory lists and custom script population, the MPage Select component can handle a wide array of applications.

Required Imports

To use the select component , you must import the MpageSelectComponent 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 {MpageSelectComponent} from '@clinicaloffice/mpage-developer';
import {FormsModule} from '@angular/forms';

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

Usage

The MPage select component HTML selector is called <mpage-select /> and at a minimum requires a bound variable that is either a number or array of numbers. The MPage select component will size itself to the full width of its parent container unless CSS styling is applied to the component.

If you choose not to specify options for your MPage select component as in the example below, the default script for retrieving personnel information will be used. Passing in a numeric variable equal to 0 will add a "No value" entry in the list when searching. Once an item has been selected, the "No value" option will disappear unless you have specified allowing empty values in the component properties.

<mpage-select [(ngModel)]="boundVariable" />

Options

The MPage select component offers several options for customization which are listed in the table below. Options can be applied directly in your HTML element.

<mpage-select [(ngModel)]="boundVariable" label="Event Set" />

<mpage-select [(ngModel)]="stringBoundVariable" [values]="['Yes','No']" />
or
<mpage-select [(ngModel)]="booleanBoundVariable" [values]="[{key: true, value: 'Yes'}, {key: false, value: 'No'}]" />

Examples

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

// Code Set 72 select with content control and multiple selection
<mpage-select label="Event" [(ngModel)]="selectTest2" [codeSet]="72" [multiple]="true" [searchable]="true"
                      [allOption]="true" />

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

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

Custom CCL Scripts

The easiest way to create an MPage Select custom CCL script is to start with a copy of the template script found in your Clinical Office CCL distribution. The template script is called 1co5_mpage_select_template.prg

The template script has code to handle defining the output rCustom record structure as well as containing handlers for the incoming parameters. Line 104 is where your custom content will begin.

The first step is to modify the parser to handle your search parameters and any default values being passed in. Replace the value ***COMPARISON DB FIELD*** with the aliased database field you will be using in your SELECT statement.

In our explanation, we are going to use the CODE_VALUE table which has been aliased as CV to help demonstrate the changes you need to make.

; Custom parser declarations
declare cParser = vc with noconstant("1=1")

; Build the parser for user search
if (rParam->search_value != "")

    set cParser = concat(^cnvtupper(cv.code_value) = patstring(|^, rParam->search_value, ^*|)^)

; Build a parser for default values
elseif (rParam->search_limit > 0 and size(rParam->default, 5) > 0)

    set cParser = ^expand(nNum, 1, size(rParam->default, 5), cv.code_value, rParam->default[nNum])^
    set nDefault = 1

endif

The parser defined above has two responsibilities. On initial load, if your [(ngModel)] variable contains values, those values can be used to default into your select component. This would happen if you write code to save values for use later, such as user preferences. The second reason for the parser is to handle searches typed in by the user on the component.

The second step is to write a SELECT statement that limits the number of returning rows. In this code, you should only modify the content between row_count = count( and the detail statement. In this statement, you need to replace the values for ***COMPARISON DB FIELD***, ***YOUR TABLES***, ***YOUR ALIAS*** and add in your SQL code that makes your script unique.

; Perform a limit check to determine if too many values exist to upload
; ---------------------------------------------------------------------
if (rParam->search_limit > 0)

    ; Perform your select to count the results you are after
    select into "nl:"
        row_count   = count(cv.code_value)
    from    code_value    cv
    plan cv
        where cv.code_set = 220
        and cv.cdf_meaning = "NURSEUNIT"
        and parser(cParser)
        and cv.active_ind = 1

    ; WARNING: Avoid modifying the detail section below or your code may fail
    detail
        if (row_count > rParam->search_limit)
            rCustom->status->error_ind = 1
            rCustom->status->message = concat(build(cnvtint(row_count)), " records retrieved. Limit is ",
                                        build(rParam->search_limit), ".")
        endif
        rCustom->status->count = row_count
    with nocounter

endif

The final step is to collect your data. Simply repeat your SQL from the previous section without the row_count variable and modify the detail section to assign your key and value parameters.

; Perform the load if search limit does not fail
if (rCustom->status->error_ind = 0 or nDefault = 1)

    set rCustom->status.message = "No records qualified."

    select into "nl:"
    from    code_value    cv
    plan cv
        where cv.code_set = 220
        and cv.cdf_meaning = "NURSEUNIT"
        and parser(cParser)
        and cv.active_ind = 1
    order cv.display_key
    head report
        rCustom->status.message = "Ok."
        nCount = 0

    ; WARNING: Detail section must write to rCustom->data[].key and rCustom->data[].value
    detail
        nCount = nCount + 1
        stat = alterlist(rCustom->data, nCount)
        rCustom->data[nCount].key = cv.code_value
        rCustom->data[nCount].value = cv.display
    with counter, expand=2

endif

Styling

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

Interfaces

export interface ISelectParams {
  values?: any[];
  codeSet?: number;
}

export interface ISelectValue {
  key: any,
  value: any
}