Embed Flexcard in a Flexcard

Pass Data From a Child Flexcard to a Parent Flexcard

After you embed a Flexcard in another Flexcard, pass data from the child Flexcard to its parent by using input parameters from a custom event action on the child. Then, set up an event listener to update the parent Flexcard’s data field in response to the event on the child Flexcard.

1. Open the child Flexcard.
2. Drag the Action element from the element panel to the canvas.
3. From the properties panel, expand the Action section.
4. Select the Event action type and the Custom event type.
5. Enter an event name such as updatecity.
6. Pass contextual data:
   1. Add an input parameter.
   2. In Key, enter a name to call from the parent such as cityname.
   3. In Value, enter the value to pass as plain text such as New York, or as a merge field from the child's data source, such as {City}.
7. Activate the child Flexcard.
8. Open the parent Flexcard.
9. From Setup, add an event listener.
   1. Enter the same event name as for the custom event on the child Flexcard, such as updatecity.
   2. Expand the Action section.
   3. Select the Card action type and the Set Values type.
   4. In Key, enter the data field to update.
   5. In Value, enter the name of the input parameter passed from the child Flexcard, by using the action.param context variable. For example, if the key from the input parameter is cityname, enter {action.cityname}.
   6. Save your changes.

Display Account and Case Information

You want to display account information on a parent Flexcard and case information on the child Flexcard using a data table.

1. In your child Flexcard, deselect Repeat Records in the Setup options so that the Flexcard shows one table.
2. Add a data table to the child Flexcard and configure the data source to get the case information.
3. Activate the child Flexcard.
4. On the parent Flexcard, configure the data source to get the account information and the information from all cases related to the account:

   
   [
       {
   	"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"
   	    }
   	]
       }
   ]

5. Add the child Flexcard to the parent Flexcard.
6. In Data Node, enter {records[0].Cases}.

Pass Contact ID to Child Flexcard as a Context ID

A parent Flexcard displays account information and its child Flexcard displays the account's primary contact information.

1. To get the data source on the child Flexcard, enter this SQL query:

   Select Id,Name,Email,Phone,MailingStreet,MailingCity,MailingState,MailingPostalCode,MailingCountry 
   from Contact where Id = '{Parent.contactId}'

2. Activate the child Flexcard.
3. On the parent Flexcard, configure the data source to get account information including the primary contact ID.
4. Pass the primary contact ID to the child Flexcard by entering contactId as the attribute and {namespace__PrimaryContactId__c} as the value.

Data Node for Recursive Flexcard

A recursive Flexcard has hierarchical JSON data with a Products data field that lists products within a product:

[
   {
      "Id": "5123",
      "Name": "Exit Communications",
      "Account Number": "QHT123456789",
       "Phone": "415-987-6543",
       "Website": "http://www.exitcomm.org",
       "Contact": "Melrose Oduke",
       "Contact Phone": "415-333-1234",
       "Products": [
         {
            "Id": "1",
            "Name": "Product1",
            "Products": [
               {
                  "Id": "1_1",
                  "Name": "Product1_1"
               },
               {
                  "Id": "1_2",
                  "Name": "Product1_2",
                  "Products": [
                     {
                        "Id": "2",
                        "Name": "Product2",
                        "Products": [
                           {
                              "Id": "2_1",
                              "Name": "Product2_1"
                           },
                           {
                              "Id": "2_1_2",
                              "Name": "Product2_1_2"
                           }
                        ]
                     }
                  ]
               }
            ]
         }
      ]
   }
]