Microsoft Edge MPage Deployment inside the Cerner Component Framework

One Time Steps

The following steps need to be performed once in each Cerner domain you wish to run your MPages in the component framework.

1. Add the following code to your custom-component.js file. This will code will be called in the render function of your custom component entry. The block of code in this step is the same for both Internet Explorer and Microsoft Edge and only needs to be added once to custom-component.js

   The custom-components.js file can be found in the I:\Winintel\Static_Content\custom_mpage_content\custom-components\js folder on your Cerner domain.

   // ************************************************
   // Begin Clinical Office: MPage Edition Integration
   // ************************************************
   
   // Internet Explorer Functionality
   MPage.namespace("clinical_office.integration");
   
   clinical_office.functions = function() {};
   clinical_office.functions.embed = function(component) {
       var frameId = 'frame' + component.getComponentUid();
       var target = component.getTarget();
   
       if (navigator.userAgent.includes('Edg/')) {
   	target.innerHTML = "<h2>This component is an Internet Explorer Component which needs to be upgraded to support MS Edge.</h2>";
       } else if (component.data.response != undefined) {
           target.innerHTML = '<iframe seamless style="width: 100%" id="' + frameId + '" src="' + component.data.response.url + '?' +
                              'personId=' + component.getProperty("personId") +
                              '&encounterId=' + component.getProperty("encounterId") +
                              '&userId=' + component.getProperty("userId") +
                              '" scrolling="no" frameBorder="0"></iframe>';
           $('#' + frameId).iFrameResize({heightCalculationMethod: 'lowestElement'});
       } else {
           target.innerHTML = "<div>An error has occurred.</div>";
       }
   }
   
   // Microsoft Edge Functionality
   MPage.namespace("clinical_office.mpage_component");
   
   clinical_office.mpage_component = function () {};
   clinical_office.mpage_component.prototype = new MPage.Component();
   clinical_office.mpage_component.prototype.constructor = MPage.Component;
   clinical_office.mpage_component.prototype.base = MPage.Component.prototype;
   clinical_office.mpage_component.prototype.init = function () {
   	var component = this;
   	var compId = component.getComponentUid();
   	component.cclProgram = "1co_mpage_redirect:group1";
   
   	// Clear cclParams in case of refresh
   	component.cclParams = ["edge-component", this.getProperty('headerTitle')];
   };
   
   clinical_office.mpage_component.prototype.render = function () {
       var component = this;
       var compId = component.getComponentUid();
       var target = component.getTarget();
   
       if (this.data.response != undefined) {
   	    if (!navigator.userAgent.includes('Edg/')) {
   		    target.innerHTML = '<h2>This component is an MS Edge component and cannot run in Internet Explorer. ' +
                                   'Please ensure the browser selection in prefmaint is set to 1-Edge Chromium.</h2>';
   	    } else if (this.data.response.component !=  '') {
   		    $.getScript(this.data.response.url + '/' + this.data.response.component + '.js');
   		    $('head').append($('<link rel="stylesheet" type="text/css"/>').attr('href', this.data.response.url + '/styles.css'));
   
   		    target.innerHTML = '<' + this.data.response.component + '></' + this.data.response.component + '>';
           } else {
               target.innerHTML = '<h2 style="color: red, font-weight: bold">' + this.getProperty('headerTitle') + ' has not been properly defined.</h2>';
           }
       }
   };
   
   // **********************************************
   // End Clinical Office: MPage Edition Integration
   // **********************************************

2. In the I:\Winintel\Static_Content\custom_mpage_content\custom-components\css folder, edit custom-components.css and add the following three lines at the very top of the file.

   @import "material-theme.css";
   @import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap";
   @import "https://fonts.googleapis.com/icon?family=Material+Icons";

3. Unlike our older Internet Explorer components which were embedded in an IFrame, Microsoft Edge compatible components are part of the current running MPage which means all the styles associated to the MPage are available for use. This also means that any global style changes in your component will also affect anything else on the page.

   The material-theme.css file mentioned in the last point will be imported as part of the main CSS content. This file contains all the Angular Material specific CSS settings including your custom Material Theme.

   For the purpose of your Cerner embedded components, it is important that your organization come up with a standardized theme for use in not only your components but also full screen MPages for consistency across MPages. The clinicaloffice/mpage-component-template and clinicaloffice/mpage-template GitHub templates both come standard with the same theme.css file which can be modified to your standards.

   When you compile your first MPage component you will generate a material-theme.css file in the distribution folder. Copy this file to I:\Winintel\Static_Content\custom_mpage_content\custom-components\css.

4. Close any files and folders opened in I:\Winintel\Static_Content\custom_mpage_content\custom-components and refresh WebSphere. You should never have to modify these files again as all MS Edge based Clinical Office Components are now setup through a combination of Bedrock and a simple CCL script.

MPage Specific Tasks

1. Develop your Angular component using the clinicaloffice/mpage-component-template GitHub template. All features you have come to expect from Clinical Office: MPage Edition including real-time development and our debugger are at your disposal. The only difference you will see is that the debugger is displayed inline with your content.

   You may notice that your mpage-log-component line in app.component.html uses a new parameter called [displayInline]. Do not change this value as it will cause the debugger to display as an overlay in the Cerner component framework. If your component is the only one on the MPage it will work as expected however multiple Clinical Office components will display the debugger for all components in the same place making it impossible to work with. The inline option displays the debugger below the component content.

   WARNING

   Do not modify the CSS for standard HTML element names directly as your modifications will affect every component (including Cerner standard components). Instead, name your CSS classes (e.g. <p class="my-custom-style">)

2. When you are ready to deploy your component, compile your Angular component with the following command:

   npm run build

   This command will issue the ng build command and also run scripts responsible for combining all of your JavaScript into a single file. When complete, your distribution folder will contain the individual files as well as the new combined files (your-component-name.js, material-theme.css, and styles.css).

3. If this is your first Microsoft Edge enabled component you will need to copy the material-theme.css file from your Angular distribution folder to the I:\Winintel\Static_Content\custom_mpage_content\custom-components\css folder. This file contains your custom theme as well as all Angular Material CSS code.

   

4. Your component can be distributed on WebSphere or to an external web server of your choosing. The critical deployment piece is that your component folder name must match the name of your JavaScript file.

   In our example, our component is called component-test-1. A valid deployment on WebSphere in the Cerner environment would be I:\Winintel\Static_Content\custom_mpage_content\custom-components\component-test-1 where a valid external address might be https://www.clinicaloffice.com/component-test-1

   Copy the entire component folder from your dist folder to either WebSphere or web server. If deploying to WebSphere make sure to refresh the custom_mpage_content folder from the Cerner MPage Static Content Management Page.

   

5. Setup your MPage component as you normally would in Cerner Bedrock specifying a custom component or custom workflow component.

6. Navigate to the MPage Filters for your component in the Bedrock MPage Setup tool and add a unique label for your component. This label will be used later to match your MPage up to the correct Angular component.

   

7. On the Namespace filter, set the entry name to clinical_office.mpage_component as shown in the image below.

   
8. Save and close out of Bedrock.

9. Run 1co_register_component:group1 from either a back-end CCL session or Discern Visual Developer.

   The Component Label prompt must match the label name you provided in Bedrock.

   For components stored in the custom_mpage_content folder on WebSphere, you need to enter the component name as the Component Target.

   

   If you component is stored on an external web server, ensure that the Component Target matches your destination as shown below.

   
10. Test your component in PowerChart