search
YouTube ChannelBook A DemoContact SupportJoin The Community

bugsDebug Panel

hashtag
Overview

The Debug Details Panel in the Avonni Component Builder's Preview Mode provides an intuitive environment for testing and debugging your Dynamic Components in real-time. Without having to activate or deploy your component in Salesforce, you can easily simulate variable inputs, inspect outputs, and validate formulas directly in the builder.

hashtag
Accessing the Debug Details Panel

  1. Enter Preview Mode: Within the Avonni Component Builder, click the Preview button.

  2. Open the Panel: The Debug Details Panel automatically appears on the right side of your screen.

hashtag
Using the Debug Details Panel

The Debug Details Panel consists of two tabs:

hashtag
Variables Tab

This tab includes three categories

  • Target Object: Displays the current context of the object being targeted by the Dynamic Component.

  • Input Variables: List the variables configured as Available for Input to simulate data passed into your component.

  • Output Variables: Shows read-only values for variables configured as Available for Output, reflecting data produced by your component.

How It Works

  • Select the variable you wish to test from the appropriate section.

  • Enter or choose values directly within the panel.

  • Observe immediate re-rendering and dynamic updates on the preview canvas.

  • For Output Variables, interact with your component on the canvas (e.g., form submissions, button clicks) to monitor real-time value updates.

hashtag
Formulas Tab

This tab facilitates easy debugging and validation of any formulas included in your Dynamic Component.

How It Works

  • View all formulas configured in your component.

  • Monitor real-time evaluations of your formulas as variables and inputs change.

  • Quickly identify and resolve any logical or computational issues within your formulas directly from the Debug Panel.

hashtag
Example: Testing a Record-Specific Component

hashtag
Scenario

Your component uses a record ID to fetch and display related Salesforce data.

hashtag
Setup

  • Define a Text Variable named inputRecordId and mark it as Available for Input.

  • Use this variable in actions like "On Load" > "Get Records" to retrieve data dynamically.

hashtag
Testing Steps

  1. Click Preview in the Component Builder.

  2. Navigate to the Variables tab in the Debug Details Panel.

  3. Under Input Variables, locate inputRecordId.

  4. Paste a valid 18-character Salesforce Record ID into the input field.

  5. Immediately see the component re-render and display data for the provided record.

  6. Change the Record ID to test different scenarios instantly.

circle-exclamation

hashtag
Key Considerations

  • Preview Mode Only: This panel is a testing tool available exclusively in Preview Mode. It does not appear on live Salesforce pages.

  • Variable Availability: A variable will only appear in the "Input Variables" or "Output Variables" tab if its "Available for Input" or "Available for Output" checkbox is checked in its configuration within the Resources panel.

hashtag
Summary

The enhanced Debug Details Panel greatly simplifies testing and debugging of Avonni Dynamic Components. With dedicated tabs for managing variables and formulas, you can quickly validate component behavior and logic directly within the Component Builder, improving development efficiency and reliability.

Last updated

Was this helpful?