GitHub Templates

MPage Developer offers two project templates on GitHub to get you started developing MPages. These are Full Page MPages and Workflow MPage Components.

Full Page MPages

Full Page MPages are MPages that do not run inside the Cerner Component Framework as a workflow component. Examples include PowerChart Organization Level MPages, PowerChart Full Screen Chart Level MPages, MPages running from DA2 and MPages executed from a web browser using Discern Web Services.

Unless you specifically need to run your MPage as a Cerner workflow component, it is recommended that you develop your MPage as a Full Page MPage to take advantage of features not available inside Workflow Components.

Download Link: https://github.com/clinicaloffice/mpage-developer-template

Workflow MPage Components

The Workflow MPage Component template is a special version of an Angular application which is compiled into a completely standalone web component. The workflow component is completely sandboxed away from the rest of the workflow components, allowing you the freedom to create any content you wish without risk of polluting other components.

Workflow components can also be run as full page MPages, however, several features are not available.

• Angular Routes
• MPage Developer ConfigService
• CORS is a concern when loading external resources such as images

Download Link: https://github.com/clinicaloffice/mpage-developer-component-template

Template Usage Instructions

1. Your first step is to decide which type of MPage you want to build. If you are building an MPage component that will be run from a Cerner Workflow MPage, choose the Workflow MPage Component Template . For everything else, you will want to use the Full Page MPage Template
2. Navigate to the GitHub project location described in the table above and click the Use this template button shown in the top right corner. When the drop-down appears, select Create a new repository.
3. You should now be on a screen titled Create a new repository. From here complete the prompts giving your MPage an Owner, Repository name, optional description and privacy level. If you are working with a team of developers, it is highly recommended that you create an organization in GitHub to use for your team and then use this organization as the Owner of your MPage projects. This will allow for simplified sharing of your MPage among your developer team.
4. Click the Create repository from template button when you have completed the steps above. After a few moments your repository will be generated with a copy of the template.
5. Your template view in GitHub has a button called Code on the right-hand side of the screen. Click this button to view your Clone options.
6. The first Clone option shows the command line clone. Click the copy button next to the URL of your project to put your project location in your system clipboard.
7. Open a command prompt on your development machine and navigate to a folder where you want to store your local copy of the source code.
8. Type in git clone followed by pasting the URL from memory.

   git clone https://github.com/clinicaloffice/my-first-mpage.git

   You should see the project be cloned to your development machine.
9. At this point, the project is now on your development machine, however, none of the required libraries are installed. Navigate to your project folder and load the libraries using the npm install command. The npm update command will fail if you do not have a valid Clinical Office:MPage license token defined in your .npmrc file.

   cd my-first-mpage
   npm install

   
   As versions of libraries become outdated, you may see a series of warning messages as shown in the screenshot below. When this happens, type in the following line of code to force an update of your library references in your project.

   npm audit fix --force

10. Open your project folder in Visual Studio Code. This can be done by launching Visual Studio Code and choosing Open Folder from the File menu.
11. Once the folder has been opened, navigate to the Edit menu and select Replace in Files. Replace all instances of the original template name ("mpage-developer-template" or "mpage-developer-component-template") with the template name of your project (e.g. my-first-mpage). This step is critical!

Next Steps

Your MPage is ready to start working on, however, there are a few additional steps you can take to improve your developer experience. If you are developing your MPage on the same network as the Discern MPages web service, you can quickly configure your project to use the built-in Proxy in Angular to connect to the web service. This will give you the ability to have your MPage run while writing your code to see changes as they happen while at the same time having access to your Cerner data. Instructions for configuring the proxy are located below.

Proxy Configuration

The proxy built into Angular is a fantastic way to streamline your development. Without the proxy, testing your application involves compiling and deploying your code between each test.

The steps below assume that Discern MPages Web Services are running, and that you have completed the Clinical Office: MPage Developer installation steps.

1. Launch the Clinical Office: MPage Developer Setup and Configuration MPage from DA2.
2. Click the button labeled Service Directory.
3. Click the Copy button shown next to the name of the service directory, or alternatively you can copy and paste the URL shown on-screen.
   If you are using the full page MPage template and wish to be able to run your compiled MPage from a web browser, update the contextRoot value in the public/config.json file in your project.
4. In Visual Studio Code, open the proxy.conf.json file located in your src folder. This file should have the following content:

   {
     "/cclproxy/*": {
       "target": "http://sub_domain.host_name.com/mpages/reports",
       "secure": false,
       "changeOrigin": true,
       "logLevel": "debug",
       "pathRewrite": {
         "^/cclproxy": ""
       }
     }
   }

   Replace the "target" value with the value you copied.

   "target": "value you copied"

5. Your proxy should now be configured. From a command line, type in the following to start the real-time build of your application.

   ng serve

6. You can now view your MPage by opening a web browser and navigate to http://localhost:4200. If your proxy is working, you will see a login screen asking for your Cerner credentials. The username format is your Cerner username, the @ symbol and the domain name you are connecting to.
7. At this point, while the proxy is up and running, you can make changes to your source code, save those changes and immediately see the updated code take effect in your MPage. To exit the proxy/real-time development mode simply return to your command prompt and press CTRL + C to exit.