Tutorial: MPage Project Setup

This tutorial will guide you through the steps required to setup a basic Angular application. Once complete, we will review the steps needed to add the application to PowerChart and test it in an MPage.

Preparing your development PC

Before you can begin developing Angular applications you need to install node, npm and Angular on your PC. This is a one-time step and is only needed when you start developing on a new PC.

NPM and node.js come together in the same package. They can be downloaded at https://nodejs.org/en/download/.

Once you have NPM and node.js installed on your PC, open a command prompt and type in the following to install the Angular CLI on your PC.

npm install -g @angular/cli

Last but not least, you will need a code editor for your Angular application. Any text editor will do however some are better than others. My personal favorite is WebStorm however it is not free. A good free editor for Angular applications is Visual Studio Code. You may have to do some configuration to allow proper syntax highlighting of your TypeScript code.

At this point, everything you need to start developing Angular applications is on your PC.

Steps

  1. Open a command prompt to your development folder. (From the Windows start menu select Run and type in cmd. Once open, use the cd command to open your development folder.) We recommend that you keep your MPages together in a folder called MPage.

    cd \mpage
  2. Create your new Angular cli application in your development folder. For this example we are going to call our application first-mpage.

    ng new first-mpage

    Depending on the speed of your PC and internet connection, this step may take a few minutes. You will see a number of create statements along with some possible warnings. When the process has completed, you will see a message stating Project 'first-mpage' successfully created.

  3. Your basic Angular application is now ready to be used on modern web broswers such as Edge, Chrome and Firefox. It is not however able to run on Internet Explorer or as an MPage. First, we need to make a few modifications to the generated code.

    Open your text editor and make the following modifications to index.html.

    <!doctype html>
    <html>
        <head>
            <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
            <meta name=discern content=APPLINK,CCLLINK,MPAGES_EVENT,MPAGES_SVC_EVENT,XMLCCLREQUEST,CCLNEWSESSIONWINDOW http-equiv=Content-Type>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
            <!-- Control caching to ensure page is always refreshed -->
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="-1" />
    
            <title>First MPage</title>
            <base href="./">
    
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" type="image/x-icon" href="favicon.ico">
        </head>
    
        <body>
            <app-root>Loading</app-root>
        </body>
    </html>
              

    Notes

    • The first meta tag is used to set the browser compatibility. Please ensure that it is always first and typed in exactly as seen here or your MPage will not work.
    • The second meta tag will allow the MPage the ability to see the Cerner XMLCCLRequest Windows API which is required to allow MPages the ability to communicate with CCL.
    • The base href tag is used to indicate the location of your hosted application. If you plan on hosting your application at the root level, leave the tag as "/". However if you are hosting on a sub-folder you do need to specify the sub-folder (e.g. "/demo/first-mpage/"). Specifying a sub-folder will stop the ng serve function below from working properly so you may find yourself changing this value during development and before deployment.

  4. Cerner MPages use Internet Explorer as a web browser. To support Internet Explorer, we need to make a few changes to the standard Angular setup.

    • The first step is to open the tsconfig.json file in your Angular application and modify the "target" parameter to read "target"="es5" instead of "target"="es2015".
    • Open the browserslist file and remove the word not from the IE9-11 line. The final line should read as
      IE 9-11
  5. At this point, your Angular application is in a suitable state to begin testing. Ensure that you have your command prompt open and are in your first-mpage folder. Type in:

    ng serve --open

    You will have a brief wait while your application compiles and your browser should open to localhost:4200 and display the default Angular content.

  6. Next you need to compile your code for delivery to your web server. If you are still running ng serve, you can close it by holding CTRL+C.

    To compile your production build, type in the following in the command prompt from your first-mpage folder:

    ng build --prod

    This step may take up to a minute and when complete will have generated content in a sub-folder of first-mpage called dist. The dist folder contains all of the files you need to run your application.

  7. The steps for moving your distribution will depend on your individual web host. For most users, copying or moving the files via FTP/SFTP to your web destination folder will suffice. Please do not attempt to place your Angular application on the local Citrix custom folder as Angular applications do require a web server to run.

    Go ahead and move your distribution folder to your web server. When done you should be able to view it from your web browser (e.g. http://dev.clinicaloffice.com/mpage/demo/first-mpage/)

    Depending on where you are hosting your MPage, you may need to have your firewall opened up to allow the MPage to connect to your site from PowerChart.

  8. The final step is to set your MPage up in Cerner. Open the prefmaint application and choose PowerChart as your application along with the Position you want to grant the MPage access to. Click the Search for Preferences button.

    If you wish to view your MPage at the Organizer level open the Organizer folder. For the Chart level open the Chart folder. Click the Add Tab button.

    A new window will appear with three panels. Scroll through the Available Tabs panel until you find Discern Report in the list. Left-click the word Discern Report and hit the arrow pointing down below the Help Text panel. This will create a new Discern Report item in the Existing Tabs panel. Click the Apply button and close the window.

    Locate your new Discern Report tab and change the VIEW_CAPTION to the title to the name of your MPage.

    Next, open the Discern Report sub-item and change the REPORT_NAME to the location of your hosted MPage. Be sure to prefix the value with <url> followed by the fully qualified name of your mpage (e.g. <url>www.clinicaloffice.com/demo/first-mpage).

  9. That's it. If your firewall doesn't get in the way, your MPage should be up and running.

    All future tutorials will require the steps outlined above before you can begin. Your next steps will be to learn how to apply the Clinical Office:MPage Edition services to your MPage.