Converting action dialog to Batch Play

Photoshop UXP Plugin API
1

Hello,
How can I onvert the following JSX code into batch play:

var desc1 = new ActionDescriptor();
desc1.putString(c2t("Msge"), "Some String");
desc1.putBoolean(c2t("Cntn"), true);
executeAction(c2t("Stop"), desc1, DialogModes.ALL);

Thanks

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:

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
PixelSnap 2021-03-19 at 16.05.55@2x538Ă—240 3.11 KB

Mac OS: (render with PS icon)

Screenshot 2021-03-19 at 15.20.02
Screenshot 2021-03-19 at 15.20.02420Ă—151 6.06 KB

• 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
3

Here is the batch play command:

batchPlay(
    [{
    '_obj'     : 'stop',
    'message'  : 'Your Message',
    'continue' : true,
    '_options' : {"dialogOptions":"display"}
    }]
)
1 Like
4

Need a second argument “modalBehavior” for this to work.

batchPlay(
    [{
        '_obj': 'stop',
        'message': 'Your Message',
        'continue': true,
        '_options': {
            "dialogOptions": "display"
        }
    }], {
        'modalBehavior': 'wait'
    });

or

batchPlay(
    [{
        '_obj': 'stop',
        'message': 'Your Message',
        'continue': true,
        '_options': {
            "dialogOptions": "display"
        }
    }], {});
1 Like