13, May, 2024 | By Mahesh Siddireddy

FlexCard Styles & Setup Panel.

Style Panel:
Use the Style panel 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 Pane
You configure multiple settings when you create a FlexCard using the data source. For existing FlexCards, go to the Setup panel 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.

=>Click the Preview Button.

=>Click Add Test Parameters to preview your FlexCard with different parameters, such as record IDs and pagination limits.

=>Refresh just the canvas while previewing and debugging your FlexCard. Refresh reloads the card and resets the data JSON.

=>View your FlexCard’s Data JSON. 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 . 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.

Conclusion
FlexCards in Salesforce offer a powerful and flexible way to design and configure interactive components, with extensive options for styling, data handling, and customization.