OmniStudio FlexCards Vlocity
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.

OmniStudio FlexCards

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 is 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 list of option 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 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, It can be deployed to mobile and customer portal
  2. Can be beginning and endpoint of customer interactions.
  3. Can display data from multiple data sources and provide a summarized contextual information.
  4. Built with WYSIWG editor with drag and drop elements – 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

Recording

Check below recording to learn about basics of FlexCard OmniStudio.

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 consideration on FlexCards in OmniStudio.

Share this article

4 Comments

  • Please make Integration procedure videos, use cases etc

  • How to change chart Palette Color in Vlocity flexcard ?

  • Could you please forward the reference links in PPT on Page – “Flex Card Actions”

Leave a reply

Keep in Touch

Subscribe for Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,229 other subscribers

Search

Our Supporter

RECENT POSTS

Apex Hours

Apex Hours is one stop platform to learn Salesforce skills and technology

Join our Newsletter and get tips and tricks how to explore the salesforce for free!