Preview and Debug a Flexcard

Preview a Flexcard's appearance and test its functionality before you publish it to a Lightning page or to a page in an Experience Builder Aura site. Review how the Flexcard looks on multiple devices and test the functionality of interactive elements such as actions. Debug the Flexcard's data output, events, actions, and more.

1. From the App Launcher, find and select Flexcards.
2. From the list page, select a Flexcard version.
3. Click Preview.
   

   Note

   The Navigate and Omniscript actions don’t work in preview. To view them, add them to a Lightning or Experience Builder page.

4. If needed, add test parameters and enter this information:
   1. In Key, enter a context variable that controls how the data is displayed on the Flexcard. For example, enter pagelimit to update how many pages the Flexcard displays for a data table element.
   2. In Value, enter a test value. For example, if the key is pagelimit, enter 2 to show up to two pages on the Flexcard.
5. If needed, select another device from the devices picklist to test the Flexcard’s responsiveness.
6. If needed, identify potential issues at run time by reviewing how the data source populates the elements on the rendered cards by inspecting the JSON code.

   The values in the JSON code refresh when you interact with the Flexcard on the canvas, such as when you enter data or click an action element.

7. If needed, access the action debugger and drill down into a data source to review its logs and related events.

   The action debugger helps you understand the Flexcard’s client- and server-side actions and event requests and responses by providing information such as:

   • The configuration, status, and responses of parent and child data sources.

   • The data source type and relevant settings, such as delay time from the config property.

   • Whether the data source successfully returns data in the status field, and the returned data in the response field.

   • The response of each action or event executed on the Flexcard. For example, your Flexcard has a pubsub event that passes data. An event listener on the same Flexcard updates a data field with the passed value. View the pubsub event action and the set values action logs by clicking the Pubsub Event action link on the action debugger. Action logs include data that’s relevant to the action type. For example, a pubsub event action log includes channel, event, and inputMap. A set values action log includes fields and response.
8. If needed, click to copy a log.
9. When the Flexcard is ready, click to reset the data JSON. Omnistudio doesn’t reset the changes that you make on the action debugger.
10. Activate the Flexcard.

• Data JSON
  Use the Data JSON feature in the Flexcard Designer's Preview tab to see how your data source populates the elements on the rendered cards of your Flexcard component. Detect potential issues at run time. The Data JSON panel updates when you interact with the Flexcard, such as when entering data in an input field or clicking an actionable item.