Build a FlexCard with External Data

Learning Objectives

After completing this unit, you’ll be able to:

• List potential external data sources for FlexCards.
• Configure a data source to display external data.
• Create a flyout action to display data.
• Create a table to display data.
• Add an image to a FlexCard.

Why Use External Data?

External data includes all data from outside a Salesforce org. When you need data that is not in Salesforce, you use an external data source. Displaying external data on a FlexCard is a common need for implementations. External data sources include:

• Legacy data sources
• On-premises (on prem) data sources
• API integrations
• Other third-party data and applications

Using a weather API is a great way to practice getting data via a web API. There are lots of use cases for weather since severe weather is an important factor for many industries. Examples include weather damage to homes (insurance) and service outages due to inclement weather (energy).

Display External Data in FlexCards

Let’s look at an example. This FlexCard contains the current weather and forecast for an account’s location, determined by the billing postal code. 

The current weather includes the weather condition (1), the city and state (2), and the temperature (3). 

Wondering where the weather forecast is? It’s hiding. The Get 5-Day Forecast button (4) launches an action that displays the forecast. 

Here’s how the elements on this FlexCard are positioned to create this look. It has two Block elements on top of each other: the top block displays an image and the bottom block shows the weather data. Beneath the blocks is our Action element in button form, which launches the weather forecast data.

Let’s talk more about that Action element. By now, you’re familiar with displaying data on a FlexCard through elements such as Field and Text. Displaying data in a modal window or popover is ideal for when you need to save space on a FlexCard and prevent clutter. So, how do you do that? With a flyout action.

Display Data in a Flyout

A flyout is a great way to show additional data with a simple mouse click. 

A flyout can display:

• Information from long text strings that does not fit in the standard FlexCard field
• Data from child records, such as open cases for an account, or additional actions

The three flyout types are: 

• Child FlexCard
• OmniScript
• Custom Lightning web component (LWC)

Flyouts are created with the Action element by selecting the action type as Flyout. Clicking the action in our weather example FlexCard, Get 5-Day Forecast, displays a data table in a flyout in a modal window. 

This example is created with two FlexCards. The flyout type is a child FlexCard using a DataTable element. Take a look.

Here are the elements used to create this look for the flyout. The child FlexCard has two Block elements next to each other. The Icon Block has an Icon element and the 5-day Forecast Block has a DataTable element displaying the forecast data.

To create this flyout, you configure the Action element like this:

• Action Type: Flyout
• Flyout Type: Child Card
• Flyout: Select the activated child FlexCard to use as the flyout
• Open Flyout In: Modal

Fetch Multiple Days of External Data

The child FlexCard with the forecast data uses an Integration Procedure as an independent data source for displaying current and forecast weather data. 

When configuring the data source, enter Input Map variables to determine what information is sent between the tools. The Key AccountId with the Value {recordId} tells the Integration Procedure to retrieve details from account records. To get forecast data, in this case 5 days of data, a second Key/Value pair is used: Days and 5.

Weather Data Array

When you view the fetched data in the FlexCard, you see nodes, as in this example.

A “Forecast” node (1) that includes Date, Condition, HiLo Temp in °F and °C; and a “Current” node (2) with Condition, CityState, and Temp in °F and °C.

In the Weather FlexCard, the Integration Procedure pulls both current and forecast data. The best practice is to use the Result JSON Path to trim the JavaScript Object Notation (JSON) to display only the current data. 

To show the current weather data, trim the JSON to only show [“Current”] data using the Result JSON Path. For the 5-day forecast data, filter the JSON to only receive [“Forecast”] data using the Result JSON Path (1). The trimmed JSON displays in the JSON tab (2).

Display Data in a Table

The DataTable element creates a tabular structure to display the data fetched from the data source. 

With a table you can:

• Add, delete, and update columns.
• Change Field Labels (1).
• Make columns Sortable (2).
• Make fields Searchable (3).
• Change field Type (4).
• Make fields Editable (5).
• Make fields Visible or hide fields (6).

Edit the table to configure it how you want it to look. 

This is what the data table looks like with the settings from the previous image. It shows 5 days of forecast data, including the weather condition and high and low temperatures.

This method lets you display a lot of data in a condensed table format. 

Repeat Records

New FlexCards have Repeat Records enabled by default. When Repeat Records is enabled, this means that there will be one FlexCard instance for each record in the array. For example, a data source that returns a list of active cases for an account on the FlexCard. Each record displays all fields added to a state in its own container. 

If Repeat Records is disabled, the entire array is available inside of one FlexCard, as in the preceding table example. Repeat Records is found in the Setup panel.

Data tables already loop over and list multiple records, so with DataTable elements, you must disable the Repeat Records feature. If not disabled, the table displays multiple times, depending on the data from the data source. In the example of a 5-day weather forecast, the table would display five times. 

You should disable this feature in a few other instances:

• If you have a Chart element you want to display once
• If you have a child FlexCard you want to display once
• If you have a Custom Lightning web component that serves as a header for a Console App

OmniScript Support

You enable the OmniScript Support feature when the FlexCard interacts with an OmniScript, for example you embed a FlexCard inside an OmniScript with the OmniScript Lightning Web Component element or you update an OmniScript with the FlexCard's Update OmniScript action element. The OmniScript Support feature is in the Setup panel.

How to Use Image Elements

Perhaps you noticed the nice image in the weather card. Once uploaded, images are saved in the org’s library for later use. You also have the option to enter a URL for the image or a merge field from a data source.

After you add an image, adjust the image size relative to the canvas in the Properties and Style panels.

Beautiful! Images really make your FlexCards stand out. 

We continue the FlexCard fun in the next unit, where you learn all about FlexCard states and conditions. So, keep reading!