Debug Panel
Last updated
Was this helpful?
Last updated
Was this helpful?
The Debug Details Panel is a powerful feature available within the Avonni Component Builder's Preview Mode. It provides an interactive way to test your Dynamic Component's behavior by allowing you to simulate input values and inspect output values in real-time, all without needing to activate and deploy your component to a Salesforce page.
Rapid Testing & Iteration: Test how your component responds to various inputs instantly.
Interactive Debugging: See your component re-render in real-time as you change variable values.
No Deployment Needed: Fully test your component's variable logic without leaving the Component Builder.
Validate Component Logic: Ensure that your formulas, conditional visibility, and reactivity function as expected across various data scenarios.
Enter Preview Mode: While in the Avonni Component Builder, click the "Preview" button.
Open the Panel: The Debug Details Panel will appear on the right side of the screen.
The panel contains two primary tabs: Input Variables and Output Variables.
This tab allows you to simulate data being passed into your Dynamic Component.
What it Displays: This tab lists all the Variable resources that you have marked as "Available for Input" in your component's configuration.
How it Works:
Find the input variable you want to test in the list.
Enter or select a value for it directly in the panel's input field.
As you type or change the value, the component on the preview canvas will instantly react and re-render based on the simulated input.
This tab allows you to inspect the current value of data being passed out of your Dynamic Component.
What it Displays: This tab lists all the Variable resources that you have marked as "Available for Output" in your component's configuration.
How it Works:
It provides a read-only view of the current value of each output variable.
As you interact with your component in the preview canvas (e.g., select an item, fill out a form), you will see the values in this tab update in real-time, confirming that your component's internal logic is correctly setting its output variables.
Scenario: You've built a component that should be placed on a record page. It has an input variable inputRecordId and uses an "On Load" > "Get Records" action to fetch and display data for that specific record.
Old Way (without Debug Panel): You would have to save, activate, go to the Lightning App Builder, place the component on a record page, save the page, and then navigate to different records to test it.
New Way (with Debug Panel):
Setup: In your Dynamic Component, ensure you have a Text Variable named inputRecordId and that it is marked as "Available for Input". Your component's logic should use this variable (e.g., as the Record ID in your "On Load" > "Get Records" action).
Enter Preview Mode: Click the "Preview" button in the Component Builder.
Use the Debug Panel:
Click on the Input Variables tab in the Debug Details Panel.
Find inputRecordId in the list.
Paste a valid 18-character Salesforce Record ID into its value field.
Observe: The component on the preview canvas will immediately re-render, showing the data for the record ID you just pasted, as if you were on that actual record page.
Iterate: Paste a different Record ID to instantly test the component's behavior with another record's data.
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.
The Debug Details Panel is an essential tool for accelerating development with Avonni Dynamic Components. By allowing you to interactively test your component's input and output variables directly within the builder, it streamlines the debugging process and helps you build more reliable components faster.
