Configure Flexcard Settings

Specify your Flexcard’s behavior with the setup options. For example, add or update a data source, create an event listener, or add session variables.

Note

After updating or configuring Flexcards, allow 15–20 minutes for updates to appear, even after clearing your cache. If you see any errors or if old versions load, contact Salesforce support to enable the Template API setting. This helps updates show up faster and more reliably.

1. From the App Launcher, find and select Flexcards.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard.
4. Go to Setup and update the relevant information.

   • To show or hide the Setup panel, click .

   • In the designer on a managed package, click the Setup tab.
5. If the Flexcard interacts with a Lightning Web Component Omniscript, turn on Omniscript support.
   For example, render a Flexcard inside an Omniscript with the Omniscript’s Custom Lightning Web Component element. Or update an Omniscript with the Update OmniScript action element.
   See Embed Flexcard in a Flexcard.
6. To translate custom labels into any supported language, turn on multi-language support.
   You can then add custom labels to these Flexcard elements by using the {Label} merge field.

   • Field: Label, output, placeholder
   • Text: In the rich text editor
   • Action: Label

   

   Note Omnistudio updates custom labels and doesn’t store them in the cache.

   See Create and Edit Custom Labels.

   

   Note

   Omnistudio provides autotranslated system labels, such as standard error messages, in the standard runtime. These autotranslated labels appear in your Flexcards based on the user's locale.

7. To add a dynamic class automatically in the CSS for resizing the element and rendering the card again when the browser width changes, turn on the width listener.
8. To restrict access to the Flexcard, enter a comma-separated list of custom permissions.
   

   Note

   If this field is left blank, all users can see the Flexcard. Assigning user permission only affects the Flexcard's visibility in the user interface at runtime and doesn't restrict data access. Data access is managed through field-level security. To ensure data security and maintain compliance with Salesforce encryption access controls, always check that a user has the View Encrypted Data permission before displaying or processing decrypted values of encrypted fields.

   For example, if you have custom permissions named Can_Edit_Policy and Can_View_Policy, enter them as Can_Edit_Policy,Can_View_Policy.
9. To improve performance when you load the card in preview, disable the child Flexcard preview.
10. If needed, generate a card container for each data source’s record instead of a single card that shows all the records.
    1. Select Repeat Records.
    2. Enter a render key that identifies the repeated card record to update in the Document Object Model (DOM).
       A render key helps improve performance by regenerating only the updated card record.

    If your data source is a data table, deselect Repeat Records to avoid having multiple cards showing the same information. Similarly, we recommend that you deselect the checkbox for charts or lists that retrieve data from multiple records. Also, deselect the checkbox for container elements such as Lightning web components or child Flexcards that use their own data sources.

    If your Flexcard has multiple states, Omnistudio applies the state’s condition. For example, if you select Repeat Records, but the available records don’t meet the state’s condition, Omnistudio hides those records.

11. If needed, apply a specific style sheet for the Flexcard.
12. If needed, add an event listener that tracks an event triggered from a component, and performs an action in response:
    1. Add an event listener.
    2. Set up the listener properties.
       • Pubsub: Event from another component, such as another Flexcard on the same Lightning page.
       • Custom event: Event from a child Flexcard or from an element on the card.

       • Record change: Change on a record that’s on the Flexcard. Enter the record’s ID as {recordId} or enter an ID value, and select the record type. If needed, also select which field values to copy onto the card when the record changes.

         By default, in the Record Change event type you can select fields based on a Salesforce object, by using the Fields dropdown menu. However, if you turn on Advanced Mode, you can specify fields within any SObject and related objects in an array. For example, you can specify fields for the Account object in your array this way: Contact.Id, Contact.Account.Id, Contact.Name.

         

         Note If you change the record through an Experience Cloud page, the change only takes effect when it's edited within the same browser tab and not via backend processes.

       For information about the pubsub channel name or custom event name, see Pass Data to Flexcards by Using Events. Also see Set Up Actions on a Flexcard and Set Up Conditions on a Flexcard Element.

    3. If you set up multiple actions and want to arrange them in a different sequence, expand the action properties sections and drag them in the desired order.
       See Set Up Actions on a Flexcard.
13. To create session variables that are globally accessible, make attributes available from a component, or store values from data sources, external systems, or hardcoded values.
    1. Add a session variable.
    2. Enter a key and a value.

    You can then apply the session variable as a merge field to an element field. For example, enter {Session.var} to a REST data source endpoint URL.

    Session variables are available for these elements and their fields:

    • Action: Label
    • Custom event action: Input Parameter > Value
    • Field: Label, Placeholder, and Output
    • Text: Inside the rich text editor

    You can’t use data source values as session variables.

14. To create a public property whose value you set in a Lightning or Experience Builder page, enter the relevant information.

    • Enter the attribute name in pascal case. The generated API name is cfPropName. From a custom Lightning web component or an Omniscript, reference the property name in the kebab case, such as cf-record-limit.

    • To make the property visible for Experience Builder pages, select the lightningCommunity__Default target.

    To call the attribute as a session variable within the Flexcard, use the {Session} merge field where supported such as text, a data source's test and input parameters, or a field element's output property. For example, if you call the attribute RecordLimit, enter {Session.RecordLimit}.

    To configure the public property on a Lightning or Experience Builder page, update the value of the property in the builder’s properties.

    Omnistudio publishes public properties to the property subtag of the targetConfig tag in the configuration file that defines the metadata values for your Flexcard Lightning web component. You can configure additional metadata values when you publish the Flexcard.

    See XML Configuration File Elements and Activate and Publish a Flexcard.

15. Add or update the data source information.
    See Set Up a Data Source on a Flexcard.
16. If needed, test your data source configuration by adding test variables.

    See Test Data Source Settings on a Flexcard

• Examples for Flexcard Settings
  View examples for Flexcard settings, such as adding an event listener and repeating records of a Flexcard.
• Enable and Disable Data Sources
  Enable and disable data source types for an org, profile, or user level from the Card Framework Configuration custom setting. For example, disable Apex REST, Apex Remote, and other complex data sources for your entire org, or prevent system admins with limited permissions from using these data sources.
• Set Up a Data Source on a Flexcard
  Configure how to retrieve the data that a Flexcard shows. Pull it directly from Salesforce objects with Omnistudio Data Mappers, Salesforce Object Query Language (SOQL) queries, and Salesforce Object Search Language (SOSL) searches. You can also use an external source with REST methods. For complex business processes, use the Apex remote method or Integration Procedures. If needed, set different data sources for the child and parent Flexcards. Then, choose where to publish the Flexcard.
• Flexcards Data Source Common Properties
  Review the common properties available for any Flexcard data source.
• Test Data Source Settings on a Flexcard
  Preview a Flexcard with real data by adding test values to runtime variables. The variables populate the dynamic fields in a data source, such as a contextId from an Omnistudio Data Mapper that gets data from an Account.