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.

This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Warning

When embedding a component, confirm that it isn’t called multiple times. See Fix Cyclic Redundancy When Embedding Flexcard Components (Managed Package).

Before You Begin

• Create a child Flexcard. See Create a Flexcard (Managed Package).

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

   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).

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).
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 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, or plain text.

      

      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 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).
8. (Optional) To style your element, click Style to open the Style panel, and see Style Flexcard Elements (Managed Package).
   

   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).

• Pass Data From a Child Flexcard to a Parent Flexcard (Managed Package)
  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)
  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)
  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.