Components & Directives

Overview

MPage Developer includes specialized Angular components and directives that have been designed to improve the quality of your MPages, and reduce your MPage development effort.

Components offer complete self-contained objects that offer specific functionality. For example, our table component accepts a data object along with your specific display properties and does all the work of generating the table and rendering output. Directives on the other hand perform display logic on standard HTML elements. Our button directive accepts several properties that decorate a standard HTML button.

The majority of the components in MPage Developer have been tightly integrated with Cerner functionality to make them the perfect solutions for MPages. Examples include our select drop-down menu that uses a CCL script to populate the list of choices by specifying a CCL script or code set.

Using Components & Directives in your MPages

Angular 20 is a major shift from previous versions of Angular and MPage Developer has adopted many of the new standards created by Google. The most notable is the shift to stand-alone components. Stand-alone components are fantastic for reducing the bundle size of your MPages as only the components you use in your MPage are compiled into the final bundle. For example, if your MPage does not use the MPage Tree component, that code does not get included in your final compile.

Stand-alone components no longer use a module file to bring the pieces into your MPage. This means you must import any components you use into your application at the component level. To import a component or directive, you need to import it with the import statement and additionally add it to the imports array in your component.

The example below demonstrates importing the ButtonDirective and MpageSelectComponent into a component called "your-component".

import {ButtonDirective, MpageSelectComponent} from '@clinicaloffice/mpage-developer';

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

Styling

Your MPages should reflect your hospital or company. Branding and visual styles are important, and we have made every effort to respect your need to have your MPages match the visual style guidelines of your organization. SCSS styling of components has been fully exposed to you in version 5 of MPage Developer through two .scss files located in your MPage template source code. Other than the styles of the MPage Log component, everything else can be modified if you choose.

The "styles.scss" file has been created to allow you the ability to modify the general appearance of your MPage as well as add your own custom styles. We have made significant use of SCSS variables which have been declared near the top of the SCSS file.

Styles specific to MPage Developer components and directives (e.g. Button, Table, etc.) are documented on the specific pages for those components/directives. Generic application styling is documented below.

Four color schemes have been defined including default, primary, accent, and warn. These color schemes offer three settings for color, color-content, and color-alternate. The usage of these settings is dependent on the type of component or directive being rendered. For example, the color-alternate is used when hovering over a Button directive as the new background. You are free to change these colors to anything you like.

The second SCSS file you will encounter is called "clinical-office-styles.scss". This file is where the SCSS work happens and modification of this file will have an effect on the appearance of your MPage. It is recommended that you DO NOT modify this file, however it can be useful as a reference when designing your own styles, and offers several utility classes you may find useful. This file will be modified from time to time during template updates.

The table below describes the helper CSS classes found in "clinical-office-styles.scss".

Goodbye Angular Material

Angular Material has been part of Clinical Office since inception and has been a fantastic tool for quickly building incredible looking MPages. With the development of version 5 of MPage Developer, we ran into several problems that prevented us from using Angular Material. Some of these problems were Angular Material related, however, most were due to compatibility with the Cerner MPage Component Framework.

MPage Developer does, however, still make use of the Angular Material CDK for features such as drag and drop and dialog. All Angular CDK functionality is available for use in your MPage.

• HTML <iframe> is no longer a viable option inside the Cerner Component Framework. In the new Edge components, access to Cerner functionality was no longer working from inside an <iframe>. To remedy this critical problem, components built with Clinical Office are now added to the root MPage as a web component, allowing it to run as part of the main MPage.
• Angular Material styles have to be part of the root document with differences in all versions of Angular. MPage components built with different Angular versions on the same page suffered from visual inconsistencies. With the removal of Angular Material paired with our own styles declared in a ShadowDOM, all Clinical Office components have their own independent styles.
• Angular Material takes a mobile first approach to styling components which at times is difficult to adjust for proper appearance on a desktop application. The general look and feel of components is almost completely out of your hands as an MPage developer without introducing many CSS hacks. When developing version 5 of MPage Developer, we decided that the Angular Material styling limitations were unacceptable.