Converting action dialog to Batch Play

Photoshop UXP Plugin API
2

Hi, this CEP JSX code shows a PS Stop/Continue box, hence a modal window.

• If you just ned an alert box:

const app = require("photoshop").app;
app.showAlert("Hello world!");

or

const psCore = require("photoshop").core;
psCore.showAlert({ message: "Hello world!"});

Ref. here:
https://www.adobe.io/photoshop/uxp/guides/how-to/#how-to-display-a-simple-alert

Note that Win and Mac will render this alert differently:
Win OS: (render with a cross icon)
PixelSnap 2021-03-19 at 16.05.55@2x

Mac OS: (render with PS icon)
Screenshot 2021-03-19 at 15.20.02

• If you need more than just an OK button, then you might need to consider a modal dialog.

A great approach from @kerrishotts with a quick prompt function:

async function prompt(heading, body, buttons=["Cancel", "Ok"], options={title: heading, size: {width: 360, height: 280}}) {
    const [dlgEl, formEl, headingEl, dividerEl, bodyEl, footerEl] = 
        ["dialog", "form", "sp-heading", "sp-divider", "sp-body", "footer"]
        .map(tag => document.createElement(tag));
    [headingEl, dividerEl, bodyEl, footerEl].forEach(el => {
        el.style.margin="6px";
        el.style.width="calc(100% - 12px)";
    });

    formEl.setAttribute("method", "dialog");
    formEl.addEventListener("submit", () => dlgEl.close());

    footerEl.style.marginTop = "26px";

    dividerEl.setAttribute("size", "large");

    headingEl.textContent = heading;

    bodyEl.textContent = body;
    
    buttons.forEach((btnText, idx) => {
        const btnEl = document.createElement("sp-button");
        btnEl.setAttribute("variant", idx === (buttons.length - 1) ? (btnText.variant || "cta") : "secondary");
        if (idx === buttons.length - 1) btnEl.setAttribute("autofocus", "autofocus");
        if (idx < buttons.length - 1) btnEl.setAttribute("quiet");
        btnEl.textContent = (btnText.text || btnText);
        btnEl.style.marginLeft = "12px";
        btnEl.addEventListener("click", () => dlgEl.close((btnText.text || btnText)));
        footerEl.appendChild(btnEl);
    });

    [headingEl, dividerEl, bodyEl, footerEl].forEach(el => formEl.appendChild(el));
    dlgEl.appendChild(formEl);
    document.body.appendChild(dlgEl);

    return dlgEl.uxpShowModal(options);
}

Now that function prompt is defined, use it as you wish:

const r = await prompt("Upload Large File", "This is a large file (over 100MB) -- it may take a few moments to upload.", ["Skip", "Upload"]);
if ((r||"Upload") !== "Upload") { /* cancelled or No */ }
else { /* Yes */ }

const r = await prompt("Delete File", "Are you sure you wish to delete this file? This action cannot be undone.", ["Cancel", {variant: "warning", text: "Delete"}]);
if ((r !== "Delete") { /* nope, don't do it! */ }
else { /* Do the delete */ }

In case use of prompt function, you control and design the look of your dialog window.

Further links:

There’s a video from @DavideBarranca on the matter of Dialogs:

Ref. from this post :

Hope this helps :slight_smile:

4 Likes