Add FlexCard States and Conditions

Learning Objectives

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

Create a conditional state to display data.
Explain FlexCard versioning.

Display Data Using Multiple FlexCard States

Every FlexCard is generated with a state. To create a new state, you add a State element to the canvas or clone an existing state. As you’ve seen, the state of a FlexCard controls what a user sees and does on the FlexCard. In the simplest case, a FlexCard can have:

An active state if there’s data to display
A blank or open state if there’s no data and limited actions

There is no limit to the number of states possible to add to a FlexCard, but the order of these states on the canvas plays an important role in determining which state displays.

Consider a situation that calls for different data to display on a FlexCard. For example, how do you create a FlexCard that shows insurance policy information but also displays a message if the account is past due? To make this happen, you create a new state in the FlexCard and set conditions. These conditions determine if, when, and how data displays on the FlexCard.

One FlexCard with three states that display based on set conditions.

This single FlexCard has three different states. The first state displays information on an active plan (1). The second state displays if the plan is past due (2). The third state displays if there is no active plan. It includes an action to add one (3). This blank state is made by selecting the Blank Card State checkbox in the State element’s Properties panel.

The order of the states and their conditions determine what data displays. From top to bottom, the first state that has true conditions is the one that displays. In this example, the state that displays is the state in last place because it is the first state that has a true condition. We recommend as best practice to have only one true state per record.

The last FlexCard State displays because it is the first one with a true condition.

Remember our weather card from the previous unit? Let’s use it as an example. You want an alert to display for an account when there is bad weather.

You make two states, one showing the weather and weather forecast, the other displaying some kind of alert with the current weather. Since you want the weather alert to show if certain weather conditions are met, you place that state in first position and the current weather state second. If the condition for the alert isn’t met, the second state displays.

Cloning a State and Configuring Display Conditions

This is the weather FlexCard that always shows the current weather for the account, based on the postal code.

Current state for the weather.

The state name is the default name Active (1). You clone (2) this state to create a new state that appears when set conditions are met.

Look at the elements that make up our weather FlexCard.

The Active State showing current weather.

Note the Active State at the top. Cloning this state copies all of these elements.

A Clone State window where you configure conditions for the state.

Upon cloning a state, you immediately see the option to configure the conditions that dictate when it displays. In this example, the Alert State displays if the Data Field Condition (1) is equal to (2) the Value Heavy Snow (3).

Let’s look at the clone of our weather FlexCard’s Active state, and note the changes to its appearance. Alert state for the weather.

The state name is called Alert, and next to it is the Condition that must be met for it to display (1). Note the Weather Alert image (2) that replaces the cheerful weather image that appears in the Active State. Also, while the same fields display the weather data (3), they have different styling. Finally, there is an extra button weather.com (4) that directs the user to a weather website when clicked.

Here’s what the placement of the elements for the Alert state looks like on the canvas. The same elements are used for both Active and Alert states: Blocks, an Image, Text, and Actions. The styling is what makes them look different from each other.

The Alert State clone of the Active State, modified for a weather alert.

Take note of the extra action in the Alert State: the Navigate Action, which is for the weather.com button. You learn about this next.

The Navigate Action

The Navigate Action directs users from the FlexCard to external web pages or to pages within Lightning Experience and Lightning Communities. The page reference in the Target dropdown menu determines this.

Navigate Action directing users to a Web Page.

In this example, the Action Type is Navigate (1), and users are directed to a Web Page (2) specified in the URL field (3).

Version a FlexCard

You learned about cloning FlexCards and elements, and touched upon versioning. Let’s dive deeper into versioning and examine when to version and why. Then, we’ll take a closer look at the difference between versioning and cloning.

Versioning is a way to make changes to your FlexCard while retaining the existing FlexCard. Versioning a FlexCard increments the Current Version number.

The FlexCard’s name and author remain the same, but the Current Version number (1) increments in the new version you want to edit. Click the New Version button (2) in the header of the FlexCard canvas when you want to version a FlexCard.

Only one version of a FlexCard is active at a time, so when you activate the new version, it automatically replaces the prior version wherever it is being used.

So, when do you version FlexCards and when do you clone FlexCards? Here’s a table that can help you decide.

Version a FlexCard	Clone a FlexCard
When you want to make slight modifications to an existing FlexCard to test behavior and layout. When you want the new FlexCard to replace the old one, such as when an update is needed.	When you want a FlexCard that is available independently from its parent. When you want to change the FlexCard’s Name or Author.

There’s more FlexCard goodness to come! Get ready to activate and publish FlexCards in the next unit.