Internet Explorer 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. Your first step is to add the iFrameResizer library code somewhere in your custom-components.js on your Cerner domain. This code can be found at https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js .

   The iFrameResizer will resize your MPage inside the component framework. Without it your MPage will not have enough space to render.

   The custom-components.js file can be found in the js folder in I:\Winintel\Static_Content\custom_mpage_content\custom-components on your Cerner domain. Be sure to have the folder and all files closed when refreshing WebSphere in later steps.

2. 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

   // ************************************************
   // 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
   // **********************************************

MPage Specific Tasks

1. Setup your MPage component as you normally would in Cerner Bedrock specifying a custom component.

   

2. Add an entry in the custom-components.js file to represent your MPage component. In the code below we are using test_cd.js_custom_mpage_test2 for the component name and mpage-infant-graph as the name of the Clinical Office MPage. Please be sure to replace these values with the correct values that represent your MPage.

   /* test_cd.js_custom_mpage_test2 */
   MPage.namespace("test_cd.js_custom_mpage_test2");
   
   test_cd.js_custom_mpage_test2 = function () {};
   test_cd.js_custom_mpage_test2.prototype = new MPage.Component();
   test_cd.js_custom_mpage_test2.prototype.constructor = MPage.Component;
   test_cd.js_custom_mpage_test2.prototype.base = MPage.Component.prototype;
   
   test_cd.js_custom_mpage_test2.prototype.init = function () {
       var component = this;
       var compId = component.getComponentUid();
   
       component.cclProgram = "1co_mpage_redirect:group1";
       component.cclParams = ["component", "mpage-infant-graph"];
   };
   
   test_cd.js_custom_mpage_test2.prototype.render = function () {
       clinical_office.functions.embed(this);
   };

3. Refresh WebSphere and you should be all set.

component.cclParams = ["component", "http://www.yoursite.com/mpage-infant-graph/index.html"];

Clinical Office MPages work well in the Cerner component framework with the exception of one visual issue in Angular Material components. Any Angular Material component that normally closes when clicking outside of the component does not automatically close. For example, if you open a calendar control, clicking on the screen away from the calendar control does not automatically dismiss the control as expected. Clicking a date on the calendar control does properly close the control. This issue also occurs with select boxes.

This problem should not deter you from using Clinical Office MPages as components as you can accomplish some incredible results as shown in the screen shot below.