ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

All About The OmniStudio FlexCards

Home / Article & Blogs / Salesforce / OmniStudio / All About The OmniStudio FlexCards
By Sangamesh Gella inOmniStudio, Salesforce

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.

get in touch
OmniStudio FlexCards
34
Like this post
5 Posts
Sangamesh Gella

Search Posts

Archives

Categories

Recent posts

All About The OmniStudio FlexCards

All About The OmniStudio FlexCards

Boost Customer Experience With Repeater Widget in CRM Analytics

Boost Customer Experience With Repeater Widget in CRM Analytics

Enhance Insights Using Custom Tooltips In CRM Analytics

Enhance Insights Using Custom Tooltips In CRM Analytics

Net zero as a Service In CPG Industry

Net zero as a Service In CPG Industry

How Do We Import an External Library into Salesforce Lightning?

How Do We Import an External Library into Salesforce Lightning?

  • Boost Customer Experience With Repeater Widget in CRM Analytics
    Previous PostBoost Customer Experience With Repeater Widget in CRM Analytics

Related Posts

Boost Customer Experience With Repeater Widget in CRM Analytics
CRM Analytics Salesforce

Boost Customer Experience With Repeater Widget in CRM Analytics

Enhance Insights Using Custom Tooltips In CRM Analytics
CRM Analytics Salesforce

Enhance Insights Using Custom Tooltips In CRM Analytics

How Do We Import an External Library into Salesforce Lightning?
Lightning Salesforce

How Do We Import an External Library into Salesforce Lightning?

Data Retriever using Metadata API in Salesforce
Metadata API Salesforce

Data Retriever using Metadata API in Salesforce

Leave a Reply (Cancel reply)

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

*
*

ABSYZ Logo

INDIA | USA | UAE

  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

Copyright ©2022 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT