YouTube ChannelContact SupportSubscribe for Updates

Debug Panel

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 needing to activate or deploy your component to Salesforce, you can easily simulate variable inputs, inspect outputs, and validate formulas directly from the builder.

Key Benefits

  • Rapid Testing & Iteration: Quickly assess component responses to varying inputs and conditions.

  • Interactive Debugging: Watch your component update instantly as you modify variables or formulas.

  • Formula Validation: Test and troubleshoot formulas in real-time directly within the builder.

  • Deployment-Free Testing: Fully validate component logic without leaving the Component Builder environment.

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.

Using the Debug Details Panel

The Debug Details Panel consists of two tabs:

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 variables configured as Available for Input, enabling you 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.

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.

Practical Example: Testing a Record-Specific Component

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

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.

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.

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.

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?