--- schema_version: "1" id: 46653ec9cd00ae75a45779556e8cf95bf7743506147e35bff0a1ff8613355712 title: Embed Flexcard Inside Another 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_embed_flexcard_inside_another_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcard_inside_another_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: feef23a7bb737545d8b65f5cd4aa91f206644f52604e662c5cce4de71dad7185 description: For the managed package runtime, embed a reusable Flexcard as a child inside another Flexcard. The child Flexcard can have its own data source. Or, the parent can override the child's data source with its own data source. The parent can also pass specific data to the child, such as its recordId to use as the child's contextId. products: - Omnistudio release: "264" --- # Embed Flexcard Inside Another Flexcard (Managed Package) For the managed package runtime, embed a reusable Flexcard as a child inside another Flexcard. The child Flexcard can have its own data source. Or, the parent can override the child's data source with its own data source. The parent can also pass specific data to the child, such as its `recordId` to use as the child's contextId. ![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). ![Warning](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_warning.png) Warning When embedding a component, confirm that it isn’t called multiple times. See [Fix Cyclic Redundancy When Embedding Flexcard Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_fix_cyclic_redundancy_when_embedding_flexcard_components.htm&release=264.0.0&type=5 "For the managed package runtime, when you embed components, such as flyouts, Custom LWCs, and child Flexcards, check that components are not called multiple times. If you add components that call themselves or call other components embedded inside components, you may create cyclic redundancy causing events to continuously fire in your browser, exceeding your maximum call size stack."). Before You Begin - Create a child 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."). 1. In the Flexcard Designer, drag the Flexcard element from the Build panel into a state on the canvas. 2. (Optional) From the Properties panel, update the element name in the **Element Name** field. 3. Click into the **Card Name** field, and select a reusable Flexcard to embed. That is, a Flexcard where **Is Child Card** is enabled. ![Important](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_important.png) Important If your parent Flexcard is **Omniscript Support** enabled, only an **Omniscript Support** enabled child Flexcard can be embedded. See [Enable Omniscript Support on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_enable_omniscript_support_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, enable the Omniscript Support feature when your Flexcard interacts with an LWC Omniscript. For example, render a Flexcard inside an Omniscript with the Omniscript Designer's Custom LWC element. Or update an Omniscript with the Update Omniscript action element."). 4. (Optional) Beginning Summer '21, if your Flexcard is a child Flexcard with hierarchical data, to add it to itself recursively, select **Is Recursive**. See [Add a Child Flexcard to Itself Recursively (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_child_flexcard_to_itself_recursively.htm&release=264.0.0&type=5 "For the managed package runtime, when a child Flexcard has hierarchical data, it can call itself recursively. When the Flexcard element is embedded in a child Flexcard, use the Is Recursive feature to display the children and grand-children of parent objects. The child Flexcard can add itself to itself again and again, each time passing the same child data field (also called a data node) available in each level of the data JSON, until that data field no longer exists or is empty."). 5. (Optional) To use the data source from the parent Flexcard instead of the child's data source, perform the following tasks: 1. Confirm that the fields you want to populate in the child Flexcard are also available in the parent Flexcard's datasource. For example, if your child Flexcard displays Case information such as Status and Priority, your parent data source must have these same fields available to send to the child. 2. Click into the **Data Node** field and select a data set to pass to the child Flexcard.

Node

Description

{records}

Send all data.

{records[#]}

Send all the data of a specific record. {records[0]} = first record. {records[1]} = second record. And so on.

{record}

Send only the current record's data, such as when Repeat Records is disabled in the Setup panel so that only one record record is returned.

Deselect Repeat Records only to make a Chart or Datatable display one record. For all other elements, Repeat Records is required for displaying even one record.

{record.FieldName}

Send a record object. For example, if {record.Product} is an object or array with additional data, select it. But, if you want to send a data field, use the Attributes property.

{record.attributes}

Send all Attributes for the current record.
**Example: Display Account and Case Information** Let's say you want to display Account information on a parent Flexcard and Case information on the child Flexcard using a Datatable element. In your child Flexcard, uncheck the [Repeat Records](https://help.salesforce.com/s/articleView?id=xcloud.os_repeat_options_in_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, by default, a Flexcard loops through records returned from its data source. The Flexcard displays the list of records in containers called cards. For example, if a data source returns a list of active Cases for an Account, each card displays the Status, Priority, Subject, and any other data field or element added to a state.") property in the Setup panel so that only one datatable displays. Then, drag the Datatable element onto the canvas from the Build panel. To see how the datatable looks with real data, configure the datasource to get Case information. Activate the child Flexcard. In the parent Flexcard, configure the datasource to get basic Account information and information from all cases associated with the account. For example: ``` [ { "PrimaryContactEmail": "sean@edge.com", "Revenue": 139000000, "Website": "http://edgecomm.com", "Phone": "(512) 757-6000", "Name": "Edge Communications", "Id": "0013g00000AeI9fAAF", "Cases": [ { "Type": "Mechanical", "CaseId": "5003g000007WQHRAA4", "Created": "2020-11-23T20:51:20.000Z", "Priority": "High", "Status": "Escalated", "Subject": "The watchamacallit is too high" }, { "Type": "Structural", "CaseId": "5003g000007WQHQAA4", "Created": "2020-11-23T20:50:32.000Z", "Priority": "Medium", "Status": "New", "Subject": "The doodat wasn't properly set up", "CaseId": "5003g000007WQHQAA4" } ] } ] ``` Add the Flexcard element onto the canvas. From **FlexChild Name**, select the activated child. In **Data Node**, select {records\[0\].Cases}. The child datasource is ignored. The parent datasource populates the child Flexcard datatable. 6. (Optional) To pass attributes from the parent Flexcard to a child Flexcard, in the **Attributes** section perform the following tasks: 1. Click **\+ Add New**. 2. In the **Attribute** field, enter a name for the attribute to pass, such as contactId. 3. Click into the **Value** field and select a merge field, such as {contactId}.You can also enter a supported [context variable](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_context_variables.htm&release=264.0.0&type=5 "For the managed package runtime, global and local context variables are available to a Flexcard to provide context to data sources, actions, and other components. All variables are case sensitive."), or plain text. ![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 Beginning Summer '21, pass concatenated strings. Combine plain text and supported merge fields. For example, pass a breadcrumbs path like {Parent.parentPath}>{Parent.type}>{Name}. 4. Open the child Flexcard selected in the **Flexcard Name** field, and enter the `{Parent.attribute}` [context variable](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_context_variables.htm&release=264.0.0&type=5 "For the managed package runtime, global and local context variables are available to a Flexcard to provide context to data sources, actions, and other components. All variables are case sensitive.") in a supported field, such as in a SOQL query where Id = {Parent.contactId}. **Example: Pass Contact Id to Child Flexcard as a ContextId** Let's say you have a Flexcard that displays Account information on the parent and the Account's primary Contact information on a child Flexcard. In the child Flexcard, use the SQL Query datasource to get basic contact information. For example: ``` Select Id,Name,Email,Phone,MailingStreet,MailingCity,MailingState,MailingPostalCode,MailingCountry from Contact where Id = '{Parent.contactId}' ``` Activate the child Flexcard. In the parent Flexcard, configure the datasource to get basic account information, including the primary Contact Id. Then, pass the primary Contact Id as an **Attribute** to the child Flexcard, where **Attribute** = contactId and **Value** = {namespace\_\_PrimaryContactId\_\_c}. 7. (Optional) To pass data from a child Flexcard to its parent, see [Pass Data From a Child Flexcard to a Parent Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_pass_data_from_a_child_flexcard_to_a_parent_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, after embedding a child Flexcard inside another Flexcard, you can pass data from the child to its parent. Pass the data to the parent as input parameters from a Custom Event action on the child. Use an event listener to listen for the event and execute a Set Values action to update data fields on the parent."). 8. (Optional) To style your element, click **Style** to open the Style panel, and 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."). ![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 If your child Flexcard displays multiple records and you want to show them side by side instead of on top of each other, see [Display Records Side-By-Side on a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_display_records_side_by_side_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, display records side-by-side instead of stacked on top of each other by embedding a child Flexcard and adjusting the widths of its states. By default, records display one on top of the other regardless of the widths of individual elements in the Flexcard."). What’s next: Preview your Flexcard. 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."). - **[Pass Data From a Child Flexcard to a Parent Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_pass_data_from_a_child_flexcard_to_a_parent_flexcard.htm&release=264.0.0&type=5)** For the managed package runtime, after embedding a child Flexcard inside another Flexcard, you can pass data from the child to its parent. Pass the data to the parent as input parameters from a Custom Event action on the child. Use an event listener to listen for the event and execute a Set Values action to update data fields on the parent. - **[Add a Child Flexcard to Itself Recursively (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_child_flexcard_to_itself_recursively.htm&release=264.0.0&type=5)** For the managed package runtime, when a child Flexcard has hierarchical data, it can call itself recursively. When the Flexcard element is embedded in a child Flexcard, use the Is Recursive feature to display the children and grand-children of parent objects. The child Flexcard can add itself to itself again and again, each time passing the same child data field (also called a data node) available in each level of the data JSON, until that data field no longer exists or is empty. - **[Flexcards Child Flexcard Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_child_flexcard_properties.htm&release=264.0.0&type=5)** For the managed package runtime, Flexcard element properties are configurable in the Property Panel when you select a Flexcard element in the Flexcard Designer. With the Flexcard element, embed a reusable Flexcard as a child inside the state of another Flexcard.