OmniStudio FlexCards for Beginners: How to Use Datatables and Set Properties

Introduction

Salesforce’s OmniStudio is a powerful suite that boosts productivity and simplifies complex operations. OmniStudio relies on FlexCards to present customized and attractive data and actions. FlexCards datatables are our focus here. We’ll learn how to fill these tables with data, use input variables, and format data in JSON for practical usage. OmniStudio datatable specify the record data that populates the table.

Read another blog: Limitations of Flows on Experience Sites in Salesforce.

What is OmniStudio and FlexCards?

Salesforce’s OmniStudio toolkit simplifies customer engagement and digital transformation. The platform’s adaptability lets users integrate complex data easily, making it ideal for guided experiences. FlexCards allow developers and admins to construct cards that pull data from numerous sources, display it dynamically, and enable various actions.

FlexCards may display client information, product catalogs, account details, and more in compact, interactive designs. Datatables in FlexCards can enhance data presentation, especially for structured information like customer interactions or transaction histories.

What is a FlexCard Datatable?

FlexCard Datatable is a table element that groups and shows much data in a structured grid. This grid layout makes looking through, sorting, and interacting with data records accessible, especially when getting information quickly.

Benefits of Using FlexCard Datatables

1. Improved data accessibility and visibility
2. Customizable layouts to align with specific business needs
3. Efficient filtering, sorting, and pagination for large data sets
4. Enhanced user experience through intuitive design and real-time data updates

How to Specify the Record Data for a Datatable

You must choose the record data in a “FlexCard datatable” to fill out. Usually, this step includes selecting the data source and setting up the areas shown in the table.

1. Identify the Data Source: The data source can range from Salesforce objects to external data pulled in via REST APIs.
2. Map Fields to Display Columns: Once the data source is identified, specify the fields to show. These fields will become columns in your datatable.
3. Define Sort and Filter Options: Enhance usability by enabling sorting and filtering options on specific columns.

Working with FlexCard Input Variables

For the datatable to be dynamic and interactive, FlexCard input variables must be used. FlexCards can change based on what the user does or on already set factors.

• Purpose of Input Variables: They give you options, so the same FlexCard can show various sets of info depending on the situation or what the user does.
• Examples of Input Variables: Account IDs, date groups, and product categories are all common types of input variables.
• Using Input Variables: Input variables must be set up during FlexCard setup. The variable name and value source must be specified. This makes sure that the information shown is correct and up to date.

Example: Building a Basic FlexCard Datatable

To create a FlexCard datatable, follow these steps:

1. Create a New FlexCard: Go to FlexCards in OmniStudio and click “Create New.” Please give it a name and link it to the right data source.
2. Add a Datatable Element: You can add the datatable to your FlexCard layout by dragging the element.
3. Map Data Fields: Find and map the data source fields in the table, like Name, Account Type, or Contact Details.
4. Configure Display Options: If necessary, set up filtering, scrolling, and sorting for each column.

Adding JSON Data to FlexCard Datatables

For example, FlexCard data tables often use JSON, which stands for “JavaScript Object Notation,” to organize data. Setting up data in JSON makes it easier to integrate data and makes FlexCard more flexible. It is a simple example:

{
  "records": [
    {
      "Name": "John Doe",
      "AccountType": "Customer",
      "ContactDetails": "john.doe@example.com"
    },
    {
      "Name": "Jane Smith",
      "AccountType": "Partner",
      "ContactDetails": "jane.smith@example.com"
    }
  ]
}

Each entry contains a name, account type, and contact details in this example. Adding this JSON structure to the FlexCard configuration enables the data table to render these records directly.

Steps to Integrate JSON Data:

1. Add a JSON data block as your data source.
2. Define each field name and its corresponding value type.
3. Test the JSON to ensure the data population is accurate in your FlexCard datatable.

Final Thoughts and Next Steps

OmniStudio FlexCards, especially with datatables, help Salesforce end-users organize and present data. By knowing how to describe data, work with input variables, and integrate JSON, you can create excellent data displays. Explore OmniStudio features to build more robust solutions and boost user engagement with streamlined, visually appealing interfaces.