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
- 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 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, 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
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.
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.
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”
The flexcard actions links are very useful. How do we get a hold of the PPT ?
Full content is available in blog post. PPT is not available
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?
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?
How to apply out on datatable records
Do you means get a record?
Please provide URL for flexcard actions documentation seen in the screen shot above
How to add URL in navigate action to open it in new tab or window.
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.
Can you please explain me how you filter data using id in response action in integration procedure ?