OmniStudio FlexCards are used to build customer-centric, industry-specific UI components and applications on the Salesforce platform. You can create and design FlexCards with the FlexCard Designer, a declarative tool with a drag interface, WYSIWYG editing, and graphic user interfaces to style individual elements. FlexCards are built with the Lightning Web Components programming model.
The FlexCard component contains a combination of data and links to processes within a specific context based on the data source. By default, a FlexCard loops through records returned from its data source and displays the list of records in containers called cards. An active FlexCard component published on a Lightning or Community page.
You can design a card to launch an action that when clicked, opens a child card, Custom LWC, or an OmniScript embedded in a popover or window. A card flyout contains additional information and actions related to the parent card.
The FlexCard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. You can also create the look and feel of your FlexCard by styling individual elements from graphic user interfaces (GUIs) built into the designer.
Important FlexCards key capabilities
- FlexCards are viewable on any device or channel, It can be deployed to mobile and customer portal
- Can be beginning and endpoint of customer interactions.
- Can display data from multiple data sources and provide a summarized contextual information.
- Built with WYSIWG editor with drag and drop elements – editor allows you to edit the layout and CSS styles.
- Adjust the width of any element along a 12-column horizontal grid
- Relevant to the context of the card and can display more detail on demand using flyouts
- Can be embedded in other FlexCards or in OmniScripts.
- Can have multiple states based on conditions
- Can be deployed from App Builder, Experience Builder
- Automatically generate and deploy LWCs.
- Use the Action element to launch an OmniScript or Flyout, and trigger Custom or Pubsub Events, and more.
- Debug your FlexCard by viewing its data JSON and the response and request logs for its actions and events
Naming Conventions for FlexCards
FlexCards have strict naming conventions for their names and authors. Avoid spaces, dashes, and any non-alphanumeric characters. Use camel or pascal case for the name and don’t put two consecutive underscores next to each other. Here are names that adhere to the naming conventions.