XD Plugin UI Examples

Step 1.js

var dialog;

function createDialog() {
    dialog = document.createElement("dialog");
    dialog.innerHTML = `
        <form method="dialog">
            <h1>Hello, world!</h1>
            <hr>
            <footer>
                <!-- Ok button is special: it will automatically close the dialog for us -->
                <button id="ok" type="submit" uxp-variant="cta">OK</button>
            </footer>
        </form>`;
    document.appendChild(dialog);
}

function showDialog(selection) {
    if (!dialog) createDialog();

    return dialog.showModal().then(function () {
        console.log("Dialog closed");
    });
}

Step 2.js

    dialog.innerHTML = `
        <style>
        .row {
            display: flex;
        }
        </style>
        <form method="dialog">
            <h1>Create Button Frame</h1>
            <hr>
            <div class="row">
                <input type="text" uxp-quiet="true" id="txtV" placeholder="V padding" />
                <input type="text" uxp-quiet="true" id="txtH" placeholder="H padding" />
            </div>
            <footer>
                <!-- Ok button is special: it will automatically close the dialog for us -->
                <button id="ok" type="submit" uxp-variant="cta">OK</button>
            </footer>
        </form>`;


// .....................................................................................


        var valueV = dialog.querySelector("#txtV").value;
        var valueH = dialog.querySelector("#txtH").value;
        console.log(valueV, valueH);