Web Export for UXP Plugin development

To create your plugin UI visually using Adobe XD and Web Export follow the following steps.

Install Web Export version 8 or greater
Create a new plugin in UDT
Open VSCode and create “setup.js”
In that file add the following javascript (shown as text below)
In the plugin open the manifest and use the manifest code below to point to version 5 manifest and setup code
Unload and reload the plugin in UDT (the plugin should show some new options in XD plugins panel)
In UDT set the plugin to watch to automatically
Create a new XD project in the plugin directory
In XD create two artboards
Open Web Export element options panel and name the first artboard “mainPanel”
In the first artboard HTML template add a reference to the setup javascript file
In the second artboard name that “dialog” and set the tag name to “dialog”
In the styles field enter “position: relative”
Add some content to both to show that they are the panel and a dialog, “My Panel” and “My dialog”
Select both artboards and open the Web Export export dialog (select dialog first and then main panel second)
Make sure mainPanel artboard is shown in the dialog (select it last)
Name the page “index”
In the dialog select “Single Page (plugin)” export option
Select “Selected Artboards”
Click the export folder icon and select the UXP plugin project folder
Click Export and make sure there are no errors. An index.html file should have been exported> Check in vscode
In XD return to the plugins list
Expand plugin test and make sure the menu options have changed
Click the Show Panel option. The panel should now be shown reflecting the artboard design. Expand the panel if necessary
Make changes to the artboard content and then press “CTRL + SHIFT + F” to quick export. The changes should be updated automatically in the panel
Use background: transparent in the styles field to remove the white background of the panel. Quick export
Make a button graphic and set the id to “openDialogButton”
Return to the test plugin panel and click on your open button. Clicking on this button will show your dialog. Press escape to hide the dialog
Add a close button to the dialog and name it “closeButton” and quick export.
Select the open button. In the tag name field enter “button” or “sp-button”. In the markup inside field enter “open”. Quick export and view the test panel
In the style field enter “height: 28px” and quick export
If the quick export dialog appears on each export and you’d like to turn it off go to the Web Export global settings and switch the “Show dialog on export shortcut” to off
To make the panel responsive select the main artboard and set the width to 100%. Anchor the button to the right side. Quick export and review the panel by resizing
You can set a minimum width if desired by adding min-width: 320px to the styles field
To anchor an element to an edge use the anchor properties. Select the open button and click the Right anchor

manifest.json:

  "manifestVersion": 5,
  "main": "index.html",
  "entrypoints": [
      {
          "type": "command",
          "id": "openDialog",
          "label": {
            "default": "Show A Dialog"
          }
      },
      {
          "type": "panel",
          "id": "mainPanel",
          "label": {
              "default": "Show Panel"
          }
      }
  ],

code.js:

//////////////////////////////////////////
// MAIN PANEL
//////////////////////////////////////////

const { entrypoints } = require("uxp");
console.log("start")

function startup() {
    var openDialogButton = document.getElementById("openDialogButton");
    var closeButton = document.getElementById("closeButton");

    openDialogButton.addEventListener("click", openDialogHandler);
    closeButton.addEventListener("click", closeDialogHandler);
}

function openDialogHandler() {
    console.log("open dialog");
    openDialog();
}

//////////////////////////////////////////
// DIALOG
//////////////////////////////////////////

async function closeDialogHandler() {
    await closeDialog();
}

async function openDialog() {
    console.log("open dialog");
    const dialogName = "dialog";
    var dialog = document.getElementById(dialogName);
    var message = "An dialog element must exist with name " + dialogName;

    if (dialog==null) {
        console.log(message);
        throw new Error(message);
    }

    if (dialog.open) {
        //await dialog.close();
    }
    else {
        await dialog.showModal();
    }
}

async function closeDialog() {
    console.log("close dialog");
    var dialog = document.getElementById("dialog");

    if (dialog.open) {
        await dialog.close();
    }
}

//////////////////////////////////////////
// SETUP
//////////////////////////////////////////

var panelFunctions = {
    async create(event) {
        console.log("create");
        startup()
    },

    async show(event) {
        console.log("Show")
    },

    async update() {
        console.log("Update")
    }
}

function setupPlugin() {
    try {
        if ("require" in window) {
            const { entrypoints } = require("uxp");
            const panelName = "mainPanel";
            var message = "Panel name must be " + panelName;

            if (document.getElementById(panelName)==null) {
                console.log(message);
                throw new Error(message);
            }
            var openDialogName = "openDialog";
            var dialogFunction = window[openDialogName];

            if (dialogFunction==null) {
                message = "There must be a function "+openDialogName;
                console.log(message);
                throw new Error(message);
            }
            var setup = {};
            var panels = {};
            panels[panelName] = panelFunctions;
            var commands = {
                openDialog: dialogFunction,
            }
            setup.panels = panels;
            setup.commands = commands;
            entrypoints.setup(setup);

            console.log("after entry.setup()");
        }
    }
    catch(error) {
        console.log(error)
    }

    if ("_pluginInfo" in entrypoints) {
        console.log(entrypoints._pluginInfo.manifest.analytics);
    }
}

setupPlugin();

console.log("end")

With some additional work you can make the UI responsive and add your own form controls.

VELARA III

Web Export for UXP Plugin development

Leave a Reply Cancel reply