Showing A Yes No Cancel Message Box

Photoshop UXP Plugin API
4

A quick prompt function that might prove useful to you:

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);
}

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 */ }
4 Likes