Home

Developer Guide

Standalone My Profile

You can find a working version of the full application here.

Basic Setup

To get started with using the My Profile UI component on your HTML page, you will need three things:

  1. A script tag with a link to the JavaScript file
  2. A custom element on your HTML page where you want My Profile to appear
  3. A custom json file having configurable properties or the link to the standard DH one provide by the app: [url to the app]/myprofile-configuration.json. Ex: https://myprofile-qa.dignityhealthppe.org/myprofile-configuration.json.

Custom Json configuration file

{
  "tenantCode": "dignity-health",
  "theme": {
    "font": {
      "family": "",
      "cssUrl": "https://use.typekit.net/dfg1mni.css"
    },
    "colorPalette": "dhcl-dignity-health"
  },
  "tealiumScriptSrc": "__TealiumScriptSrc__"
}
Attribute Description Type Required App Default
tenantCode Identifies the hosting app string false none
theme Overrides the theme object false
> font Overrides the font object false
> > family Overrides font-family of app & colorPalette string false 'CSWeb-Regular', 'CSWeb-Light',
'CSWeb-Medium', Arial, 'Helvetica
Neue', Helvetica, sans-serif
> > cssUrl Url of file that declares all the font-faces string true (to have none
of a font (default renders Trade Gothic Next) default/custom font)
> colorPalette One of a few known css classes that sets string false dhcl-dignity-health
font-family, sizes & colors in the app.
Current possible values:
dhcl-dignity-health, dhcl-chi-health,
dhcl-common-spirit, dhcl-virginia-mason,
dhcl-neutral
tealiumScriptSrc Url of the script to register on the page to string false (true to none
record user/site metrics enable metrics)

Once added to the page, your code snippet should look like this:

<dhmp-root configuration-url="[url to the json file]"></dhmp-root>
<script type="text/javascript" src="[url to app]/my-profile.js"></script>

Note:

  1. dhmp-root must come first.
  2. Changes made in the local myprofile-configuration.json in the spa level are to test the spa in local. Files within site_resources has to be updated to get the changes deployed in other environments.

My-Profile-UI-Plugin consumption and package publish

  1. Install my-profile-ui-plugin within the consuming spa. An entry would be added within package.json for the myprofile-ui-plugin and the version installed.
npm install my-profile-ui-plugin

  1. Import an entry of PersonalInformationModule into account-settings.module.ts.

  2. Add the tag within the account-settings.component to consume the my-profile-ui-plugin.

<div class="column is-mobile">
      <dhmp-app-personal-information></dhmp-app-personal-information>
</div>