Creating multiple panels OR get uiEntryPoints

Adobe XD UXP Plugin API
1

Hi!

I would like to know how can I create multiple panels in my plugin? I’ve set the manifest up correctly but I can’t figure out how can I present this in the main.js.

I couldn’t find any resources about having multiple panels or from the API to find the uiEntryPoint that the user has gone through.

manifest.js

...
"uiEntryPoints": [
    {
      "type": "panel",
      "panelId": "panel1", 
      "label": "Panel1"
    }, 
    {
      "type": "panel",
      "panelId": "panel2", 
      "label": "Panel2"
    }, 
    {
      "type": "panel",
      "panelId": "panel3", 
      "label": "Panel3"
    }, 
    {
      "type": "panel",
      "panelId": "panel4", 
      "label": "Panel4"
    }
  ]

main.js

function show(event) {
  const content = `VERY LONG FORM`;

  const panel = document.createElement("div");
  panel.innerHTML = content;
  event.node.appendChild(panel);
}

function hide(event) {
  event.node.firstChild.remove();
}

function update(selection) {
...
}

module.exports = {
  panels: {
    panel1: {
      show
    },
    panel2: {
      show
    }, 
    panel3: {
      show
    },
    panel4: {
      show,
      update, 
      hide
    }
  }
};

Thank you.

2

There might be better ways, but I see the panelId of the UI entry point that was clicked on as this._manifestPanel.panelId. So in your show function you can put something like:

if (this._manifestPanel.panelId === "panel1") {
   panel.innerHTML = panel1content;
} else { ...
3

This worked! How did you figure out that it’s this._manifestPanel.panelId ?!

4

I made a test plugin with some debug information in the show() function while trying to get details on the event:
console.log("this: ", this);