How to Launch a Flyout Modal From an Action in a Flexcard

In this article, we’ll learn to create a flyout modal to display additional information when a user clicks an action on a FlexCard. For example, a FlexCard that displays Account information can display the additional information using a flyout.

Let’s see how to configure a Flyout Action in Flexcard:

Steps to follow:

1) Create a new flexcard with proper Name & Description.

2) Drag the fields which you want to show in the UI from the Build panel to the flexcard.

3) From the flexcard Build panel, drag the Action element into your flexcard.

Note: We can configure the flyout action on Input and Block elements as well using the “Add Action” option on the Flexcard.

4) Rename the Action element label as whatever you want to show it on the UI.

5) Select the Action Type as Flyout in the dropdown list.

6) Select Flyout Type to Child Card because we are using Child flexcard to display as a flyout modal, users can select different Flyout types based on their component used inside the flyout.

7) After selecting the Flyout Type as a Child Card, you need to select the Child flexCard component.

8) To use the data source from the parent FlexCard, click into Data Node and select {record} to send Current data to the child.

Note : When selecting a Flyout make sure that the componentis Activated and Child Card is enabled (If it is a Flexcard). If the component is not activated or the Child card is not enabled, then the flyout will not display that component in the dropdown list.

9) We can select different Data Nodes based on the requirements, some of them are listed below.

NODE	DESCRIPTION
{records}	Send all data.
{records[#]}	Send all the data of a specific index.
{record}	Send just the current record’s data.
{record.FieldName}	Send a record object.
{record.attributes}	Send all attributes from the current record.