--- schema_version: "1" id: 76cceff9487c4e93f585053019658ad9217988753146b8b15723a945016b4797 title: Get to Know the Flexcard Designer (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_get_to_know_the_flexcard_designer.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_get_to_know_the_flexcard_designer.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 00d8b3b614d61bd74b1e56ea7f4f888d023be081519057e890f267fefe0e461c description: For the managed package runtime, get to know how the different parts of the Flexcard Designer work to build rich interfaces relevant to your customer's context. products: - Omnistudio release: "264" --- # Get to Know the Flexcard Designer (Managed Package) For the managed package runtime, get to know how the different parts of the Flexcard Designer work to build rich interfaces relevant to your customer's context. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). The Flexcard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. ![FlexCards overview diagram](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_overview_diagram.png) ## Header (1) In the Header, view basic metadata about your Flexcard such as Author, Namespace (beginning Spring '22), Current Version, and Status. ![FlexCard Designer header](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_designer_header.jpg) Perform actions related to your Flexcard, such as Preview, Clone, Activate, Export, Add Custom CSS, create a New Version, and access a list of resources from a Help link. When the Flexcard is active, Deactivate, and configure Publish Options. Also, download a version of the Flexcard to use on-platform (within in Salesforce) and off-platform (outside of Salesforce). **Publish Options (9)** enables you to configure your generated Flexcard LWC's metadata values, such as where the component can be published, API version, description, and more. Also add your own custom component SVG icon to identify your generated LWC in the Experience Builder for Communities and Lightning App Builder for Lightning pages. ![FlexCard Designer Publish Options](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_overview_publish_options.png) ## Canvas (2) Build your card by dragging elements from the Build panel into a state on the Canvas. Rearrange, clone, delete, and adjust the widths of your elements as needed. ![FlexCard Designer canvas](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_designer_canvas.png) Test the responsiveness of your Flexcard with the Viewport Dropdown. ## Build Panel (3) Drag elements from the Build panel onto the Canvas to build the layout of your Flexcard. Drag all available fields from a configured data source from the Fields list into a State. You can also add states to your Flexcard, and embed Custom LWCs and reusable child Flexcards. ![FlexCard Designer Build panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_designer_build_panel.png) ## Properties Panel (4) Configure element properties from the Properties panel when an element is selected on the Canvas. For example, when a Field element is selected, you can update the Label, choose the data field value to display, select the type of field it is, and more. ![FlexCard Designer Properties panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_designer_properties_panel.png) ## Style Panel (5) Style your Flexcard elements from the Style panel using a GUI that updates the look of elements in real-time. Configure backgrounds, sizes, borders, padding, margins, height, fonts, and responsiveness. ![FlexCard Designer Style panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_overview_style_panel.png) For custom design needs, create and apply custom CSS. Create CSS classes with an in-product code editor with Intellisense features such as code completion, contextual prompts, and a color picker. Apply custom classes created from the editor or from any style sheet accessible to the Flexcard, or apply inline CSS styles. Save style settings on an element to use on multiple elements on the Flexcard. Add conditional styles based on the value of a data field. ## Setup Panel (6) Configure global options from the Setup panel. ![FlexCard Designer Setup panel](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcard_designer_setup_panel.png) Update your data source. Apply custom permissions to limit access to your Flexcard. Track Custom Data on elements with tracking enabled. Enable Multi-Language and Omniscript Support, set Session Variables, create Event Listeners, and configure Repeat Options. ## Preview (7) (A) Preview your Flexcard in real-time to test its design and functionality. ![FlexCard Designer Preview](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_overview_preview_232.png) (B) Preview how a Flexcard appears on different devices, such as mobile, desktop, and tablet with the Viewport Dropdown. (C) Add Test Parameters to preview your Flexcard with different parameters, such as record Ids, and pagination limits. (D) Debug your Flexcard. View your Flexcard's data JSON with the **Data JSON** panel. Debug action and event requests and responses with the **Action Debugger**. ## In-Product Help (8) Find context-sensitive help specific to an element or property using the Flexcard Designer's in-product help feature. ![FlexCard Designer In-Product Help](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/flexcards_overview_in_procuct_help.png) (A) Access in-line information about specific properties by hovering over tooltip icons. (B) View detailed documentation about an element's or feature's purpose and functionality with slide-out help trays. ## What’s Next Get started building Flexcards with the Flexcard Designer. See [Get Started with Flexcards (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_get_started_with_flexcards.htm&release=264.0.0&type=5 "For the managed package runtime, Flexcards provide a set of components for building UI components and applications on the Salesforce platform. Here are some key resources to help you navigate the Flexcard Designer and guide you through common tasks."). Then, [Create a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, configure basic settings and data source options when creating a Flexcard in the Flexcard Designer. After creating a Flexcard you can update additional options and start building your user experience.").