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.
What are OmniStudio FlexCards?
Flexcards allow us to build customer-centric, industry-specific UI components and applications on the Salesforce platform and beyond. 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.
Data Source Wizard for OmniStudio FlexCards
Here are a list of options for FlexCards Data Source Reference
- SOQL Query: Uses a Salesforce Object Query Language (SOQL) to search an org’s Salesforce data for specific information. For example, SELECT Name, Id FROM Account LIMIT 5. Note: If security is a concern, use a DataRaptor instead of a SOQL query because DataRaptors fully support field-level security.
- SOSL Search: Uses a Salesforce Object Search Language (SOSL) to construct text-based search queries against the search index.
- Apex Remote: Uses an Apex Remote class and method to return data. An Apex Remote class is a standard Apex class that implements the VlocityOpenInterface.
- Apex REST: Uses a REST endpoint of an Apex class to return data.
- DataRaptor: Uses a DataRaptor Extract interface to return data. Field-level security is fully supported. See DataRaptors.
- REST: Named Credential, Uses the standard REST API call to return data from the URL of a callout endpoint and its required authentication parameters in one definition. REST Web Uses the standard REST API call to return data from the URL of a callout endpoint.
- Integration Procedures: Uses an Integration Procedure to return data. Integration Procedures are declarative, server-side processes that execute multiple actions in a single server call. See Integration Procedures.
- Streaming Channel: Uses the Salesforce Streaming API to send notifications of general events that are not tied to Salesforce data changes.
- Platform Event: Uses Salesforce’s Platform Events enterprise messaging platform, which combines PushTopic and Streaming Channel to enable apps to communicate inside and outside of Salesforce. Instead of working with an sObject, Platform Events work with custom objects.
- PushTopic: Uses an SOQL query to return a result that notifies listeners of changes to records in a Salesforce organization. The PushTopic defines a Streaming API channel. See Salesforce Streaming API.
- Custom: Uses sample JSON to set up a FlexCard with temporary data that will eventually be replaced with another data source. This allows you to embed the custom JSON directly into the layout without depending on external data.
if the data source is kind of complex and we need to prepare data we recommend the integration procedure.
Here are list of Flex Card Actions.
Flyouts in OmniStudio
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; They can be deployed to mobile and customer portals.
- It can be the beginning and endpoint of customer interactions.
- It can display data from multiple data sources and provide summarized contextual information.
- Built with a WYSIWYG editor with drag-and-drop elements – the 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.
I hope this post/session helped you to understand the basics of OmniStudio FlexCards. Please check our next session on OmniStudio FlexCards Advanced Concepts to learn more about How to debug FlexCards and some considerations on FlexCards in OmniStudio.