Work with Child FlexCards
Learning Objectives
After completing this unit, you’ll be able to:
- Explain how and why to use parent and child FlexCards.
- Make a collapsible block.
- Describe how to configure data sources for child and parent FlexCards.
- Clone a FlexCard.
Introduction
In the OmniStudio FlexCards module, you explored the capabilities of FlexCards and learned how to build and style them. If you have not completed OmniStudio FlexCards, we highly recommend you do so as the starting point for learning FlexCards.
OmniStudio FlexCards display contextual information in an at-a-glance format and provide access to relevant tasks for the displayed data. This module delves further into FlexCard elements and data sources and how you use states and conditions. Let’s start by learning more about child and parent FlexCards.
The steps in this module are for demonstration purposes only. OmniStudio is not enabled in Trailhead Playground orgs.
Child and Parent FlexCards
When you define a FlexCard, toggling on the Is Child FlexCard setting marks the FlexCard as a “child” card. Child FlexCards are embeddable in other FlexCards, often referred to as “parent” FlexCards.
So, why use child FlexCards?
-
Child FlexCards are reusable. Your team makes a child FlexCard that displays specific information and is reusable in multiple FlexCards, saving the time it takes to create new FlexCards or clone and change them for your needs.
-
Child FlexCards make multiple data sources on one FlexCard possible. A child FlexCard can have its own data source, independent of a parent. As there is no limit to the number of child FlexCards on one FlexCard, this opens up the option to show data from many sources.
-
Child FlexCards are also used as flyouts. Flyouts help you organize how data displays. For example, if you want to have specific data accessible in a FlexCard but it isn't necessary to display it at all times, configure a flyout action to display it using a child FlexCard in a popover or modal window.
In this example, a FlexCard displays an account’s contacts. This is actually two FlexCards.
A parent FlexCard (1) holds the child FlexCard (2) inside it. Let’s take a look at the two FlexCards used to build this example.
Below is the parent FlexCard with a header and an icon representing contacts. Underneath is an empty space with a dropdown arrow where the child FlexCard is embedded. We’ll talk about that arrow and what it signifies shortly.
Now look at this parent Contacts FlexCard from a different perspective. What does it look like if you see just the elements used to build it? These are elements you’re already familiar with from the OmniStudio FlexCards module.
Note the State element at the top of the card. This is where you add the elements to build your card. Every FlexCard is generated with a state, a topic we cover more later on in this module.
Now take a look at the child FlexCard configured to display the contact information.
The elements you use to create the child FlexCard are the Block, Text, and Action elements.
FlexCard Element
In order to embed a child FlexCard in a parent, you must first activate it by clicking the Activate button in the header. Then in the parent FlexCard, drag and drop the FlexCard element onto the canvas and configure the child card properties.
Use the FlexCard Name field (1) to select the child FlexCard you want to embed in the parent. The Data Node field (2) involves passing data from the parent to the child, which you’ll learn about soon.
Take another look at all of the elements used for both FlexCards once the child is embedded in the parent. Note the collapsible block and FlexCard element.
Collapse a Block
Remember that dropdown arrow in the parent FlexCard example? It indicates that the block is collapsible—that is, users hide and expand information. In this example, any information within the block is hidden.
Users click the arrow (1) to expand the block and view the data.
To make a collapsible block, select the Collapsible checkbox (1) to let users view and hide the block when they want. There are two available options to further configure the collapsible block. Label (2) the collapsed block and select the Collapsed By Default checkbox (3) to always hide the block when the FlexCard first displays.
Imagine you want to distinguish between different data on one FlexCard or a console displaying several cards. Making a collapsible block keeps the FlexCard clean and streamlined.
The below image shows part of a console that has collapsed blocks. Note the two collapsed blocks have the labels Policies and Cases. They are also collapsed by default.
Let’s zoom in on one of the collapsed blocks. You expand a block to display more information (note the expanded Cases block below). To create this look, group the elements inside the block and designate the block as Collapsible and Collapsed By Default (as detailed above). Use the Label field to name this block as the Cases block.
Configure Data Sources for Parent and Child FlexCards
FlexCards are capable of displaying data from multiple sources. This is possible because of child FlexCards. A child can use the parent FlexCard’s data source or an independent data source. If a child card and parent card are using independent data sources, you configure them independently in the Setup panel.
Pass a Record or Array of Data to a Child
This example shows the Properties panel for the FlexCard element in the parent.
Select the child FlexCard in the FlexCard Name field (1) as usual. Note the Data Node field (2). This is where you select an available data node to pass a record or an array of records to the child FlexCard. In this FlexCard, {record} is selected, which sends just the current record’s data to the child. Another data node is {records}, which sends all data.
All of this is done in the parent FlexCard. What needs to be done in the child FlexCard? If a child uses the parent data source, it does not matter if its data source is configured or set to None. Either way, the parent’s data source overrides the child’s data source if a data node is selected because the record is already set.
Pass a Data Field to a Child
What if you want to pass a specific data field to the child? You use the Attributes property. Enter an attribute to pass, and assign it a value. Take a look at this example.
The parent has a FlexCard element for the child. The Data Node field is empty. Here, you want to pass an Id from the parent to child. You assign values to attributes in the Attributes (1) section. Enter Id as the Attribute (2) to pass, and {Id} as the Value (3).
Again, this is all done in the parent FlexCard. In the child FlexCard’s Setup tab, you must input the Id into its data source.
In the above example, note the Input Map (1) section. The child FlexCard’s data source’s Input Map shows the Id (2) as the input. The Value field uses the parent’s Record Id as the value of the child’s contextId, {Parent.Id} (3).
Clone to Create a New FlexCard
Let’s take a slight detour to a different topic: cloning a FlexCard. One advantage of cloning a FlexCard is to save time. Cloning elements within a FlexCard also saves time.
For example, you have a FlexCard that looks very close to what you want, and just need some minor adjustments or additions. Cloning the FlexCard creates a new FlexCard copy with the layout or settings of the FlexCard you are cloning. Clicking the Clone button in the FlexCard you want to clone opens a modal window like the one shown below.
Cloning a FlexCard isn’t possible until you change the Card Name (1). In this example, the Clone button (2) is inactive because the name hasn’t been changed yet.
If you want to create an identical copy of an activated FlexCard without affecting the places it is used, create a new version. Versioning keeps the name and author the same, but lets you make edits and changes without affecting the active version used, so nothing will break while you make updates. Don’t worry—versioning is covered in more detail in a later unit.
Feeling confident about embedding FlexCards? Then head over to the next unit, where you learn how to build FlexCards with external data.
Resources
