Appointments MPage - Getting Started

Create your project

The first step in writing our Appointments MPage is to create your new project from a GitHub project template. Unless specified, all of our training material will be using the clinicaloffice/edge-mpage template. You should use your own customized edge-mpage template if your site has cloned our project and modified it to include your site specific proxy settings as it will allow you to develop your MPage in real-time.

This lesson will work with the ie-mpage template if your site has still not converted to MS-Edge however it is highly recommended that you use the Edge template as Internet Explorer support is limited to Angular version 12 and has been dropped in subsequent versions.

• Follow the instructions found in the MPage Project Setup to use the standard clinicaloffice/edge-mpage or your customized edge-mpage template from GitHub. To avoid naming conflicts with other members of your team who may also taking this lesson, ensure that the owner is your GitHub account and not that of your team (e.g. johnsimpson instead of precisionhealth). Name your repository "appointments".
• Once your repository has been created, Git clone the new project to your development PC and be sure to rename all references of 'edge-mpage' in your project to 'appointments'. Instructions for this are also in the MPage Project Setup.
• At this point, if you have followed all the steps in the MPage Project Setup instructions, you should have a running MPage in your browser that displays "Create something stunning here!".
• Open the debugger by pressing the CTRL + / keys. You should see the following screen.

• This MPage is a chart level MPage which means it is intended to be used with a patient visit in context inside PowerChart. While developing our MPage, we are typically running our page from a development workstation using a Proxy to connect to Cerner via the Discern Web Services. This gives the developer the ability to immediately see code changes live in the browser but PowerChart specific functionality is not available. This includes having the patient context in memory.

  The Clinical Office activity log (often referred to as the debugger) has the ability to set a patient context that will remain active until you choose to switch to another patient. This setting is ignored when your MPage is run inside PowerChart, but anywhere else including your development proxy server will make your test patient context available.

  In the top right hand corner of the activity log located directly below the "RUNTIME ERRORS: 0" message is a link labelled "No Visit Selected". Click on this link now.

• You should see an Encounter Search window on screen. Simply fill in your search values and click on the name of the patient you wish to use. Try to make sure the patient you are selecting has multiple appointments in Cerner or you won't see any results in your MPage. Once done, the encounter search will populate where you can click the name of the visit you wish to have in context. Once your visit has been clicked, your debugger will update with a message stating the patient context has changed and that the page will refresh in 5 seconds. After the 5 seconds your newly selected visit will be used for all subsequent activity.
• Re-open the activity log with the CTRL + / keys to see your new patient in context.

A Brief Tour of the MPage Template

If you have followed our Introduction to Angular lesson you will remember that the Angular CLI built most of our project for us. We have done the same for you when it comes to MPage development as we believe that time should be spent writing your business logic and not wasted on repeating the same boilerplate code every time your start a project.

That said, it is a good idea to understand the pieces that have been put into our template in case you want to make changes to the template. The remaining content on this page will outline the changes made to integrate Clinical Office into an Angular project.

index.html

The main index.html file is responsible for a number of things. This file contains the necessary Cerner meta tags for browser compatibility as well as MPage specific functionality. The MPage specific meta tags can be found in the "discern" meta tag.

<meta name=discern content=APPLINK,CCLLINK,MPAGES_EVENT,MPAGES_SVC_EVENT,XMLCCLREQUEST,CCLNEWSESSIONWINDOW
           http-equiv=Content-Type>

Cerner typically uses IBM WebSphere to store MPages when the final compiled version is deployed. The standard Angular base href statement needs to be modified to work correctly in WebSphere. Our template does this for you and sets it to "./index.html". This change allows proper usage on WebSphere and has no known issues with other web servers.

Clinical Office: MPage Edition makes use of Angular Material which is the standard Angular components' library. Font settings for Angular Material are established in the index.html file.

This file should not be modified however if you desire you can change the title tag and the text in the app-root element.

styles.scss and theme.scss

The styles.scss file is intended to be used to store any custom SCSS styling you wish to apply to your project. The only line we have put in this file is an import of "theme.scss" which you can choose to make use of or delete if desired. If you do decide to delete the theme, you must either import one of the Angular Material standard scss templates or one of your own.

The theme.scss file was generated at https://materialtheme.arcsine.dev. This free site lets you define your Angular Material color scheme visually and then allows you the ability to view or export the generated SCSS file. Simply go to the site, set up your own custom theme and replace theme.scss with the content.

package.json

The package.json file contains the library reference for all the libraries being imported into your Angular application. This includes Angular, Angular CDK, Angular Material and third party libraries including Clinical Office: MPage Edition, fast-sort and moment.js.

app.module.ts

The main app.module.ts file has been configured to include Clinical Office: MPage Edition, Angular Material, FormsModule/Reactive Forms Module and DateAdapter specific modules. In addition, date format providers have been set up to control how dates are displayed in different components. The default Cerner 'DD-MMM-YYYY' format is used. Feel free to change this to your site setting in your copy of the ie-mpage/edge-mpage templates.

app.component.ts

The app.component.ts is the initialization point of your Angular application. We have modified this file to include the "mPageService" from Clinical Office as well as initiate some code from the ngOnInit() method.

Inside the ngOnInit() method there are two blocks of code that need to be explained. The first block is used by the Cerner Component Framework to allow usage of a Clinical Office MPage through passing personId, encounterId and userId as URL parameters. You do not need to do anything to this code and unless you are using your MPage inside a Cerner Component it will never be used.

The setTimeout method is where the initialization of your MPage happens. Inside this block of code a single line exists which defines the number of queues available to your MPage.

this.mPage.setMaxInstances(2, true, 'CHART');

The setMaxInstances method of the mPage service initializes all MPage services and should only be called once in your application inside app.component.ts. Full documentation of the mPage service can be found in our mPageService documentation.

The parameters used in our project indicate the following:

• 2 queues should be made available to the MPage
• The debug log should be enabled
• The MPage will run as a 'CHART' level MPage

The number of queues defined is likely the only value you may change. For the most part, this number will be somewhere between 2 and 4 and means that at any one time, when the default setting of 2 is used, only 2 requests can be made to Cerner at one time. Any requests past this value are queued until adequate resources are available.

Clinical Office queues are automatically allocated and assigned so you as a developer never need to worry about resource management. If you are sending too many CCL requests at once in your code the queue manager will prevent your MPage from being a burden on the system. Your requests are held until a time when the queues have finished prior requests.

app.component.html

The final file in our discussion is app.component.html. Other than a simple heading element, this file has a reference to the mpage-log-component to allow presentation of the acitivity log.

It is highly recommended that you keep the activity log in all your MPages as it will assist in real-time debugging if users encounter problems in your MPage.