> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add Code to Custom Panels in Blocks

## Article: Adding Code to Your Custom Panels

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md

## Article Content:

# Add Code to Custom Panels in Blocks

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md) 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. 

<blockquote class="standard">
  <strong>Notes:</strong>
  
- You cannot test panels in the Blocks preview. To see your panel in action, [test it on a site](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/test-your-app-on-a-site.md). 
- You can [connect panel elements to properties](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/connect-panel-elements-to-props.md) and [set panel buttons to open pages](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-button-rules-to-open-pages.md) with no code. 
- See the [panel elements $w reference](https://www.wix.com/velo/reference/$w/panelbutton).
</blockquote>

<blockquote class="tip">
  <strong>Examples:</strong>
  
To see examples of custom panels, open the following app templates and go to the **Editor Experience** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2024/04/24/d885478b-0fa3-46d0-950a-801399d94383/8dc747a0-244b-4714-bd4c-7a71986a8394.png) tab. 
- [Repeater app](https://dev.wix.com/apps-templates/template?id=a4a7246f-4644-48ce-81e7-2a86aa74d9e5&http_referrer=documentation): Panel for changing the widget layout.
- [Events Map app](https://dev.wix.com/apps-templates/template?id=f086effa-64b8-4c8b-a5c8-61c3a7548af7&http_referrer=documentation): Settings panel. 
- [Recipe List app](https://dev.wix.com/apps-templates/template?id=512a7d8a-1666-40c2-9586-25874d2f69b4&http_referrer=documentation): Settings panel that also links to a dashboard page. 
- [Banner app](https://dev.wix.com/apps-templates/template?id=1b7db962-6230-46bf-b908-d988ef640238&http_referrer=documentation): Panel for adding and removing elements. 
- [Pie Chart app](https://dev.wix.com/apps-templates/template?id=9a55382c-c755-4f01-bda2-80b85630acdd&http_referrer=documentation&http_referrer=documentation): Settings panel for custom element in Blocks.
</blockquote>


## To add code to your custom panel:

1.  Go to **Editor Experience** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/04/25/ed55de36-fcb5-40d4-b738-c9abaf7f2e23/117b4ba6-5023-4a05-93bf-e770a46a4451.png) in the left menu and select the **Panels** tab. 
2.  Make sure that your panel is selected in the **Panels** section on the left menu (or [create a new panel](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md), if you haven't created it yet).

    ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/06/22/3aac0458-d997-49d9-9b24-ed30f7689e24/47bdb1f8-85c3-412c-addc-5bbf4ccecc71.png)


3.  Go to your panel's code section and write your code there. 


      ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/06/22/fa33e0eb-46d3-4c32-8e77-1d674e04fa2e/63ea8f40-6d70-4fa5-8606-411feb9d124c.png)


<blockquote class="standard">
  <strong>Note:</strong>

  If you are working with the Blocks-CLI integration, write your panel code in the [panel.ts file](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/panel-files-and-code.md). 
</blockquote>

## Panel elements

Custom panels are made of unique user interface (UI) elements, such as buttons, checkboxes, drop-down lists and more. See the [list of elements](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-elements-in-blocks.md) and the [$w reference for all panel elements](https://www.wix.com/velo/reference/$w/panelbutton).

## SDK and Velo modules for Blocks custom panels

To enable panel elements to interact with your widget and perform actions in the editor, you can use the following modules:

### `widget` Module

The [`widget`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) SDK module provides functionality to:
- Manage widget properties and settings 
- Control widget design presets and appearance

Import the module using:

```javascript
import { widget } from '@wix/editor';
```

### `wix-editor` Module

The [`wix-editor`](https://www.wix.com/velo/reference/wix-editor) module provides functionality to:
- Remove or restore widget elements from the editor
- Open Dashboard panels and navigate between editor views
- Interact with the editor environment and manage element visibility

Import the module using:

```javascript
import wixEditor from 'wix-editor'
```

## Interact with widget properties

Panels are often used to manipulate your [widget API properties](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/blocks-widget-properties.md). 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/connect-panel-elements-to-props.md).

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. 

```javascript
import { widget } from '@wix/editor';

$w.onReady(async function () {
    const saleIndicator = await widget.getProp('saleIndicator');
    if (saleIndicator === "No Sale") {
        $w("#panelToggleSwitch1").checked = false;
    }
});

$w("#panelToggleSwitch1").onChange(async () => {
    if ($w("#panelToggleSwitch1").checked) {
        await widget.setProp('saleIndicator', "Sale");
    } else {
        await widget.setProp('saleIndicator', "No Sale");
    }
});
```  

<details>
<summary>See deprecated wix-widget Velo example</summary>

```javascript
import wixWidget from 'wix-widget';

$w.onReady(async function () {
    const props = await wixWidget.getProps();
    if (props.saleIndicator === "No Sale") {
        $w("#panelToggleSwitch1").checked = false;
    }
});

$w("#panelToggleSwitch1").onChange(async () => {
    if ($w("#panelToggleSwitch1").checked) {
        await wixWidget.setProps({ saleIndicator: "Sale" });
    } else {
        await wixWidget.setProps({ saleIndicator: "No Sale" });
    }
});
```
</details>


## Show and hide widget elements
Here is a way for showing and hiding an element through the panel code:

```javascript
import wixEditor from 'wix-editor';

$w.onReady(async function () {
 $w('#panelToggleSwitch1').onChange(async (event: any) => {
   if (event.target.value) {
      await wixEditor.removeElement('#title');
   } else {
     await wixEditor.restoreElement('#title');
        }
  });
});
```

## Interact with widget design presets

Here is an example of changing the widget's [design preset](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-design/about-design-presets.md) from the panel code.

This example assumes: 

- A widget with 2 presets: `vertical` and `horizontal`
- A panel with two thumbnails for the two different presets
- The thumbnail values are set to `vertical` and `horizontal`

This is how the panel looks:

![presets-panel](https://wixmp-833713b177cebf373f611808.wixmp.com/images/4cbccaa34f54a237cf80f1fd9f95c1c2.png)

Here is the panel code:

```javascript
import { widget } from '@wix/editor';

$w.onReady(async function () {
    const currentPreset = await widget.getDesignPreset();
    $w("#layoutThumbnails").value = currentPreset;

    $w("#layoutThumbnails").onChange(() => {
        widget.setDesignPreset($w("#layoutThumbnails").value);
    });

});
```

<details>
<summary>See deprecated wix-widget Velo example</summary>

```javascript
import wixWidget from 'wix-widget'; 

$w.onReady(async function () {
    const currentPreset = await wixWidget.getDesignPreset();
    $w("#layoutThumbnails").value = currentPreset;

    $w("#layoutThumbnails").onChange(() => {
        wixWidget.setDesignPreset($w("#layoutThumbnails").value);
    });

});
```
</details>

## Interact with nested widget properties

This example shows how to set a "Sale" or "No Sale" tag in the widget props, but for a [nested (inner) widget](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/site-widgets/add-nested-widgets-in-blocks.md). 

The example assumes: 

- An outer widget with a panel that has a toggle element. 
- The toggle is set to `true` by default. 
- A nested widget with a `saleIndicator` property that has two values: `Sale` and `No Sale`. 

Here is the panel code: 
```js
import { widget } from "@wix/editor";

$w.onReady(async function () {
    const innerWidget = await widget.getNestedWidget("#nestedWidget1");
    const saleIndicator = await innerWidget.getProp("saleIndicator");
    if (saleIndicator == "No Sale") { 
        $w("#panelToggleSwitch1").checked = false;
    }
});

$w("#panelToggleSwitch1").onChange(async () => {
    const innerWidget = await widget.getNestedWidget("#nestedWidget1");
    if ($w("#panelToggleSwitch1").checked) {
        await innerWidget.setProp("saleIndicator", "Sale");
    } else {
        await innerWidget.setProp("saleIndicator", "No Sale");
    }
});
```

<details>
<summary>See deprecated wix-widget Velo example</summary>

```javascript
$w.onReady(async function () {
    const innerWidget = await wixWidget.getNestedWidget("#nestedWidget1");
    const innerProps = await innerWidget.getProps();
    if (innerProps.saleIndicator === "No Sale") {
        $w("#panelToggleSwitch1").checked = false;
    }
});

$w("#panelToggleSwitch1").onChange(async () => {
    const innerWidget = await wixWidget.getNestedWidget("#nestedWidget1");
    if ($w("#panelToggleSwitch1").checked) {
        await innerWidget.setProps({ saleIndicator: "Sale" });
    } else {
        await innerWidget.setProps({ saleIndicator: "No Sale" });
    }
});
```
</details>

## Interact with the panel itself

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. 

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/08/25/808f5ed8-4a92-40eb-85c8-422257bfdff8/2caf0963-9a30-428d-a3ec-104d1b9fd0c1.gif)

Here is the panel code: 

```javascript
$w.onReady(function () {
    $w('#showGreetingSwitch').onChange((event) => {
        if (event.target.checked) {
            $w('#greetingText').expand();
        }
        else {
            $w('#greetingText').collapse();
        }
    })
});
```
## Interact with a collection

You can access your [app collections](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md) in Blocks from the panel code, and perform various actions, such as query, insert, etc.

You can also [access a collection on a site](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md) where your app is installed. 

Just make sure to use the app [namespace](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/creating-a-namespace-for-your-app.md).

For example, write this in the panel code to query your app's collection: 

```javascript
import { items } from '@wix/data';

items.query("<yourAppNamespace>/<yourCollectionName>")
  .find()
  .then( (results) => {
    //your code using the "results";
  });
```

<details>
<summary>See deprecated wix-data Velo example</summary>

```javascript
import wixData from 'wix-data';

wixData.query("<yourAppNamespace>/<yourCollectionName>")
  .find()
  .then( (results) => {
    //your code using the "results";
  });
```
</details>

## Connect and test your panel

After making your panel work, don't forget the next steps: 

* Connect your panel to an [action button](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md), 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/test-your-app-on-a-site.md) to see that it works as planned.