All About The OmniStudio FlexCards

OmniStudio FlexCards displays contextual information at a glance and provides access to relevant tasks for the displayed data. Here are the key capabilities of FlexCards:

1. FlexCards summarize contextual information at a glance
2. FlexCards are the beginning and ending points for customer transactions.
3. FlexCards are viewable on any device or channel.
4. FlexCards can display data from multiple data sources.
5. FlexCards are built quickly using drag-and-drop elements.
6. FlexCards have a what-you-see-is-what-you-get (WYSIWYG) editor for controlling their layout and style.
7. FlexCard actions are relevant to the context of the card.
8. FlexCards are embeddable in other FlexCards.
9. FlexCards are embeddable inside an LWC OmniScript.
10. FlexCards display more detail on demand with flyouts.
11. FlexCards have multiple states that display based on conditions.

Where can we find this? OmniStudio has FlexCard Designer that lets you quickly configure, preview, and debug cards. We can drag, drop, position and resize the User Interface elements onto a canvas to format text, buttons, icons, images, links, charts and other FlexCards.

1. Click on the App Launcher icon.
2. Search for OmniStudio and open the OmniStudio Application.
3. Click the dropdown menu
4. Select OmniStudio FlexCards

Now we are ready to explore the FlexCard Designer header and canvas

Headers and Canvas

The header is where you view the metadata and perform actions related to your FlexCard as follows:

1. View basic metadata about your FlexCard, such as Author, Version, Status, the FlexCard it has been Cloned From, whether it is a Child Card, Last Modified date, and Theme.
2. Toggle between Design view and Preview, create a new version of your FlexCard, and clone, activate, or deactivate your FlexCard.
3. Configure Publish Options for an activated FlexCard, and export your FlexCard.
4. Access FlexCard documentation via the Help link.

We can build our FlexCard by dragging elements onto the canvas.

1. Drag elements such as fields, actions, images, states, child FlexCards, and custom Lightning web components (LWC) from the Build panel onto the canvas.
2. Rearrange, clone, delete, and adjust the widths of your elements as needed.
3. In the Design view, test the responsiveness of your FlexCard with the viewport dropdown (below). This feature allows you to see how elements are positioned at different viewport breakpoints.

Build, Properties, Style, and Setup Panels

Build Panel

Fields: We can configure the data source onto the canvas

Display: 

1. Add simple elements to your FlexCard such as text, images, icons, and blocks.
2. Add more complex elements such as actions, charts, menus, and datatables.
3. Add states to your FlexCard, embed custom Lightning web components, and embed reusable child FlexCards.

Fields and Display Elements are found in build panel

Properties Panel

When you want to change the label, choose the data field value to display and we can use the properties panel.

Styles Panel

To update the appearance in real time. This can be used to configure backgrounds, sizes, paddings, margins, heights, fonts and responsiveness. For custom designs, we can create and apply custom CSS.

Setup Panel

We can configure multiple settings when we create a FlexCard using the data source as follows:

1. Update your Data Source.
2. Apply custom permissions to limit access to your FlexCard.
3. Track Custom Data on elements with tracking enabled.
4. Enable Multi-Language Support, set Session Variables, and create Event Listeners.

A Session Variable is a special type of variable that allows us to store values from data sources or external systems and access them globally on a FlexCard. An Event Listener here is a function that listens or waits for an event to occur and performs an action in response.

Now let’s see the creation of the FlexCard with the Data Source Wizard

Data Source Wizard walks us through a series of steps which are as follows:

Define the Flex Card

This step lets us configure basic settings such as the name, title, author, description, and the theme for the FlexCard. We can also set the FlexCard as a child while creating so that we can embed in other FlexCards. Here are the names that adhere to the naming conventions:

1. teamAccount
2. team_Account

Select the data source type

A FlexCard displays data from a Salesforce object or an external database, or it displays mock data. The data source type determines how the FlexCard retrieves the data.

Let’s take a look at the types of data sources you can use.

1. Apex REST uses a REST endpoint of an Apex class to return data.
2. Apex Remote uses an Apex Remote class and method to return data.
3. Custom uses sample JSON to set up a FlexCard with temporary data that will eventually be replaced with another data source.
4. SOQL Query uses the Salesforce Object Query Language (SOQL) to search an org’s Salesforce data for specific information. For example, SELECT Name, Id FROM Account LIMIT 5.
5. SOSL Search uses the Salesforce Object Search Language (SOSL) to construct text-based search queries against the search index.
6. Streaming API uses the Salesforce Streaming API to send notifications of general events that are not tied to Salesforce data changes.
7. SDK uses a method from a Software Development Kit (SDK) to get data to populate fields on a FlexCard.

You can also use OmniStudio data tools.

1. DataRaptor uses a DataRaptor Extract interface to return data from a Salesforce object.
2. Integration Procedures uses an Integration Procedure to return data from multiple internal and external sources.

A FlexCard can also have None as its data source. A child card doesn’t need a data source if a parent card is set to push data from its source to that child and vice versa.

Select the data source

Your choice of data source type determines the properties that display for the data source itself. 

Configure the data source inputs

In order to test so that we can preview the data we can use this where it will let us add test variables so that we can preview the FlexCard using real data. You view the test response and performance metrics from the data source, and preview it in the JSON format before building the Omnistudio FlexCard.