Simple example of modal dialog for UXP in Indesign

InDesign
,
1

Hello everyone,

I am currently trying to evaluate converting an internally used ExtendScript plugin to UXP. The plugin uses ScriptUI to display a modal configuration dialog, which is not supported any more in UXP (I think?).

I tried to use UXP to create a modal dialog, but I could not find a complete example on how to do so.

Here is what I have got so far:
index.htm:

<!DOCTYPE html>
<html>
<head>
  <script src="main.js"></script>
</head>
<style>
  dialog {
    background-color: var(--uxp-host-background-color);
    color: var(--uxp-host-text-color);
    border-color: var(--uxp-host-border-color);
    font-size: var(--uxp-host-font-size);
  }

  #sampleDialog>div {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 400px;
    align-items: center;
  }

  #sampleDialog>div>p {
    margin-top: 30px;
  }
</style>

<body>
  <dialog id="sampleDialog">
    <div>
      <h1>Well hello!</h1>
      <sp-banner>
        <div slot="header">Header text</div>
        <div slot="content">Content of the banner</div>
      </sp-banner>
      <sp-button variant="primary">I'm a button</sp-button>
    </div>
  </dialog>
</body>
</html>

js to display the dialog:

let result = await document.getElementById("sampleDialog").show();

This does display a dialog with a fixed width, and gray text on gray background that is not readable. Furthermore, there is no visible button:

grafik
grafik1008×853 4.9 KB

Is there anything I am missing? Do I need to include a special stylesheet?

Thanks in advance!

Best regards,
Christoph

2

You need to launch your dialog in a modal context using the uxpShowModal method. You’ll just need a way to launch your dialog. It can be done via a button or a menu command defined in your manifest and entrypoint setup in main.js. I have pasted a simple example below showing both options.

Try it out and let me know if you have any questions?

<!DOCTYPE html>
<html>

<head>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<style>
  dialog {
    background-color: var(--uxp-host-background-color);
    color: var(--uxp-host-text-color);
    border-color: var(--uxp-host-border-color);
    font-size: var(--uxp-host-font-size);
  }

  #sampleDialog>div {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 400px;
    align-items: center;
  }

  #sampleDialog>div>p {
    margin-top: 30px;
  }
</style>

<body>
  <sp-heading>Modal Dialog Example</sp-heading>
  <sp-body>
    <sp-button id="launchDialog">Launch Dialog</sp-button>
  </sp-body>
  <dialog id="sampleDialog">
    <div>
      <h1>Well hello!</h1>
      <sp-banner>
        <div slot="header">Header text</div>
        <div slot="content">Content of the banner</div>
      </sp-banner>
      <sp-button variant="primary">I'm a button</sp-button>
    </div>
  </dialog>
</body>

</html>

main.js - code to launch your dialog in the modal context.

const { entrypoints } = require("uxp");

async function launchDialog() {
    const dialog = document.getElementById("sampleDialog");

    try {
        const result = await dialog.uxpShowModal({
            title: "Example Modal Dialog",
        });
        console.log(`dialog result: ${result}`);
    } catch (error) {
        console.error(error);
    } finally {
        dialog.close();
    }
}

entrypoints.setup({
    commands: {
        launchDialog,
    },
    panels: {
        vanilla: {
            show(node) {},
        },
    },
});

document.getElementById("launchDialog").addEventListener("click", launchDialog);
3

Thank you for your reply!

Googling “uxpShowModal()” lead me to a blog post from Davide Barranca that contains an example that looks fine (and with correct text color) without any additional css:

  <dialog id="sampleDialog">
    <sp-heading size="L" style="margin: 0">Hello world</sp-heading>
    <sp-divider size="large" style="margin:10px 0"></sp-divider>
    <sp-body>Content text</sp-body>  
   <sp-button variant="primary" onclick="document.querySelector('#sampleDialog').close('OK')">
      Ok
    </sp-button>
  </dialog>

I have experimented a bit and found out:

  1. You don’t have to call uxpShowModal(), showModal() works as well
  2. show() also works and looks identical - in case one needs a non-modal dialog.

I have no idea why <sp-banner> did not work. Maybe it is not supported by Indesign.

I wish there was more official documentation from Adobe. I am a bit unsure whether I should proceed with my project - is UXP in Indesign “production-ready”?

4

Seems you are headed in the right direction. And, yes, uxpShowModal() aliases to showModal() for now, but I think that is expected to change in the future…

The sp- components are definitely hit or miss in my experience.

As for the production “ready-ness” of UXP, I guess that is up for debate. Adobe seems to think it is production ready. UXP does work well for some projects but has many unimplemented features so I definitely don’t think it is a top area of focus/priority for them.

Cheers!