Exercise - Display FHIR JSON data from FHIRlink

  • 17 minutes

In this exercise, you extend and refactor your canvas app to display and interact with the Azure Health Data Services FHIR data. You retrieve this data from the FHIRlink connection calls, FHIRlink.ListResources and FHIRlink.GetResource, and then save it into the _patientListTable and _selectedPatient fields. Then, you use the TextInputSearch control to capture filter parameters for the FHIRlink.ListResources operation, bind the results to a gallery control on the screen, and then display details of a selected patient record in the gallery.

Bind the data by FHIR Patient name field

In the previous exercise, you used the Power Apps maker tools to view the results of the queries and variable values. In this task, you bind the table data saved in the _patientListTable variable to a Power Apps canvas app gallery control. This control presents the list of patients to the canvas app user.

A gallery is a container for several child fields, and it’s available from the Gallery template. When you select a gallery row, you capture the OnSelect event and make a call to retrieve the full single patient record by using FHIRlink.GetResource, refactoring the code in the previous exercise.

  1. Go to Power Apps.

  2. Open your saved canvas app for editing.

  3. Insert a new Gallery into the container control named SidebarContainer1.

    Screenshot of Power Apps with the Insert menu expanded showing search results for "gallery" with Vertical gallery highlighted.

  4. Name the control PatientListGallery.

  5. Change the Layout to Title and Subtitle.

  6. The PatientListGallery now includes child fields named something similar to Title1 and SubTitle1. You can rename these fields to suit your requirements.

  7. In the Items property for the gallery, change the value from CustomGallerySample to _patientListTable.

  8. Use the formula bar to set the following basic properties for the PatientListGallery control:

    • AlignInContainer - AlignInContainer.Center

    • FillPortions - 1

    • Width - SidebarContainer1.Width

The gallery is now bound to the _patientListTable, which contains the patient entry items.

The gallery template displays the details for each item in the table, each being a FHIR Patient JSON object.

The Patient object is a complex structure that contains information about a patient and a large set of related data. The current call to FHIRlink.ListResources is:

FHIRlink.ListResources("Patient", {_elements:"id,name,birthDate,telecom"})

This entry means that only the listed fields are returned. The name element is an array of complex JSON objects. The following example shows a FHIR Patient name element:

"name": [{
    "use": "official",
    "family": "Grimes165",
    "given": [
        "Alysia661"
        ],
    "prefix": [
        "Mrs."
        ]
    },
    {
    "use": "maiden",
    "family": "Bins636",
    "given": [
        "Alysia661"
    ],
    "prefix": [
        "Mrs."
    ]
 }]

For example, first name and last name are represented by given and family. You can combine these and other nodes to display Patient details on the PatientListGallery gallery template. To display this and other Patient information, you need to use some Power Fx formulas.

  1. Select the Gallery template for PatientListGallery.

  2. Select the Title1 field and then select the Text property in the formula bar.

  3. To access the currently selected item from the Gallery bound list, Power Fx provides the ThisItem object from within the gallery template.

  4. Change the Text property as follows:

    First(ThisItem.Value.resource.name).family & " (" & First(ThisItem.Value.resource.name).use & ")"

    This Power Fx formula:

    1. Accesses the selected Patient object through ThisItem.Value.

    2. Retrieves the first name element by position.

    3. Retrieves the family element value from that name element.

    4. Retrieves the first name element by position.

    5. Retrieves the use element value from the name element.

    6. Combines the values into a string for display in the Title1 text label.

  5. Select the Subtitle1 field and then select the Text property in the formula bar.

  6. Change the Text property as follows:

    First(Filter(Table(ThisItem.Value.resource.telecom), Value.use="home", Value.system="phone")).Value.value

    This Power Fx formula:

    1. Filters the telecom array for items that match the use and system values of 'home' and 'phone'.

    2. Retrieves the first item that the filter returns.

    3. Retrieves the value string for display in the Subtitle1 text label from that telecom element.

    Screenshot of the list of patient list values filtered.

    Note

    Your results might differ if you have existing data in your FHIR service and not only the data that's included in the sample bundles.

The PatientListGallery control is bound to the FHIR bundle data that the system retrieves when you select the IconSearch control. The Title1 and Subtitle1 fields display Patient details.

You can experiment with the different display values from the Patient details, such as including First Name (given) or using different fields for the Subtitle1 text by retrieving other Patient resource elements.

Filter data in the patient record

The current call to FHIRlink.ListResources is as follows:

FHIRlink.ListResources("Patient", {_elements:"id,name,birthDate,telecom"})

You add the _elements parameter to filter the data in each patient record that's returned, but you can further filter the list of patients returned in the bundle.

When you add the new filter criteria to the _elements parameter, you can view a reduced number of the Patient records. The HL7 FHIR specification offers several search and filter options for the patient at the (Patient Search) criteria. For this example, you add the filter by name criteria.

Note

When you filter by using the name, you can match any string fields, including family, give, prefix, suffix, and/or text.

The name value to filter is captured in the TextInputSearch control Text property.

  1. Select the IconSearch control and then select OnSelect in the formula bar.

  2. Update the formula FHIRlink.ListResources statement to filter by the Patient name field. Add the following parameter following the _elements parameter value, delimited by a comma:

    additionalParameters:"name=" & *TextInputSearch*.Text

    The updated line of the formula is as follows:

    Set (_patientList, FHIRlink.ListResources("Patient", {_elements:"id,name,birthDate,telecom", additionalParameters:"name=" & *TextInputSearch*.Text }));

  3. Preview the application and then run the query as follows:

    1. Press the F5 key to preview the application.

    2. In the TextInputSearch box, enter a name. For example, use a name found in your sample bundles: FHIRlink.

    3. Select the IconSearch control.

    4. View the updated list that displays in the PatientListGallery.

    5. Press the Esc key to leave the preview mode.

Screenshot of the filtered list.

This search should only include patients whose names include FHIRlink in one of the fields.

The call to FHIRlink.ListResources is now filtering on the name field, matching against all name fields according to the FHIR specification.

You can refactor the formula to retrieve information for a single patient. Instead of retrieving the first item from the _patientListTable, you can move the Power Fx code to retrieve the single patient to the event when you select an item in the gallery.

Update the formula to retrieve a patient by selected identifier

To update the formula to retrieve a patient by a selected identifier, follow these steps:

  1. Select the IconSearch control and then select OnSelect in the formula bar.

  2. Update the formula to remove the following lines:

    Set (_selectedPatientId, First(_patientListTable).Value.resource.id);

    Set (_selectedPatient, FHIRlink.GetResource("Patient", _selectedPatientId));

  3. Select the Gallery template in the PatientListGallery control.

  4. In the formula bar, select the OnSelect event.

  5. Update the formula to include the following Power Fx statements:

    Set (_selectedPatientId, Set (_selectedPatientId, ThisItem.Value.resource.id));

    Set (_selectedPatient, FHIRlink.GetResource("Patient", _selectedPatientId));

The _selectedPatientId is updated with the ID of the selected patient in the gallery.

Display patient details on the canvas app

The FHIRlink.GetResource operation retrieves the full Patient resource, so you can select any patient information to display in the canvas app. In this step, you display the following patient data elements:

  • Resource ID - id

  • Marital Status - maritalStatus

  • Birth date - birthDate

  • Gender - gender

The following steps outline how to add the controls for display and bind the correct patient elements.

  1. Select the MainContainer1 control.

  2. Insert a new container control and name it Container1 to help control the layout of your new controls.

  3. Select the new Container1 control and then insert the following controls:

    Type Name Text
    Text label LabelPatientID Patient Id:
    Text label LabelMaritalStatus Marital Status:
    Text label LabelBirthdate Birth Date:
    Text label LabelGender Gender:
    Text input TextPatientID selectedPatientId
    Text input TextMaritalStatus First(_selectedPatient.maritalStatus.coding).display
    Text input TextBirthdate _selectedPatient.birthDate
    Text input TextGender _selectedPatient.gender

  4. Add a vertical gallery to the form and then name it GalleryIdentifiers.

    • Change the Layout to Title, Subtitle, and Body.

    • Change the Items property to Table(_selectedPatient.identifier).

  5. In the gallery item template, replace the existing Text label controls with the following name and text property value pairs. You can also make sure that the controls render clean in the item template by adjusting their size, position, and alignment.

    Type Name Text
    Text label LabelCode Code:
    Text label LabelValue Value:
    Text label LabelType Type:
    Text label LabelSystem System:
    Text input TextCode ThisItem.Value.code
    Text input TextValue First(ThisItem.Value.type.coding).code
    Text input TextType ThisItem.Value.type.text
    Text input TextSystem ThisItem.Value.system

  6. A patient resource can include an array of names, so you can add a gallery to display a list of names. This approach helps you validate that the search is correct.

  7. Add a vertical gallery to the form and then name it GalleryPatientNames.

    • Change the Layout to Blank.

    • Change the Items property to Table(_selectedPatient.name).

  8. In the gallery item template, replace the existing Text label controls with the following name and text property value pairs. You can also make sure that the controls render clean in the item template by adjusting their size, position, and alignment.

    Type Name Text
    Text label LabelNameUse Use:
    Text label LabelNameFamily Family:
    Text label LabelNameGiven Given:
    Text label LabelNamePeriod Period:
    Text input TextNameUse ThisItem.Value.use
    Text input TextNameFamily ThisItem.Value.family
    Text input TextNameGiven Concat(Filter(Table(ThisItem.Value.given), Value), Value, ", ")
    Text input TextNamePeriod ThisItem.Value.period.end

  9. Test the updates. Retrieve the full Patient record by using the GetResource method and then bind the controls to Text labels and a child array property to a new gallery control.

  10. Preview the application and then run the query to check the updates.

    1. Press the F5 key to preview the application. After the application runs, select the IconSearch control.

    2. In the TextInputSearch box, enter a name, such as Smith.

    3. View the updated list that the PatientListGallery displays.

    4. Select a row in the gallery and then view the Patient details that are bound to your new controls.

    5. Press the Esc key to leave the preview mode.

Screenshot of the details pane of a patient that's listed in the patient gallery.

Notice that the GalleryPatientNames now includes two names for Patient FHIRLink2.

The canvas app now displays data from two requests to your FHIR service through the FHIRlink connector calls FHIRlink.ListResources and FHIRlink.GetResource.

In addition to patients, the Azure Health Data Services FHIR service hosts related FHIR resources, such as Encounter, Observation, or Appointments. After you capture a selected patient identifier, you can use it to retrieve these related records. Because this data is FHIR data, you can treat it the same way.

The next step outlines how to retrieve related appointment records and display them on the form.

  1. Select the Gallery template in the PatientListGallery control.

  2. In the formula bar, select the OnSelect event.

  3. Update the formula to include the following Power Fx statement:

    ClearCollect(_appointmentList, Table(FHIRlink.ListResources("Appointment", {_elements:"id,status,serviceType,priority,subject,description,start,end,minutesDuration", additionalParameters:"patient=" & _selectedPatientId}).entry));

  4. This statement retrieves the list of appointment records that are related to the selected patient through the _selectedPatientId, and then it casts the results into a table named _appointmentList.

  5. Select the MainContainer1 control.

  6. In the space to the right of the patient controls, add the following controls:

  7. Add a Vertical gallery to the form and then name it GalleryAppointments:

    • Change the Layout to Title, Subtitle, and Body.

    • Set the Items property to _appointmentList.entry.

  8. In the gallery item template, replace the existing Text label controls with the following name and text property value pairs. You can also make sure that the controls render clean in the item template by adjusting their size, position, and alignment.

    Type Name Text
    Text label LabelApptSubjectEdit Subject:
    LabelApptType Type:
    LabelApptComment Comment:
    LabelApptStatus Status:
    LabelApptStart Start Date:
    LabelApptEnd End Date:
    LabelApptDuration Duration:
    Text input TextApptSubjectEdit ThisItem.Value.resource.description
    TextApptType First(ThisItem.Value.resource.appointmentType.coding).display
    TextApptComment ThisItem.Value.resource.comment
    TextApptStatus ThisItem.Value.resource.status
    TextApptStart Text(DateTimeValue(Text(ThisItem.Value.resource.start)), DateTimeFormat.ShortDateTime)
    TextApptEnd Text(DateTimeValue(Text(ThisItem.Value.resource.end)), DateTimeFormat.ShortDateTime)
    TextApptDuration ThisItem.Value.resource.minutesDuration

  9. Preview the application and then run the query to check the updates.

    1. Press the F5 key to preview the application. When it's running, select the IconSearch control.

    2. In the TextInputSearch box, enter a name of a patient with related Appointment records. For example, search for a single patient named FHIRlink1.

    3. View the updated list that the PatientListGallery displays.

    4. Select a row in the gallery and then view the patient details that are bound to your new controls.

    5. View the list of Appointments for the selected patient.

    6. Press the Esc key to leave the preview mode.

Screenshot of the preview showing a patient with appointments.

The latest update combines the selection of the patient details with retrieving related appointment records. You can display the patient and appointment data in the canvas app by using common Power Fx formulas and expressions.

For more information, see the following links:

Another resource that you can review is Power Apps formula reference.

FHIR®, Google, and EPIC® are registered trademarks that are owned by Health Level Seven International and Epic Systems Corporation, respectively. Use of these trademarks on this page doesn't constitute endorsement by Health Level Seven International or Epic Systems.