How to add and remove from panel to dialog

Adobe XD UXP Plugin API
1

I’m getting a blank plugins panel on some projects.

image
image2296×1718 200 KB

Is it possible that I could be accidentally removing all of the panels? I’m not talking about my own plugin panel but all plugins are gone. On another open project in another window my plugin panel is working fine. I’ve reloaded the plugins and panel still remain blank.

The documentation has how to show a panel but what’s the recommended way to remove it or add and remove from a dialog?

https://adobexdplatform.com/plugin-docs/tutorials/quick-start-panel/

In my case I remove the form from the panel and show it in a dialog and when the dialog is closed I remove it from the dialog and then add it back to the panel.

Here’s how I adding and removing on hide() the panel (not the dialog):

hide(event) {
	globalModel.panelVisible = false;

	try {

		if (event.node && event.node.firstElementChild) {
			event.node.firstElementChild.remove();
		}
	}
	catch(error) {
		log(error);
	}
},


show(event) {
	var node = event.node;
	var panelNodeContainsNode = elementForm.mainForm ? node.contains(elementForm.mainForm) : false;

	if (node.firstElementChild==null || elementForm.mainForm==null || panelNodeContainsNode==false) {
			var elementPanel = createElementDialogOrPanel(true, showLabels);
			node.appendChild(elementForm.mainForm);
		}
	}
}

There’s more code for adding and removing from the dialog window.

2

I’ve replied to the other post you posted: Properties on the UXP panel but a great workaround would be not using the hide method at all!

3

By not using it at all do you mean not removing it from the node once it’s been added?

4

correct. and only add the UI when the UI hasn’t been created and added to the dom (when user first opens your plugin)

5

To the extent this discussion relates to adding/removing element (and the panel), how do you update the panel UI?

I have an unorderd-list in my panel that needs to add new list-items when the user presses a button, also in the panel. I can remove items from the list easy enough;

// on button click remove first list item.
const list = document.getElementById("my-unorderd-list");
list.firstChild.remove();

But when I try to add an item to the list, the UI doesn’t update.

// on button click clone and add item to list
const lastItem = list.lastChild;
const clone = lastItem.cloneNode(true);

clone.firstChild.textContent = "Cloned Item";
list.appendChild(clone);

Any suggestions?

6

This seems to only be an issue when I write the plugin in vanilla js, react components update the UI as expected.

But I did not want to use react.