What's the proper process to make a Modal UI Plugin without using React?

Adobe XD UXP Plugin API
1

I didn’t found out any way to create a Modal UI Plugin. I followed this link https://github.com/AdobeXD/plugin-samples/tree/master/ui-hello but again if I am trying to add something on the artboard from plugin, it gives me error “Panel plugin edits must be initiated from a supported UI event”.
Correct me if i am wrong; Is there any difference between Modal and Panel Plugin code wise or they are the same just we use Modal to interact with the user? If someone has any reference then it would be a great help.

Thanks. Regards

1 Like
2

Hi @rohitmethwani,

first of all: welcome to the forums :wave:.

There is a difference: With panels, you have to use application.editDocument(...) to edit the document (this can only be done upon user interaction and basically opens a timeframe (during the callback passed to this function) in which you can manipulate the scenegraph.

For modal plugins, on the other hand, a timeframe is “automatically” opened upon the user opening the modal by, e.g., clicking on the plugin’s menu item.

Further details regarding this can be found at https://adobexdplatform.com/plugin-docs/reference/core/lifecycle.html?h=modal.

I currently don’t have the time to give a more extensive answer (I’m also taking a small break until the beginning of January), so, sorry about that, but I believe this might help getting you into the right direction :slightly_smiling_face: .

Best,
Pablo

2 Likes
3

Thanks @pklaschka for your help. Can you provide some reference in which through Modal we can add something on the artboard? It would be a big help!

1 Like
4

Hi @rohitmethwani,

of course.

One (already rather advanced, yet still simple enough) example would be the e2e-create-polygon sample.

Explaination of the lines (from specified line onwards):

  1. https://github.com/AdobeXD/plugin-samples/blob/e242f9f49fd7942f2862a061a42ddf2dd30df8ca/e2e-create-polygon/main.js#L5 Creates the mockup for the modal
  2. https://github.com/AdobeXD/plugin-samples/blob/e242f9f49fd7942f2862a061a42ddf2dd30df8ca/e2e-create-polygon/main.js#L53 The (inner) function that does the scenegraph manipulation, here, adding a Polygon
  3. https://github.com/AdobeXD/plugin-samples/blob/master/e2e-create-polygon/main.js#L79 We’re out of the inner function (this really shouldn’t be an inner function, but I’m not the one who’s created this sample :wink:) again, so this code actually gets executed:
if (!dialog) { // If the dialog wasn't created, yet; i.e the plugin wasn't run, yet
        dialog = document.createElement("dialog"); // Create a dialog element
        dialog.innerHTML = html; // Add the markup as innerHTML
        document.appendChild(dialog); // Append it to the document
        // Call the inner function, insertPolygon, on submit
        document.querySelector("form").addEventListener("submit", insertPolygon);
}
  1. Last, but not least, in line 85, dialog.showModal() gets called and its return value returned. This is important since showModal() returns a Promise that only resolves after the modal was closed, meaning when we return this, the editing time frame stays open as long as we don’t close the modal. This, in turn, means that our inner function gets called in time to edit the scenegraph.

I hope this helps,
Happy coding,
Pablo :slightly_smiling_face:

PS: Depending on what you’re trying to accomplish, it may also be worth taking a look at my library, xd-dialog-helper. As long as all you’re trying to do is create a “form-like” modal, i.e., something that asks the user for some configuration to then, e.g., insert something into the scenegraph according to this configuration, this library makes this much easier (and is MIT-Licensed, so pretty easy to integrate). Plus, to really save time, you could even prototype very quickly using the WYSIWYG dialog editor at https://xd-dialog-helper.pabloklaschka.de/editor/ :wink:.

2 Likes
5

@pklaschka brother this tool is insane! Surely would love to use this. Thanks mate!

1 Like