Embedded Workflow Component

Overview

Cerner workflow components built with Clinical Office: MPage Developer are completely stand-alone web components that can be dropped into virtually anywhere you run a Discern Output window running on Microsoft Edge.

With the embedded workflow component, you can quickly look-up your Cerner workflow component by the same name assigned in Bedrock, pass it an encounter id and person id, and render the component inside your full page MPages. Unlike standard Cerner workflow components, your components can be run at the PowerChart organizer level or in DA2/Reporting portal provided you pass in the encounter and person information.

There are several benefits to using the embedded workflow component. The most noteworthy being code reusability as you can now add existing functionality from an already developed component with a single line of code.

Commercial users of MPage Developer can now create "black-box" components to sell to development teams for integration into custom MPages as well as the typical Cerner Workflow model.

Required Imports

To use the icon component in your component, you must import the EmbeddedWorkflowComponent from @clinicaloffice/mpage-developer. You must also include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

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

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

Usage

The embedded workflow component makes a call to CCL to retrieve information about your component from Bedrock. Using the same reference information defined in our Workflow Component, you simply reference your component by the same name given in Bedrock. The embedded workflow component uses this information to determine the URL containing your component and loads it into memory. Multiple calls to the same component are managed to prevent attempts at loading the same JavaScript content.

If you are storing your personId and encntrId values in Angular Signals as shown in our example below, changing values immediately refreshes the component with new values.

<embedded-workflow componentName="Patient Information Demo" [personId]="personId()" [encntrId]="encntrId()" [disableComponentDebugger]="false" />

The mpage-icon respects your font settings and will apply the current font color and sizing as if it were any other piece of text. You can change the color or size by assigning a HTML class or style attribute to your icon component or the parent component.

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