The New Flexcard Screen Component

In response to a call for volunteers, Josh Dayment and Karan Pant joined forces to create this great new component.

The Flow Flexcard Component presents collections of records in a neat set of actionable cards . You can populate each card with a set of actions that the user can take on the selected record. When clicked the actions pop up as flows in a modal. This provides a great combination of permanent viewability and Flow functional tools.

Here’s a great walkthrough video by Josh Dayment:

How It Works

Let’s take a look at an example flow. A Get Records returns a collection of accounts. In the property editor, you can see I’ve specified the specific fields I want to pass into the component. If you leave this field blank, Flow will pass all of the fields, but this can cause issues with query limits if you use objects with a high numbers of fields.

Working with Flexcard Actions to Allow Record Editing

In this example, you can click Update Account to edit an individual record:

When you do this, the corresponding Flow runs in a modal:

Note that it’s up to you to commit changes to the record. Here’s what Update Account looks like:


The component has a few input variables we need to display the cards.  

  1. Flexcard Object API Name, this is the Object API Name of the records you want to display. 
  1. Box Size, This sets the size of your cards the default is 300 this will set the size to 300px by 300px. So for example if you want to make them a little larger set the number to 500 
  1. Visible Field Names, This is a comma separated string of field API Names the component will use this to get the field labels and values to display in each card. 
  1. Card Data Record Collection, A record collection variable containing the records you wish to display in you cards. 
  1. Icon, If you wish to display an Fallback Icon on your card header enter it here I.e. standard:account(You can also display a custom image by housing an image url on a url field on each record that field name must use the api name of src_URL__c) 
  1. Value, This is the name of the API Name of the field you would like to use as any output further downstream in the flow if you wish 
  1. Visible Flow Names, This is an optional comma separated list of flow api names to display in the card to run as subflows on each card. The subflows must have an input variable of recordId if you want to pass the recordId from the card into your subflow. The flow labels will display in your card so be cautious of what you label your flows.   
  2. isClickable. If set to true, you can select a single card by clicking on it, and the id of the selected card will be made available as an output
  3. Allow Multi-Select. If set to true, allows for selection of multiple cards and stores recorded of selected cards into collection variable of selectedRecords.
  4. Header Style. String variable to hold standard HTML style tags to control appearance of card headers.
  5. TransitionOnClick. Boolean that determines whether a single click on one of the cards will cause an immediate transition to the next screen. If you set this to True, you probably shouldn’t use Visible Flow Names, and vice versa.


This component c


Flexcard is available in Flow Screen Components Base Pack. Install it here.

View Source