Manifest 5 - 2 panels in same plugin?

Photoshop UXP Plugin API
1

I did read through the documentation on this but I am still confused by it.

I want 2 panels in my plugin. I see how to create the addition panel objects in the manifest Entrypoints array. I did that and have 2 panels. However, the second panel is empty when it opens.

What I don’t understand is where do I link the .html file to the second panel? The HTML file in the manifest is under “main” but that is not inside the entrypoints. So do both panels always share one .html file? If so, I’m confused about what I am suppose to do to differentiate what part of the html goes into each panel. Is this done through JS and CSS to hide/show html elements or something along those lines?

I’m using vanilla JS.

2

I could develop two panels on Photoshop UXP with Vanilla JS.
like the link below

but as a conclusion, I couldn’t find any
way to load two HTML files.
therefore I added through js like appendChild method or something.
and keeping empty inside of body element on HTML.
but it’s so inconvenient.

I don’t know if there is any better way to make.

panels
panels1012×736 14.5 KB

1 Like
3

Thanks you very much for that! I will look into it tomorrow morning.

I figured it had to be something like that to do it.

I would be really nice if each panel could just be assigned it’s own html file. That would make it easy.

4

You can also use the <uxp-panel panelid="xyz"> element in your HTML file (not quite “assigning its own HTML file”, but with the same effect) to achieve this without JS:

<!-- […] -->
<body>
<uxp-panel panelid="firstPanel">
Hello Panel 1
</uxp-panel>
<uxp-panel panelid="secondPanel">
Hello Panel 2
</uxp-panel>
</body>

And register both entrypoints (with matching IDs) as entrypoints in your manifest.json:

{
  ...,
  "entrypoints": [
    { "type": "panel", "id": "firstPanel", ... },
    { "type": "panel", "id": "secondPanel", ... }
  ]
}

Credit for discovering / telling me about this goes to @Jarda :slightly_smiling_face:

5 Likes
5

this is easier than I suggested. I’m gonna try it later.

2 Likes
6

Thanks! That works perfectly.

I didn’t know about the uxp-panel tag. I had actually already tried that exact thing with div tags using the ID, but that didn’t work.

I’m not sure if this info is in the documentation anywhere. I couldn’t find it if it was. It really should be added to the docs if it isn’t already there.

1 Like
7

Thanks for your help with this. The uxp-panel tag options works. Not sure if this is in the docs because I never found anything about it. So without knowing about the tag, it would be impossible to figure out.

2 Likes
8

Tagging @pkrishna – this might be a good guide/recipe, or maybe a part of the tutorials :stuck_out_tongue_winking_eye: …

I just researched it and the only two places that mention the <uxp-panel> element (based on a Google search) are another thread in this forum and @Jarda 's Alchemist plugin source code…

1 Like