Uxp menu items and entrypoints

Photoshop UXP Plugin API
,
1

hi. Am asking this from a uxp beginners perspective but I have proper understanding of javascript. well I’ve gone through the docs and there are some parts that have not been totally clear to and those are the parts am asking to get clarified.

  1. first when you initialize a new plugin from from the Adobe UXP developer tool and you choose the ps-starter option, after the plugin is prepared and you start it. which part of the code contains the 'fly out menu" found on top left with three hamburgers that contains the “close” and “close tab group” options. I would love to add more items there but can’t figure out which code connects.

  2. on the manifest.json file there are entrypoints array of objects with each object it’s respective values. In each object there is a “type panel or type command” . What is the difference between the two of these. Well an inclined to think that panel is the metadata for the overall panel but what about the “command” ?

  3. when you create a new react plugin from the uxp developer tool, what exactly is the function of the controllers file that comes with it. on top of that, where is the flyout menu . i need to add some few info

2

I only have access to my phone at the moment and so can’t pull any of my code for you right now, but IIRC the Kitchen Sink demo has an example of adding to the flyout menu. It’s been a while since I checked and you might need to switch to a different branch than main (if memory serves correct “v5” or something like that).
Essentially you need to add an entrypoints field to your manifest that’s an array of entrypoint Objects:

"entrypoints": [
        { 
       "type": "command", 
       "id": "loadHelpDoc", 
       "label": "Help" 
     },
]

And in your main JS:

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

entrypoints.setup({ 
   commands: { 
     loadHelpDoc: async () => { 
     // Calling a function to trigger from flyout 
     loadHelpDoc(); 
     },
})

Apologies if I’ve made a pig’s ear of this; I’ve had a few beers :beer:

1 Like
3

Command vs panel - I might be missing further uses but at very least command is equivalent to a flyout menu option and panel is equivalent to an individual UI tab/panel/palette. A single plugin can render multiple panels.
As before, panels need entrypoint references in the manifest and in the main JS.

I can provide clearer examples in a couple of days when I’m back at my PC.

1 Like
4

I’m a bit too lazy to create a new plugin now, but… :slight_smile:

In UI Kitchen Sink plugin it’s this part

What Timothy explained above. You basically can assign any function to execute with a command. Command appears in the same Plugins menu and when clicked it will execute a function instead of opening a panel

Don’t know the structure of plugin when created with Dev Tools, but in samples all panels and commands config is done in index.js. There you will also notice the controller calls, which return configs for commands and panels based on provided a bit more simpler configs. For a newcomer this might be a bit of an overkill and maybe difficult to understand, but it’s pretty simple when it clicks :slight_smile:

1 Like
5

@Karmalakas thanks for tagging in with that React knowledge!

6

okay . I’ll appreciate