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.

YouTube video

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

  1. 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.
  2. SOSL Search: Uses a Salesforce Object Search Language (SOSL) to construct text-based search queries against the search index.
  3. 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.
  4. Apex REST: Uses a REST endpoint of an Apex class to return data.
  5. DataRaptor: Uses a DataRaptor Extract interface to return data. Field-level security is fully supported. See DataRaptors.
  6. 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.
  7. 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.
  8. Streaming Channel: Uses the Salesforce Streaming API to send notifications of general events that are not tied to Salesforce data changes.
  9. 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.
  10. 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.
  11. 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.
FlexCards Data Source Reference

if the data source is kind of complex and we need to prepare data we recommend the integration procedure.

FlexCards Actions

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.

FlexCard Designer

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.

FlexCard Designer

Important FlexCards key capabilities

  1. FlexCards are viewable on any device or channel; They can be deployed to mobile and customer portals.
  2. It can be the beginning and endpoint of customer interactions.
  3. It can display data from multiple data sources and provide summarized contextual information.
  4. Built with a WYSIWYG editor with drag-and-drop elements – the editor allows you to edit the layout and CSS styles.
  5. Adjust the width of any element along a 12-column horizontal grid
  6. Relevant to the context of the card and can display more detail on demand using flyouts
  7. Can be embedded in other FlexCards or in OmniScripts.
  8. Can have multiple states based on conditions
  9. Can be deployed from App Builder, Experience Builder
  10. Automatically generate and deploy LWCs.
  11. Use the Action element to launch an OmniScript or Flyout, and trigger Custom or Pubsub Events, and more.
  12. 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. 

  • teamGetAccount
  • team_get_account

Summary

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.

Amit Chaudhary
Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.

He is a active blogger and founder of Apex Hours.

Articles: 459

14 Comments

  1. Hey guys, hope everybody is ok.
    I have a question, I’ve tried to input text in my flexCard, although every time that I try I kept the same error, the properties still charging for ever and never.
    Does anyone knows how to fix it?

  2. Heya,

    I have a page on community, that used a flexcard to show information and comments, and have a button(flyout) that opens a modal to insert comment. the problem is that, after inserting the comment, and closing the modal, i want that the initial page(flexcard) reload the information showing this new comment. I’d tried everything i found, but it’s not working.

    Do you have some idea how to solve this issue?

  3. Is it possible a Select component from a Flex Card to import values from a pick list of a SObjects.

    I saw this function in a Omniscript but I did not set how to do it on Flex Cards.

  4. Can you please explain me how you filter data using id in response action in integration procedure ?

Leave a Reply

Your email address will not be published. Required fields are marked *