Edit in GitHubLog an issue

Panel show() callback

The show() function is the one lifecycle method in panel objects that is required. XD calls show() each time the user opens your panel.

To populate the panel with UI elements, add DOM nodes to the event.node root node that is provided. There are two ways you can use show() to create your panel UI:

Recreate panel on each show()

For simple panels, you can create the panel UI each time it's shown and throw it away each time it's hidden:

Here is a simple example:

Copied to your clipboard
1function show(event) {
2 const content = "<p>Hello, World</p>";
3 const panel = document.createElement("div");
4 panel.innerHTML = content;
5
6 event.node.appendChild(panel);
7}
8
9function hide(event) {
10 event.node.firstChild.remove();
11}

Create panel on first show(), then reuse

For panels with more complex state, it may be simpler to continue reusing the same panel DOM nodes:

Copied to your clipboard
1let panel;
2
3function show(event) {
4 if (panel) {
5 return;
6 }
7
8 const content = "<p>Hello, World</p>";
9 panel = document.createElement("div");
10 panel.innerHTML = content;
11
12 event.node.appendChild(panel);
13}
14
15function hide(event) {
16 // nothing to do here
17}

Note: once the panel has been created you don't need to touch the DOM at all for hide & show to work correctly -- XD takes care of closing and reopening the panel UI's container automatically.

Panel content updating

Whichever method you use, you'll typically also need to implement the update() callback in order to update your panel UI if the selection or XD document content changes while the panel is already open.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2023 Adobe. All rights reserved.