Sample 2: Bind FHIR data in your canvas app using FHIRlink connector

This example follows Sample 1: Set up and connect to FHIRlink and uses the same FHIRlink Sample app with the FHIRlink ListResources method. In this example, we show you how to bind the results of the method call and bundle entries to a canvas app control.

You can also download and import the final solution as an implementation sample. For more information, go to Download sample. Before you begin the example or use the sample, see Assumptions for sample usage.

Bind to a gallery control

In the previous sample, you viewed the _patientList variable value and saw that it contained a Bundle object and a child list of resources named entry. This bundle contained the results of the following ListResources method call via the OnSelect method:

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

The key element of the bundle resource that contains individual patient resources is the entry node. The FHIRlink.ListResources connector call returns a FHIR bundle as an untyped object data type. However, you can access this element on the patient list variable using the statement _patientList.entry. This element is an array containing the FHIR resource records to be displayed.

Each entry resource represents a matching record returned from the ListResources call, which is a Patient FHIR resource. The schema generated includes a representation of this Patient FHIR resource that can be used to bind the details on the gallery control. For more information on gallery controls, see Gallery control in Power Apps.

Before you bind this array to the canvas app controls, let's first convert the array to a Table data type that you can easily bind to the gallery. In the List Resources button's OnSelect method, add the following line of code:

ClearCollect(_patientListTable, Table(_patientList.entry));

This code converts the _patientList.entry array into a Table data type and clears the previous collection. The table provides a list of individual rows whose Value property includes the Patient FHIR resource.

For more information on the Power Fx Table and ClearCollect functions, see:

• Table function
• Collect, Clear, and ClearCollect functions

After converting the entry array to a table, bind the gallery item template details using the following steps:

1. Add a vertical gallery to the main screen on the FHIRlink Sample app and label it PatientList.

2. Change the Layout to Title and Subtitle.

3. In the Items property for the gallery, change the value from CustomGallerySample to _patientList.

   

Update gallery items

When setting the Items property for the PatientList gallery, you also need to set the details in the gallery item template. By default, the gallery automatically binds to the first available property on the table row, which is Value.

Each list item represents an entry list item with a resource node that contains the Patient FHIR resource details. Use the following steps to update the item template to bind to this resource node:

1. Select the Title1 label control under the PatientList gallery.

2. View the Text property on the Title1 label control. You can see that the property is automatically set to the value ThisItem.fullUrl

3. Change the Text property to ThisItem.Value.resource

The resource property contains details specific to the FHIR resource where the first parameter of the ListResources method determines the FHIR resource type. In this sample, we're viewing Patient resources, and the requested id, name, birthDate, and telecom values via the _elements parameter.

Each resource result differs based on the requested resource type in the ListResources method call. The updated ThisItem.Value.resource is still an object, and you need it to bind to field values. You can bind the labels to the simple data types available in resource and see the values in the gallery.

1. Select the Title1 label control under the PatientList gallery.

2. Change the Text property to ThisItem.Value.resource.resourceType

3. Select the Subtitle1 label control under the PatientList gallery.

4. Change the Text property to ThisItem.Value.resource.birthDate

5. Run the app in preview mode and select the List Resources button.

   

You can now view the contents of the entry list on the bundle root object, displaying the properties of the resource property for each entry returned by the ListResources request.

Display complex properties

FHIR resources typically consist of multiple levels of properties and aren't limited to simple data types. Like the Patient FHIR resource, elements can be complex objects or arrays of objects.

In this sample, the name and telecom properties are both multilevel arrays. Each telecom item is a complex ContactPoint data type. You can combine the following examples for gallery display:

• Select by position
• Select by criteria
• Concatenate values

Example 1: Select by position

You can select the first item in the list for a child array. This approach can be used for properties that often contain only one item. Let's illustrate an example with the name property.

1. Use the First function to select the first name value in the list. This function returns the first item in a list or array. After the first name value is returned, you can combine the family and use properties for display.

2. Select the Title1 label control under the PatientList gallery.

3. Change the Text property to First(ThisItem.Value.resource.name).family & ", (" & First(ThisItem.Value.resource.name).use & ")"

Example 2: Select by criteria

You can use this option to display a single array item search against the list item properties.

1. To show the home phone number, use the Filter function to filter the telecom field values on the system and use values.

2. The telecom property is an array like the entry node on the bundle. You can treat it the same way by converting it to a Table inline. After conversion, you also need to apply the value to the filter criteria.

3. Select the Subtitle1 label control under the PatientList gallery.

4. Change the Text property to First(Filter(Table(ThisItem.Value.resource.telecom), Value.use="home", Value.system="phone")).Value.value

Example 3: Concatenate values

Another option for a child array is to concatenate the list items into a delimited string. You can collapse all the family property values into a single string using the Concat function. Adding the carriage return character displays each name on a new line. This new formula also includes some null checks for completeness.

Similar to the telecom property, the name property is also an array that we need to convert to a Table inline.

1. Add a new label control to the PatientList gallery item template. Label it FamilyNames.

2. Expand the size to allow two or three lines.

3. Select the new FamilyNames label control under the PatientList gallery.

4. Change the Text property to Concat(Filter(Table(ThisItem.Value.resource.name), !IsBlank(Value.family)), Value.family & " (" & Value.use & ")", Char(13))

5. Run the app in preview mode and select the List Resources button.

Each patient FHIR resource includes a name field, which is an array of values. This field allows a patient record to capture multiple names such as their current name and a maiden name.

Here's an example of a patient name field:

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

The formula uses the Filter function to exclude the name values without a family property. For each item, the family and use properties are combined and the Concat function adds the new line delimiter.

Download sample

You can download and import the completed canvas app solution from this example as an implementation sample. The sample is available for download in the following three formats:

• Zip package: FHIRlink Sample2.zip
• MSAPP archive: FHIRlink Sample2.msapp
• Power Platform solution (contains all samples): FHIRlinkSamples.zip

For instructions on how to import and export canvas apps, see Export and import canvas app packages.

Next steps

In Sample 3: Combine methods for displaying FHIR data, learn how to use other FHIRlink methods and combine them in the app.

Learn more

To delve into more canvas app details related to this sample, see:

• Quickstarts:
  • Show a list of items in canvas apps
  • Show, sort, and filter data in a canvas app gallery
  • Get started with formulas in canvas apps
• Reference: Power Apps formula reference