--- schema_version: "1" id: e2a1ea1d586f3d4e43b4445f41196c579c4f42389f6825276ab3941e9640bf4d title: Create a Flexcard (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_create_a_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 7f8e26acf17d4f1453f2caa4b08a570641cb6952874e7b78e0d77135e3693e9f description: 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. products: - Omnistudio release: "264" --- # Create a Flexcard (Managed Package) 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. ![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). Beginning with Vlocity Insurance and Health Summer '20 , the Flexcard Designer enables you to preview while you build dynamic context-specific user interfaces for customer interactions using a drag interface with WYSIWYG editing. The Flexcard Designer is LWC only and does not support Angular. 1. Configure basic settings as follows: 1. From the Flexcards tab, click **New**. 2. In the **New Flexcard** step, enter the **Name** of your Flexcard following required naming conventions. 3. Select a **Theme** for your Flexcard. Select Lightning to use SLDS (Salesforce Lightning Design System), or Newport to use the Newport Design System. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note You cannot change the theme once set. You will need to clone the Flexcard to change the theme. 4. Update the **Author**. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note You cannot change the author once set. You will need to clone the Flexcard to change the author. 5. (Optional) Update the **Title**. The title is used to find your generated Flexcard LWC after activation in the Lightning App Builder and Community Builder. 6. (Optional) Enable **Is Child Card** to embed the Flexcard inside another Flexcard. 7. (Optional) Enter the **Description** visible on the Flexcards home tab. 8. Click **Next**. 2. Configure the data source as follows: 1. In the **Select Data Source Type** step, select a data source type to retrieve data from a Salesforce object or an external database. 2. Click **Next**. 3. In the **Select Data Source** step, configure the data source properties. For example, if you selected an Omnistudio Data Mapper as your data source type, select an active Data Mapper. Enter the ContextId as an **Input Map**, such as **Key** = AccountId and **Value** = {recordId}, Configure additional options as needed. 4. Click **Next**. 3. To view test data when your data query has merge field variables such as {recordId}, configure **Test Parameters**. 1. To enter test data: - If a merge field was added in the previous step, a **Run-Time Variable** is populated. Add its **Test Value**. If for example, your **Run-Time Variable** is a ContextId such as {recordId}, that expect's an Account's Id, enter a specific Account Id in **Text Value**. - For each new test parameter, click **\+ Add**, enter a **Run-Time Variable** your data source expects, and enter a value in **Test Value**. 2. To drill down through the JSON data to pass a specific dataset to the Flexcard, enter the JSON path in the **Result JSON Path** field. For example, in the following code, enter \[0\]\['Cases'\] to return data from the Cases object only. ``` [ { "AccountPrimaryContactEmail": "sean@edge.com", "AccountBillingCity": "Austin", "AccountCreated": "2020-10-15T21:28:48.000Z", "AccountRevenue": 139000000, "AccountWebsite": "http://edgecomm.com", "AccountPhone": "(512) 757-6000", "AccountName": "Edge Communications", "AccountId": "0013g00000AeI9fAAF", "AccountPostalCode": "78767", "Cases": [ { "Type": "Mechanical", "Id": "5003g000007WQHRAA4", "Created": "2020-11-23T20:51:20.000Z", "Priority": "High", "Status": "Escalated", "Subject": "The watchamacallit is too high", "CaseId": "5003g000007WQHRAA4" }, { "Type": "Structural", "Id": "5003g000007WQHQAA4", "Created": "2020-11-23T20:50:32.000Z", "Priority": "Medium", "Status": "New", "Subject": "The doodat wasn't properly set up", "CaseId": "5003g000007WQHQAA4" } ] } ] ``` 3. Click **Fetch**. 4. View a **Table** of the returned Test Response. 5. (Optional) Click **JSON** to view the returned results as JSON. 6. Click **Save**. What’s next: Configure additional options. See [Flexcard Setup Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_setup_reference.htm&release=264.0.0&type=5 "For the managed package runtime, the Setup panel in the Flexcard Designer provides multiple configuration options that enable a user to define the behavior of the Flexcard further. For example, update the data source and add session variables.").