Set Up Actions on a Flexcard

Configure actions that users can complete on Flexcards to improve the self-service experience, and save time on manual tasks. Add actions to supported elements or add an action element to a Flexcard, and then configure the action settings. For example, you want to have a button that opens a URL for additional information. To do so, add an action to an existing image or add an action element for which you select an image. You can also set up sequential actions and configure each action’s trigger.

1. From the App Launcher, find and select Flexcards.
2. From the list page, select a Flexcard version.
3. If needed, deactivate the Flexcard.
4. In the Flexcard Designer, drag the Action element into a state on the canvas.
5. To add an action to:
   • An existing element such as an image, a block, an icon, or a toggle: Select the element on the canvas. Then, add an action from the properties panel.
   • The Flexcard: Drag the Action element from the elements panel to the canvas. Then, open Properties.
6. Enter information as needed.
   

   Note

   The Label field supports concatenated strings, including a combination of plain text and supported merge fields with custom labels, such as {Label.AccountName} > {Name} or {Name} + {Id}.

7. Expand the Action section.
8. To prevent users from interacting with the Flexcard when an action is in progress, enable the option for blocking interactions until actions are complete, or enter a merge field whose value is true such as {requireResponse}.

   For example, lock a form while the user waits for the Flexcard to refresh after they click an Update button to which you added a Data action.

9. Select an action type.
10. If needed, turn on tracking to record the card load, card unload, and state load events at the Flexcard level, and the UI action event at the action level.

    By default, Omnistudio tracks parent Flexcards but not child Flexcards. To track child Flexcards, turn on the setting on the child Flexcard and all their parents. When you embed Flexcards inside other Flexcards, we recommend that you check and confirm the setting on all Flexcards.

11. To set up sequential actions, add an action.
12. To rearrange the actions sequence, drag an action to the desired position.
    

    Tip

    If you have any action that navigates away from the Flexcard, add them as the last action in the queue, or set them up to stop any further actions. For a data action type, save the response in a response node to use it in a subsequent action.

    In preview or at run time, Omnistudio executes the actions from top to bottom, waiting for each action to complete before triggering the next action. You can use the response from the previous action to perform subsequent actions. If an action fails, Omnistudio doesn’t run the subsequent actions.

    When an action triggers sequential custom or pubsub events, and each of their event listeners trigger their own sequential actions, a failing action doesn't prevent the next sequence of actions in the next event listener from executing.

    For example, set up a sequence on an actionable element or an event listener that:

    • Updates a data value with the set values action.
    • Passes the updated value to an Omniscript with an update Omniscript action.
    • Navigates to a record page with the navigate action.
13. If needed, save your changes.

• Set Up Card Actions to Update a Flexcard
  Configure actions that users can trigger and that affect a record on a Flexcard or the Flexcard itself. For example, let users arrange a records view to suit their personal preference.
• Get or Send Data from or to a Flexcard
  Transfer data from or to a server by calling a data source. When Omnistudio receives the data, it adds it to the JSON data in the card's record object or to a data node that you specify. For example, populate a child Flexcard with data from its parent, or conditionally show messages from an API response.
• Pass Data to Flexcards by Using Events
  When an event occurs, a notification is sent to a Flexcard through an action on an element. Then, execute an action based on the event. Set up events to communicate between a child Flexcard and its parent, between an element and the Flexcard that it's on, or between distinct components. For example, add an action on an embedded child Flexcard that, when clicked, updates a field on the parent Flexcard. Or, add an action on an image that when clicked, updates a merge field value in a text element.
• Set Up Flyouts on a Flexcard
  Display additional information from a child Flexcard, an Omniscript, or a custom Lightning web component when a user clicks an action on a Flexcard. For example, show account information on a Flexcard and the primary contact's name and email address in a flyout.
• Set Up Navigation on a Flexcard
  Enable navigation to an external URL, a Lightning page, a page in an Experience Builder Aura site, or any Salesforce page. For example, when a policyholder views their account policies on a Flexcard, they can click a button that opens a selected policy record page.
• Launch an Omniscript from a Flexcard
  Set up a Flexcard to call an Omniscript that updates the Flexcard’s data source. For example, users enter their account ID on a Flexcard. Then, when they click the Omniscript action, Omnistudio passes the entered value and launches a form that updates their account information.
• Update an Omniscript's JSON Code from a Flexcard
  Specify the JSON node that Omnistudio updates in response to a user action on the Flexcard by embedding the Flexcard in the Omniscript as a custom Lightning web component.