06, May, 2024 | By Mahesh Siddireddy

What are Omnistudio FlexCards?

FlexCard Designer lets you quickly configure, preview, and debug cards. You can do all sorts of awesome things like drag and drop, position, and resize user interface (UI) elements onto a canvas to format text, buttons, icons, images, links, charts, tables, and even other FlexCards.

Where do you find this super tool? Use the App Launcher to find the OmniStudio app. Click the dropdown menu and select FlexCards. Now, you’re ready to explore the FlexCard Designer header and canvas.

Header and Canvas

The header is where you view metadata and perform actions related to your FlexCard, such as the following.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.

=>Toggle between Design view and Preview, create a new version of your FlexCard, and clone, activate, or deactivate your FlexCard.

=>Configure Publish Options for an activated FlexCard and export your FlexCard.

=>Access FlexCard documentation via the Help link.

Build your FlexCard by dragging elements onto the canvas.

=>Drag elements such as fields, actions, images, states, child FlexCards, and custom Lightning web components (LWC) from the Build panel onto the canvas.

=>Rearrange, clone, delete, and adjust the widths of your elements as needed.

=>In the Design view, test the responsiveness of your FlexCard with the viewport dropdown (1). This feature allows you to see how elements are positioned at different viewport breakpoints.

Build, Properties, Style, and Setup Panels:
To build your FlexCard, drag fields and elements onto the canvas.

Fields:
Drag fields based on the FlexCard’s configured data source onto the canvas.

Display:
Add simple elements to your FlexCard such as text, images, icons, and blocks.

Add more complex elements such as actions, charts, menus, and data tables.

Add states to your FlexCard, embed custom Lightning web components, and embed reusable child FlexCards.

Below you see the complete list of elements available in the Display section of the FlexCard Designer Build panel.

Properties Panel
When you select an element on the canvas, configure the element’s properties from the Properties panel (1) to determine how the element behaves. For example, when you select a Field element, update the label, choose the data field value to display, and select the field type. 

In the following example, you see an Action element. Select an action type, change the element name and label, and select an icon to associate with the action.

Conclusion:
The FlexCard Designer in OmniStudio is a tool for creating and customizing cards. You can drag and drop elements like text, buttons, images, and tables onto a canvas to design your card. The header shows details about your card and lets you perform actions like saving and previewing. The Properties panel helps you customize each element’s behavior. Overall, the FlexCard Designer makes it easy to build cards for your OmniStudio apps.

What can you do in the header of the FlexCard Designer?
In the header, you can view metadata about your FlexCard, toggle between    Design view and Preview, create new versions of your FlexCard, and perform actions like cloning, activating, or deactivating your FlexCard.

How do you build a FlexCard in the FlexCard Designer?
You build a FlexCard by dragging elements like fields, actions, images, and custom Lightning web components from the Build panel onto the canvas.

What can you do in the Properties panel of the FlexCard Designer?
In the Properties panel, you can configure the behavior of each element on the canvas, such as updating labels, choosing data field values, and selecting field types.