Explore the FlexCard Designer

Learning Objectives

After completing this unit, you’ll be able to:

• Explain how to access the FlexCard Designer.
• Explain how the FlexCard Designer header and canvas operate.
• Describe the Build, Properties, Style, and Setup panels.
• Summarize how to preview and publish your FlexCard in real time.
• Describe the in-product help and tooltips features.

Where to Find the FlexCard Designer

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 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 datatables.
  • Add states to your FlexCard, embed custom Lightning web components, and embed reusable child FlexCards.

Fields and Display elements are found in the Build panel (1).

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.

Style Panel

Use the Style panel (1) to style your FlexCard elements and update their appearance in real time. This panel has settings for configuring backgrounds, sizes, borders, padding, margins, height, fonts, and responsiveness. When you create a style for an element, save it for use on multiple elements on the FlexCard.
For custom designs, create and apply custom CSS.

Setup Panel

You configure multiple settings when you create a FlexCard using the data source. For existing FlexCards, go to the Setup panel (1) to update these settings or configure more settings.

• Update your Data Source.
• Apply custom permissions to limit access to your FlexCard.
• Track Custom Data on elements with tracking enabled.
• 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 is a function that ‘listens’ or waits for an event to occur and performs an action in response.

Preview and Publish

Preview your FlexCard in real time to test its design and functionality.

• Select options in the viewport dropdown menu (1) to preview how a FlexCard appears on different devices, such as mobile, desktop, and tablet.
• Click Add Test Parameters (2) to preview your FlexCard with different parameters, such as record Ids and pagination limits.
• Refresh (3) just the canvas while previewing and debugging your FlexCard. Refresh reloads the card and resets the data JSON.
• View your FlexCard's Data JSON (4). Look for potential issues in how your data source populates elements. The Data JSON panel updates when you interact with the FlexCard.
• View your FlexCard's action and event requests and responses from the Action Debugger (5). Click an actionable item to display its log and associated events.

Then, click Activate in the header to activate your completed FlexCard. This process compiles and deploys your Lightning web component.

After you activate your FlexCard, configure your generated Lightning web component’s metadata values, such as where it’s published (Targets). 

Add your own custom component SVG icon to identify your generated Lightning web component from the Experience Builder for Communities and from the Lightning App Builder for Lightning pages.

In-Product Help and Tooltips

There are a few different ways to use the in-product help feature.

Click ? (1) to view detailed documentation about an element in a slide-out help tray. Click Help (2) in the header to view page-level help in the slide-out help tray.

Move your cursor over the i icon to reveal tooltips and access inline information about specific properties.

Whew! Talk about a lot of tools! Next, you’re off to meet the wizard… the Data Source Wizard, that is.