Multiple panels without web components

InDesign
1

It seems that multiple panels are not correctly supported in InDesign 19.2? I have defined two panels in manifest.json file:

  "host": [
    {
      "app": "ID",
      "minVersion": "19.0.1"
    }
  ],
  "manifestVersion": 5,
  "entrypoints": [
    {
      "type": "panel",
      "id": "panelA",
      "label": {
        "default": "Panel A"
      }
    },
    {
      "type": "panel",
      "id": "panelB",
      "label": {
        "default": "Panel B"
      }
    }
  ],

In index.html I am using the <uxp-panel> element which however is only working for the first panel:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script src="main.js"></script>
</head>
<body>
  <uxp-panel panelid="panelA">
    <sp-heading>Panel A</sp-heading>
  </uxp-panel>
  <uxp-panel panelid="panelB">
    <sp-heading>Panel B</sp-heading>
  </uxp-panel>
</body>
</html>

I am seeing Panel A in panelA, however I am not seeing anything in panelB.

The show event is not triggering for panelB:

main.js

const { entrypoints, storage } = require("uxp");
const { app } = require("indesign");
entrypoints.setup({
  panels: {
    panelA: {
      show(node) {
        console.log(this);
      }
    },
    panelB: {
      show(node) {
        console.log(this);
      }
    }
  }
});

In the debug console I am only seeing a result for panelA.

2

Likewise. I have the same setup (I based my setup on this post Manifest 5 - 2 panels in same plugin? - #4 by pklaschka). I can open and see the second panel, but it remains blank whatever I put in the tag. It’s frustrating. Is it possible to have a second panel in an InDesign plugin or not?

3

I suppose this is a bug.
I tried to run same plugin on both applications Photoshop and InDesign.
It works properly on Photoshop. on the other hands, on InDesign it loads only first panel.

<body>
  <h1>Hello</h1> 
  <uxp-panel panelid="third">
    <h1>third panel</h1>
    <button type="button">push</button>
  </uxp-panel>
  <uxp-panel panelid="second">
    <h1>second panel</h1>
    <button type="button">push</button>
  </uxp-panel>
</body>

entrypoints.setup({
    panels:{
        first:{
            show(event){
                console.log("first", event);
            }
        },
        second:{
            show(event){
                console.log("second", event);
            }
        },
        third: {
            show(event) {
                console.log("third", event);
            }
        }
    }
});

Photoshop
Photoshop2546×1766 181 KB

InDesign
InDesign2546×1766 180 KB

it seems like there’s no way to make multiple panels.

4

Works for me. As I’ve seen multiple different ID attributes, I supplied all of them. Not sure which one is relevant.

	<uxp-panel panelid="panelA" panelId="panelA" id="panelA">

Only the first panel would show by default, the other one opened when I expanded the entry within the plugins panel and hit the sub-item there.

5

Can you see content in both panels? I can open and see both panels, but I can’t get anything to show up in the second panel.

7

Edit: Here a combination of screen shots.
My first attempt had extra values in the manifest, and missed the html.

image
image1283×1127 234 KB

8

Ah, you’ve definitely got further than I have. At a glance, your entrypoints.setup function is slightly different to mine, as are the three alternative ways of referencing the panelid in the html. I’ll see if I can now get a working version here. Thanks

9

OK, following your screenshots, I have a got a working version here.

One thing I have discovered (which tripped me up for a while) is that there are two ways of showing the second panel, one of which works correctly and one of which doesn’t. I have named my test plugin simply “Multipanel”. In InDesign’s Plug-Ins menu, “Multipanel” appears as a menu item with a submenu containing the labels of the two panels (“Primary” and “Secondary”). If I select “Secondary” from that submenu, the panel appears BUT is blank. If, on the other hand, I show the Plugins Panel (from the Plug-Ins menu) and click “Secondary” under “Multipanel” there, the panel shows correctly WITH its content. That looks like a bug to me – surely the two ways of showing a panel should work the same.

Anyway, thanks for the screenshots. I have at least got two panels working now. I’ll have to do some more testing to see how stable or otherwise it is – it feels flakey.

10

I tried this too. In my case, it also depends how the panel is opened the first time after the plugin is loaded. If I open it the first time using the plugin panel, it works. If I open via its MenuAction or the Menu, it will not load. This state will hold even if I close the panel and reopen it in any manner. This effect will also hold if I reload the plugin. It will only be possible to load it correctly after unloading the plugin, and loading it again.

Is there no fix after many months?

11

First time I read about the menu action, I did not even notice that it exists.

Except for writing the minimum example I have not used the multi-panel approach. After writing few single UXP panels I’ve returned to ScriptUI (waiting for Illustrator to come along with UXP, I skipped CEP) and native plug-ins (both AI and ID).

No fixes after many months – hey, ScriptUI has bugs that date back to the move from CS to CC, that would be about a decade. Some others got addressed, though.

If you want UXP issues to get fixed, please file bug reports the way that you as developer would wish them (provide example project, detailed step-by-step instructions). Use all available channels – uservoice (for votes), and developer prerelease (for details) and leave pointers here. While I would agree on Philip’s “feels flaky”, that is nothing that would end up in a PM’s backlog.

12

To avoid the blank panel bug, you can open all panels on plugin load using the PluginManager.

Make sure to add:

"requiredPermissions": {
  "ipc": {
    "enablePluginCommunication": true
  }
}

to your manifest.json, otherwise you’re not allowed to access the plugin manager (there will be no meaningful error, uxp.pluginManager just won’t exist).

You can use a helper function like this to open a panel:

function showPluginPanel(id) {
    const uxp = require("uxp");
    const plugins = Array.from(uxp.pluginManager.plugins);
    const plugin = plugins.find(
      (plugin) => plugin.id === uxp.entrypoints._pluginInfo.id
    );
    console.log("plugin", plugin, "opening panel: ", id);
    if (plugin) {plugin.showPanel(id); }
    else console.error("No plugin found");
  };

(kudos to Bolt UXP)

On plugin load use it like this:

showPluginPanel("panel1-id");
showPluginPanel("panel2-id");
...

where the id is the panel id from the manifest.json.

Opening all panels on plugin load will possibly be a bad user experience, but the main panel will open anyway, and it seems to be the only way to avoid this bug.

–
Edit: I didn’t test this with an exported an installed plugin. There seem to be differences.

13

The workaround I’ve used for the blank panel bug is to remove the plugin’s submenu. The bug happens when opening a panel from the submenu not from the panel. Remove the submenu and the bug can’t be triggered. I wrote about it here (in the other thread about all this): http://forums.creativeclouddeveloper.com/t/uxp-entrypoints-setup-loads-same-panel-always/8026/7

Philip