Create custom panels for action buttons in your widget and its elements. When a Wix user clicks an action button (for example, the Settings button), the custom panel opens.
You can create as many panels as you need, to provide users with various options to customize widgets.
First, design your panel and connect it to an action button. Then create your panel logic, to determine how it interacts with the widget or to control the behavior of the panel itself.
To see examples of custom panels, open the following app templates and go to the Editor Experience tab.
Go to Editor Experience in the left menu and select the Panels tab.
Make sure that your panel is selected in the Panels section on the left menu (or create a new panel, if you haven't created it yet).
Go to your panel's code section and write your code there.
If you are working with the Blocks-CLI integration, write your panel code in the panel.ts file.
Custom panels are made of unique user interface (UI) elements, such as buttons, checkboxes, drop-down lists and more. See the list of elements and the $w reference for all panel elements.
To enable panel elements to interact with your widget and perform actions in the editor, you can use the following modules:
widget
ModuleThe widget
SDK module provides functionality to:
Import the module using:
wix-editor
ModuleThe wix-editor
module provides functionality to:
Import the module using:
Panels are often used to manipulate your widget API properties. This means that when users change something in the panel, the property values change. You can connect panel elements to properties easily, with no code.
You can also connect panel elements with code. In this example, users can turn a "special sale" property on and off, through a toggle element in the widget's panel.
Here is a way for showing and hiding an element through the panel code:
Here is an example of changing the widget's design preset from the panel code.
This example assumes:
vertical
and horizontal
vertical
and horizontal
This is how the panel looks:
Here is the panel code:
This example shows how to set a "Sale" or "No Sale" tag in the widget props, but for a nested (inner) widget.
The example assumes:
true
by default.saleIndicator
property that has two values: Sale
and No Sale
.Here is the panel code:
In some cases, you might want to manipulate what happens within the panel itself. For example, you might want some of the panel elements to be hidden if they are irrelevant.
This panel for the Login Bar Settings button has a toggle, which determines whether or not to show a greeting before the user's name.
Here is the panel code:
You can access your app collections in Blocks from the panel code, and perform various actions, such as query, insert, etc.
You can also access a collection on a site where your app is installed.
Just make sure to use the app namespace.
For example, write this in the panel code to query your app's collection:
After making your panel work, don't forget the next steps:
Connect your panel to an action button, if you haven't done it yet. When a site builder clicks that action button, your panel will open.
Test your panel in the editor to see that it works as planned.