NAV Navbar
Logo cerner
code

HealtheLife Framework SDK

The HealtheLife Framework Software Development Kit (SDK) is a JavaScript include file that lets you securely embed content, called “Pagelets”, within the HealtheLife Framework. The SDK coordinates the loading, authorization and display of your pagelets when requested by the framework.

Loading and Authorization

The SDK coordinates loading your pagelets into the framework. It also authorizes the parent browser context to protect against click-jacking.

Display

The SDK communicates your pagelet content’s height to the parent browser context to ensure proper display when embedded.

Disclaimer Regarding Analytics and Tracking: By developing and implementing web applications for use within the HealtheLife Framework, organizations agree to take any and all responsibility for properly protecting personal health information and identifiers when using analytics and tracking applications (such as Google Analytics). Cerner cannot log Health Insurance Portability and Accountability Act (HIPAA) audit events for content embedded using the HealtheLife Framework SDK.

Browser Support

Hosted at a CDN

Production version:

<script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>

A production version is minified and optimized at the following content delivery network (CDN) location:

https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js

Writing Pagelets to Serve Using SDK

Required SDK and Babel Polyfill scripts:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
</head>

Add css styles:

/*
  Style the html5 hidden attribute for older browsers (IE < 11)
  More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
 */
html[hidden] {
  display: none;
  visibility: hidden;
}

html, body {
    /* Prevent bars and clipping. */
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

Required CSS Styles:

body:after {
  /* allow proper sizing of pagelets in sdk, even if they have float components */
  content: "";
  display: block;
  height: 0;
  clear: both;
}

Initialize SDK App Object:

$HL.App.init({
  acls: ['http://localconsumer.com:8080']
});

Pass in a secret and wildcard for authorization:

$HL.App.init({
  acls: ['*'],
  secret: 'abc123'
})

Pass in a callback function for validation of the secret:

$HL.App.init({
  acls: ['*'],
  secret: function(secret) {
    return Promise.resolve('Success');
  }
});

Pass in wildcard with no secret to automatically authorize:

$HL.App.init({
  acls: ['*']
});

Note: Your pagelet layout should be responsive. Additionally, links on pagelets that point to nonembeddable pages (for example, pages from a different origin) should be set to be opened in a new tab.

  1. Create the web page (the pagelet).

  2. Add the SDK JavaScript include file. Additionally, include the babel polyfill using a script tag if you need to support browsers without ECMAScript 6 (ES6) support (recommended).

  3. Add the CSS styles to the pagelet. This action hides the pagelet until it is loaded into a trusted consumer page. It styles the pagelet so it does not scroll and appears flush against the container.

    Note: Any CSS styles that remove an element from the normal document flow prevents the pagelets from properly resizing, a few of them are:

  4. Include the script to initialize the SDK’s App object to provide a set of useful features.

    $HL.App.init({ acls: ['http://localconsumer.com:8080'] });

    • Put origins of the trusted consumer sites (the sites into which you want to embed your pagelets) in the Access Control Lists (ACLs).
    • Alternatively, if the app is using secret authorization, it may pass in a secret and wildcard for authorization.
    • If the app is using a custom secret callback function for authorization, it may pass in a callback function for validation of the secret.
    • If the app is using an alternate form a security and does require clickjacking support, a wildcard with no secret may be passed. Under these conditions, the content is not hidden and the consumer will automatically be authorized.

Broken Floating Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/broken_floating_pagelet/', 'test');
    </script>
  </body>
</html>

Broken Floating pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Broken Floating Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          margin: 0px;
          padding: 0px;
      }
      .logo {
        float: right;
      }
    </style>
  </head>
  <body>
    <p><strong>Broken Floating Pagelet:</strong> Broken Floating Pagelet</p>
    <div>
      <img class="logo" src="../../../images/logo-cerner.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum</p>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
  </script>
  </style>
</html>

Floating Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/floating_pagelet/', 'test');
    </script>
  </body>
</html>

Floating Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Floating Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          margin: 0px;
          padding: 0px;
      }
      .logo {
        float: right;
      }
      body:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
      }
    </style>
  </head>
  <body>
    <p><strong>Floating Pagelet:</strong> Floating Pagelet</p>
    <div>
      <img class="logo" src="../../../images/logo-cerner.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum</p>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
  </script>
  </style>
</html>

Broken Fixed Position Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/broken_fixed_position_pagelet/', 'test');
    </script>
  </body>
</html>

Broken Fixed Position Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Broken Fixed positioning Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
      .logo {
        position: fixed;
      }
    </style>
  </head>
  <body>
    <p><strong>Broken Fixed positioning Pagelet:</strong> Broken Fixed positioning Pagelet</p>
    <div>
      <img class="logo" src="../../../images/logo-cerner.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum</p>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
  </script>
  </style>
</html>

Broken Absolute Position Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/broken_absolute_position_pagelet/', 'test');
    </script>
  </body>
</html>

Broken Absolute Position Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Broken Absolute positioning Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
      .logo {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <p><strong>Broken Absolute positioning Pagelet:</strong> Broken Absolute positioning Pagelet</p>
    <div>
      <img class="logo" src="../../../images/logo-cerner.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum</p>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
  </script>
  </style>
</html>

Methods available to $HL.App:

Basic Authorization Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/basic_authorization_pagelet/', 'test');
    </script>
  </body>
</html>

Basic Authorization Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Basic Authorization Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
    </style>
  </head>
  <body>
    <p><strong>Basic Authorization Pagelet:</strong> Basic Authorization Pagelet</p>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
  <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
  </script>
</html>

Shared Secret Authorization Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
       $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/shared_secret_authorization_pagelet/', 'pagelet', {secret: 'abc123'});
       $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/shared_secret_authorization_pagelet/', 'pagelet_fail', {secret: 'def456'});

       var pagelets = document.getElementsByClassName('xfc');
       var pagelet = pagelets[pagelets.length - 1];
       document.getElementsByClassName('xfc');
       pagelet.insertAdjacentText('afterbegin', "The following pagelet is blocked because the secrets do not match.");
    </script>
  </body>
</html>

Shared Secret Authorization Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Shared Secret Authorization Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <p><strong>Shared Secret Authorization Pagelet:</strong> This pagelet is authorized using a secret</p>
    <p>Lorem ipsum dolor sit amet, enim quaerendum per et. Affert interpretaris eum et, postea adipisci no vel, ex vim tation tritani recteque. Veri altera detraxit eu duo, sint delectus dignissim vis ut. An saepe alienum eam, fugit diceret theophrastus cum eu, eam te laudem mentitum concludaturque. Verear aperiam viderer ad duo, sit ut everti consulatu forensibus, vis summo volutpat at.Id mel consequat constituto, ullum errem ut sea. Eos viris periculis aliquando id. Id esse facer vel. Bonorum volumus nam eu, mea populo tacimates pertinax te, nostro offendit perfecto ea nam. Populo appareat his ut, veri commune gloriatur ad eos. Enim labore albucius in nec, vis exerci propriae deleniti et. Cu cum minimum offendit facilisis, principes elaboraret an mei, dicat dissentias in usu. Congue alienum ea eam. Usu eu verear inimicus explicari, elit torquatos temporibus per ne.</p>
  </body>
  <script>
    //Don't know which origin to trust, trust all origins that know the secret.
    $HL.App.init({
      acls: ['*'],
      secret: 'abc123',
    });
  </script>
</html>

Failed Authorization Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
       $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/failed_authorization_pagelet/', 'pagelet');
       var pagelets = document.getElementsByClassName('xfc');
       var pagelet = pagelets[pagelets.length - 1];
       pagelet.insertAdjacentText('afterbegin', "The following pagelet is blocked because current origin is not included in its ACL list.");
    </script>
  </body>
</html>

Failed Authorization Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>Failed Authorization Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <p><strong>Failed Authorization Pagelet:</strong> Long paragraph</p>
    <p>Lorem ipsum dolor sit amet, enim quaerendum per et. Affert interpretaris eum et, postea adipisci no vel, ex vim tation tritani recteque. Veri altera detraxit eu duo, sint delectus dignissim vis ut. An saepe alienum eam, fugit diceret theophrastus cum eu, eam te laudem mentitum concludaturque. Verear aperiam viderer ad duo, sit ut everti consulatu forensibus, vis summo volutpat at.Id mel consequat constituto, ullum errem ut sea. Eos viris periculis aliquando id. Id esse facer vel. Bonorum volumus nam eu, mea populo tacimates pertinax te, nostro offendit perfecto ea nam. Populo appareat his ut, veri commune gloriatur ad eos. Enim labore albucius in nec, vis exerci propriae deleniti et. Cu cum minimum offendit facilisis, principes elaboraret an mei, dicat dissentias in usu. Congue alienum ea eam. Usu eu verear inimicus explicari, elit torquatos temporibus per ne.</p>
  </body>
  <script>
    $HL.App.init({
      acls: ['https://google.com']
    });
  </script>
</html>

UpdateUrl Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      var pagelet = $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/update_url_pagelet/', 'pagelet');
      // Simulate updating frame url
      pagelet.on('hl.sdk.newProviderURL', function(obj) {
        history.pushState({},"URL Rewrite", window.origin + obj.url);
       });
    </script>
  </body>
</html>

UpdateUrl Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>UpdateURL Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <p><strong>UpdateURL Pagelet:</strong> Clicking the following button will update the url.</p>
    <button type="button" id="updateURL">Click here</button>
  </body>
  <script>
    $HL.App.init({
      acls: ['https://pages.github.cerner.com']
    });
    document.getElementById("updateURL").onclick = function(){
      $HL.App.updateURL('/updated_page');
    }
  </script>
</html>

ScrollIntoView Index Page:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>HealtheLife</title>
    <meta charset="utf-8" />
    <style type="text/css">
      iframe {
        width: 100%;
      }
      .xfc {
        margin-top: 20px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <script>
      $HL.Framework.init();
      var pagelet = $HL.Framework.mount(document.body, 'https://docs.healtheintent.com/examples/scroll_into_view_pagelet/', 'pagelet');
    </script>
  </body>
</html>

ScrollIntoView Pagelet:

<!DOCTYPE html>
<html lang="en-us" hidden>
  <head>
    <title>ScrollIntoView Pagelet</title>
    <meta charset="utf-8" />
    <style>
      html[hidden] {
        display: none;
        visibility: hidden;
      }
      html, body {
          /* Prevent bars and clipping. */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
    <script src="https://d3utab4pcwsdva.cloudfront.net/healthelife_sdk.js"></script>
  </head>
  <body>
    <p><strong>ScrollIntoView Pagelet:</strong></p>
    <p>Lorem ipsum dolor sit amet, enim quaerendum per et. Affert interpretaris eum et, postea adipisci no vel, ex vim tation tritani recteque. Veri altera detraxit eu duo, sint delectus dignissim vis ut. An saepe alienum eam, fugit diceret theophrastus cum eu, eam te laudem mentitum concludaturque. Verear aperiam viderer ad duo, sit ut everti consulatu forensibus, vis summo volutpat at.Id mel consequat constituto, ullum errem ut sea. Eos viris periculis aliquando id. Id esse facer vel. Bonorum volumus nam eu, mea populo tacimates pertinax te, nostro offendit perfecto ea nam. Populo appareat his ut, veri commune gloriatur ad eos. Enim labore albucius in nec, vis exerci propriae deleniti et. Cu cum minimum offendit facilisis, principes elaboraret an mei, dicat dissentias in usu. Congue alienum ea eam. Usu eu verear inimicus explicari, elit torquatos temporibus per ne.</p>
    <p>Clicking the following button will scroll to top of iframe.</p>
    <button type="button" id="top">Click here</button>
  </body>
  <script>
    $HL.App.init({
      acls: ['https://docs.healtheintent.com']
    });
    document.getElementById("top").onclick = function(){
      $HL.App.scrollIntoView();
    }
  </script>
</html>

Note: This page includes links to external resources. These resources are provided for reference purposes and should be used with caution. Contact your Cerner support team for more information about third-party content.