Skip to main content

Display Data and Actions on a FlexCard

Learning Objectives

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

  • Describe the various FlexCard elements.
  • Explain the purpose of Block elements.
  • Explain the purpose of Text and Field elements.
  • Explain the purpose of Icon elements.
  • Explain the purpose of Menu and Action elements.

FlexCard Elements

You’re probably excited to dig even deeper into FlexCards, so let’s jump right into it.  

The following FlexCard has two distinct areas. The left area displays basic account information for a customer account: an icon, a title, four fields, and a menu for actions. The right area, although blank in the following example, will eventually display weather information. In this unit, however, you focus on the account information side.

View of a FlexCard, focusing on the account information.

First, let’s strip away the data and the style of the FlexCard to show how the elements are working underneath.

The elements that make up the FlexCard with account details.

Block Elements

There are two Block elements that make up this FlexCard. A Block element combines logical groups of other elements inside a FlexCard. You can make a Block collapsible to hide and expand its content. You can also place a Block inside another Block.

The Account Block contains a few simple user interface (UI) elements: Text, Icon, and Menu UI elements. It also includes another Block, which groups an Icon and Text element to make a header in the FlexCard.

Text and Field Elements

In the previous example, the Text element is used to add the data fields returned from the data source. The Text element combines text and parsed merge fields using a rich text editor. The rich text editor adds an HTML div for each section of text to build the layout of the text element. This element also includes a Style menu for formatting the text. 

Fields menu within TEXT PROPERTIES.

You also use Field elements to display data returned from a data source on a FlexCard.

There are two ways to add data fields using this element. The simplest way is to drag a field from the Fields list onto the canvas. The Fields list shows the list of available data fields.

Data fields in the FIELDS list.

The second way is to drag the Field element from the Elements list onto the canvas. The Field element displays the output from a data field.

Outputs from a data field.

The Field properties include a Field Type setting, which is useful for showing data in its correct format. For example, a Date field type displays a date in its proper format.

Icon Elements

The Icon element displays a Salesforce SVG icon that you access from the Salesforce Lightning Design System library of icons or a custom icon that you upload.

Icon elements.

You can configure icons to perform actions when clicked. Image, Block, and Toggle elements also have this capability.

Menu and Action elements.

The Menu element (1) creates a menu from a list of actions on a FlexCard. Style the menu button and each action in the menu’s dropdown. This element is a useful option when you want to add a lot of actions to your FlexCard but you don’t want to clutter the card. The Action element (2) renders text or a button that executes an action when clicked.

There are several types of actions available.

Action Type Name
Description

Card

Perform card-level actions, such as reload, update data source, and remove.

Data

Trigger a data source from an action to get data from a server or post data to a server.

Event

Custom: Fire a Custom Event to notify the parent FlexCard of an event occurring.

PubSub: Fire a PubSub Event to notify another component on a page or application of an event occurring.

Flyout

Display additional information from a child card, OmniScript, or custom Lightning web component (LWC) in a modal or popover.

Navigate

Select a target URL or a PageReference type that enables navigation within Lightning Experience, within Communities, or to an external web address.

OmniScript

Launch an OmniScript from the FlexCard.

Update OmniScript
Update an OmniScript from a FlexCard embedded as a custom Lightning web component in an OmniScript.

Customizable FlexCards help you see all sorts of awesome information at a glance, right? Next up, kick your cards up a notch and learn how to style the displayed data and Action elements you add to FlexCards.

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities