Create Your Own Health Cloud Empower Components

Use these examples to help you create custom Health Care Empower components.

Create a component that works with the care plan selector

You can create a component to display custom objects or information for a care plan or for a patient or member. For example:

For a custom object, display the related list of records for the care plan.
Display a list of the EHR records for the person, such as medications or visits.
Display the list of care plan problems or goals.
Display a graph of medical device measurements or lab results.
Display details of the care plan.

The custom components are used with the Empower care plan selector, so you must handle the HcCommunityEventCarePlanSelected event.

For example:

.cmp file

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global"
2        >
3      <!-- attributes here -->
4
5   <aura:handler event="HcCommunityEventCarePlanSelected" action="{!c.onCarePlanChange}"/>
6
7      <!-- display data here -->	
8
9</aura:component>

controller.js file

1({
2	onCarePlanChange : function(component, event, helper) {
3        var carePlanId = event.getParam("carePlanId");
4        var patientId = event.getParam("patientId");
5        // do some action here to update the data/layout of the component
6	}
7})

Create a custom component that replaces the care plan selector

You can create a substitute component for the care plan selector. For example, the custom component could have a select list that displays different information or behaves differently than the one included in the package. Or you could add a text search box to find a name or medical record number.

The component must fire the HcCommunityEventCarePlanSelected event trigger.

.cmp file

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
2        <!-- attributes here --> 
3   <aura:registerEvent name="carePlanChange" type="c:HcCommunityEventCarePlanSelected"/>
4        <!-- display data here --> 
5</aura:component>

controller.js file

1({ 
2       onSomeActionInTheComponent : function(component, event, helper) { 
3          var carePlanId = [get from component];
4          // OR 
5          var patientid = [get from component]; 
6          var carePlanEvent = 
7             $A.get("e.HcCommunityEventCarePlanSelected"); 
8             carePlanEvent.setParams({ 
9                'carePlanId': carePlanId, 
10                'patientId': patientId 
11             }).fire(); 
12       } 
13})

See Also

Admin Guide: Customize Fields in the Health Cloud Empower Lightning Components