Workflow Components

Differences between workflow components and full page MPages

Workflow components offer most of the same functionality as full page MPages. Unlike full page MPages, workflow components run inside a larger MPage that is not developed in Angular and MPage Developer.

Some of the differences to note are:

• Your MPage workflow component is assigned in Bedrock and through the Clinical Office: MPage Developer Setup and Configuration MPage found in DA2.
• Angular routes are not available in workflow components. Routing in Angular is a method for redirecting the URL of your MPage to a sub-page. For example, you may have a full page MPage that has an administration screen. A route would allow your MPage to reference a sub-page such as http://url.to.mpage/my-mpage#/administration. Since your component is part of a bigger web page, performing this type of action is not possible.
• MPage Developer workflow components are completely isolated from everything. This means that all CSS styling, variables in memory and everything else don't exist to your component. The only exception being fonts such as the Roboto font and Material icon fonts you installed.
• Variables title and path are available in your app.ts file if needed. The title variable represents the component title from Bedrock where the path variable contains a reference to your component source. If you plan on accessing assets such as images from the server your component is hosted, ensure that all CORS rules are in place to prevent errors.

GitHub Template Differences

There are several important differences between the full page MPage template and the workflow component template.

• The npm run build command performs additional steps to pack all component content into a single file. The full page template does not perform this task.
• The styles.css file in your MPage source references :host and not :root as in the full page template. There is also an entry inside :host to set all to a value of initial. This is needed for style encapsulation.
• The Config Service is not automatically loaded as in the full page MPage template. This is due to the path of the MPage not being known at runtime. The path variable in app.ts contains the path, however, the value is not available until after initialization.

Component Deployment

Deploy your MPage Component to PowerChart using the following steps.

1. Compile your source code on your development PC/Mac using the npm run build command.

   npm run build

   You should see a new folder called dist appear in your project containing a sub-folder with the name of your MPage (e.g. my-first-mpage). This sub-folder contains your entire MPage and contains both the original deployment files and your single packed file. The single packed filename will match your project name.
2. Copy the entire sub-folder (e.g. my-first-mpage) to a web server of your choice or to the Cerner WebSphere custom MPage content folder I:\Winintel\Static_Content\custom_mpage_content. Make sure you are only copying the sub-folder (e.g. my-first-mpage) and not the entire project or dist folder as doing so will copy more than you need and prevent your MPage from working.
3. If deployed to the Cerner WebSphere custom MPage content folder, launch the Clinical Office: MPage Developer Setup and Configuration MPage from DA2 and select the Manager menu. A new window will open with the Cerner MPages Static Content Management Page. Locate custom_mpage_content and click the Refresh button to upload your MPage to WebSphere.
4. Launch Cerner Bedrock and navigate to the Quality Reporting and MPage Setup menu. If you do not see this menu, someone in your organization will need to grant you access. Next, click on View Builder. A new window appears. With Build And Maintain Views selected, click the Begin button.
5. In the new window that appears, click the Add button. For the Display, enter the name you wish to see in the PowerChart table of contents. Next, add the numbered Workflow Custom Components and match the number of components you wish to include. Add Workflow MPage-level Settings and click the Finish button. You will be returned to the previous screen where you can click the Finish button on that screen.
6. Select MPage Setup from the menu. A new window will appear. Perform a search for the name you gave your component in the previous screen. Ensure that your component is listed as the choice in the select box. Click the Next button.
7. Click the Define MPage Layout button.
8. Ensure that your components are all in column 1 and have been checked. Click the Ok button.
9. Double-click the name of the custom component you wish to edit.
10. On the new screen that appears, select Custom Component # section layout parameters and type the name you wish to give your component in the label field. Leave the two options boxes set to No and click the Save button.
11. Next, select Custom Component # Namespace Type in clinical_office.mpage_component and click the Save button. Complete the task by clicking the Finish button.
12. Close Bedrock
13. Return to the Clinical Office: MPage Developer Setup and Configuration MPage in DA2 and click the Component Summary tab. If your new component isn't listed, click the Refresh button on DA2. Next, click the row you wish to edit.
14. Type in the Component URL Path and click the Save button. If your component is hosted in the custom_mpage_content folder, type in the exact name of your Angular MPage project component/folder name (e.g. my-first-mpage). If you are hosting your component elsewhere, use the complete URL instead (e.g. https://www.clinicaloffice.com/mpages/my-first-mpage).
15. Close DA2 and Open prefmaint in Cerner. Select PowerChart and the Position you wish to add the MPage to. Expand the Chart branch as workflow components only work with a patient context at the chart level.
16. Once you have expanded the Organizer or Chart branch, click on the branch. The Add Tab button should now be enabled. Click it to see the Define View(s) for Chart window appear. Locate Discern Report in the available tabs window, click on it to select it and then click on the down arrow button to move it to the existing tabs window. Finish off by clicking the OK button.
17. Expand the Discern Report branch and left click on it. Next, enter the REPORT_NAME parameter. It must be in the following format (Be sure to replace VB_EDGECOMPONENTTEST with the identifier you recorded earlier from bedrock..

    <url>$DM_INFO:CONTENT_SERVICE_URL$/mp-content/idx.html?m=^CHT^&pId=$PAT_PERSONID$&eId=$VIS_ENCNTRID$&uId=$USR_PERSONID$&pCd=$USR_PositionCd$&ppr=$PAT_PPRCode$&app=^$APP_AppName$^&vId="VB_EDGECOMPONENTTEST"&sLoc=""

    Click the Ok button to save and close prefmaint.
18. Your component is now ready.