Building Contact Summary

Building CHT application contact summary

This tutorial will take you through building a contact summary for CHT applications.

Contact summaries display basic information about the contact.

You will be adding a contact summary that displays information about a person’s patient id, age, sex, phone number, and information about the place they belong to ie. parent.

Brief Overview of Key Concepts

Each field that can be shown on a contact’s profile is defined as an object in the fields array of contact-summary.templated.js.

The properties for each object determine how and when the field is shown.

Required Resources

You should have a functioning CHT instance with cht-conf installed locally, and completed a project folder setup.

Implementation Steps

Create a contact-summary.templated.js file. (This may have already been created by the initialise-project-layout command.)

1. Add Dependencies and Variable Definitions

Add the following dependencies and variable definitions at the top of the file:

const thisContact = contact;
const thisLineage = lineage;

2. Define Contact Summary Fields

Define the patient_id, age, sex, phone, and parent contact fields as shown below:

const thisContact = contact;
const thisLineage = lineage;

const fields = [
  { appliesToType: 'person', label: 'patient_id', value: thisContact.patient_id, width: 4 },
  { appliesToType: 'person', label: 'contact.age', value: thisContact.date_of_birth, width: 4, filter: 'age' },
  { appliesToType: 'person', label: 'contact.sex', value: 'contact.sex.' + thisContact.sex, translate: true, width: 4 },
  { appliesToType: 'person', label: 'person.field.phone', value: thisContact.phone, width: 4 },
  { appliesToType: 'person', label: 'contact.parent', value: thisLineage, filter: 'lineage' },
];

3. Export fields

Export the defined fields as shown below:

const thisContact = contact;
const thisLineage = lineage;

const fields = [
  { appliesToType: 'person', label: 'patient_id', value: thisContact.patient_id, width: 4 },
  { appliesToType: 'person', label: 'contact.age', value: thisContact.date_of_birth, width: 4, filter: 'age' },
  { appliesToType: 'person', label: 'contact.sex', value: 'contact.sex.' + thisContact.sex, translate: true, width: 4 },
  { appliesToType: 'person', label: 'person.field.phone', value: thisContact.phone, width: 4 },
  { appliesToType: 'person', label: 'contact.parent', value: thisLineage, filter: 'lineage' },
];

module.exports = {
  fields: fields
};

4. Compile and Upload App Settings

To compile and upload app settings to your local instance, run the following command:

cht --url=https://<username>:<password>@localhost --accept-self-signed-certs compile-app-settings upload-app-settings

Related Content

CHT Applications > Features > Contacts : Contact Summary

The people and places that are being cared for

CHT Applications > Reference > contact-summary.templated.js : Contact Summary

Contact Pages: Customizing the fields, cards, and actions on profile pages


Last modified 16.07.2021: Update references from medic-conf to cht-conf (#529) (8879b500)
Edit this page Create documentation issue Create project issue