--- schema_version: "1" id: d0ce804c2d4a4ef86575257f1466e8e60349d1f32c2d64f87a53edcf58b26cf8 title: Build a Flexcard with 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_build_a_flexcard_with_the_flexcard_designer.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_build_a_flexcard_with_the_flexcard_designer.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 06fbfcb2e30462c606efc3b8e9f9ec8780663e40dbedac639094181c3b8ae95a description: For the managed package runtime, with the Flexcard Designer create, build, design, test, and activate a Flexcard before publishing it to a Lightning or Experience page. Use a drag interface with WYSIWYG editing to preview while you build dynamic context-specific user interfaces for customer interactions. products: - Omnistudio release: "264" --- # Build a Flexcard with the Flexcard Designer (Managed Package) For the managed package runtime, with the Flexcard Designer create, build, design, test, and activate a Flexcard before publishing it to a Lightning or Experience page. Use a drag interface with WYSIWYG editing to preview while you build dynamic context-specific user interfaces for customer interactions. ![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). ![FlexCards Workflow](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_workflow.png) ## Create a New Flexcard - Step through a four-step configuration wizard to create a new Flexcard. See [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."). - Configure basic settings such as title, name, author, description, and optionally enable the ability to embed the Flexcard inside another Flexcard. - Select and configure a data source, and where applicable, add test data to populate fields and preview the Flexcard at run time. ## Configure Setup Options Configure card-wide options, such as adding an event listener, adding session variables, disabling record looping, limiting user access, and updating data source settings, and more. See [Set Up a Flexcard in the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_a_flexcard_in_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, configure optional settings for your Flexcard in the Setup panel of the Flexcard Designer. For example, update a data source, create an event listener, add session variables, and so on."). ## Add, Configure and Style Elements - Add and configure elements, such as fields, [states](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_state_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add a state to a Flexcard to present different interactions and layouts based on specified conditions. Each Flexcard has a default state that cannot be deleted. Add a State element to the canvas of a Flexcard, or clone a state already on the canvas."), [actions](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_action_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add up to six actions to a Flexcard to launch or update an Omniscript, navigate to a web page or application, display a flyout, fire an event, or update data field values. For example, add an action on an account Flexcard that when clicked, displays the contact information for the account."), and other components on a Flexcard. See [Add Elements to a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_elements_to_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, add data fields, states, actions, and other elements to your Flexcard. Style an element and configure its properties in the Flexcard Designer."). - Add styles for each element such as background color and image, border, padding, and margin. Set an element's height. Update the look of supported text fields by adding custom classes. Create and apply custom classes and inline styles. And more. See [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more."). - Enable an element's width to change when the viewport updates. See [Create Responsive Elements on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_responsive_elements_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element's width to change when the viewport updates. For example, make the widths of the fields for First Name and Last Name of a Contact take the full width of the page on smaller devices, but shrink to 50% on larger devices such as laptops and desktops."). ## Preview Flexcard Preview your Flexcard's appearance and functionality before publishing it to a Lightning or Experience page. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements."). ## Activate Flexcard Activate your Flexcard to publish it to a Lightning or Experience page. See [Activate a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_activate_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, activate a Flexcard to generate an LWC and publish it to a Lightning page or Experience Builder site. After you activate a Flexcard, you can’t edit it or add elements to it."). ## Configure Publish Options Define metadata values and set a custom component SVG icon for the generated Flexcard LWC. ## What's Next Deploy your generated Flexcard LWC from the Lightning App Builder to a Lightning page or from the Experience Builder to an Experience page.