Flyout Menu Screenshot

HTML Panels Tips: #14 Flyout Menu

Davide Barranca —  — 31 Comments

With Photoshop CC 2014.2 (implementing CEP 5.2) it’s finally possible to have flyout menus in HTML Panels too – as we had back in Flash land. This Tip shows you how to set them and deal with their click handler.

Flyout Menu Screenshot

The full code of this demo extension is available on my GitHub page in the PS Panels Boilerplate project.

Things are pretty simple, though: you first set an XML String which describes the menu:

Remember the \ at the lines’ end to escape the carriage return. Nothing fancy, just MenuItem tags to define the structure. Mind you, nested menus don’t work right now (in Photoshop CC 2014.2.0 – although After Effects and Premiere are OK) but the bug is going to be fixed.

You actually build the menu feeding setPanelFlyoutMenu with the XML string:

An event listener has been added to respond to clicks (the event is ""):

When a click occurs, an event is passed to the callback. It’s data attribute is an object containing both menuId and menuName . The callback in my case is as follows:

The code above:

  • fires a simple alert with the Label when a menu item is clicked;
  • lets you check/uncheck a menu item;
  • toggles the enabled/disabled status of a menu item when you click on a different item.

I haven’t been able to retrieve the enabled/disabled and checked/unchecked menu items status dynamically, so I’ve worked around storing them in vars. Not ideal maybe, but it works

As you see, I’ve used the updatePanelMenuItem function, which is used this way (straight from CSInterface.js sourcecode):

That’s it, hope this helps! The extension is available on GitHub in my PS Panels Boilerplate project.

Print Friendly

31 responses to HTML Panels Tips: #14 Flyout Menu

  1. Anton Lyubushkin October 20, 2014 at 8:46 AM

    Hi Davide.
    Thanks for HTML Panels Tips. It’s cool.

    I have a question: do you know anything about the Drag and Drop in the new CEP 5.2?

    I didn’t find any examples or code on GitHub 🙁

  2. Hello Davide!
    Could you advice some “starting” point (may be books, blogs, etc) for those who want to start coding Panels? I have basic skills in HTML/CSS/JS and ExtendScript (PS, AE) but I have no idea how to set up environment.

  3. Hi Davide-

    Thanks for all your great posts!!

    I’ve read through the CSInterface.js source code and can’t figure out how to generate tool tips. Have you had any luck with these?


  4. Hi,

    Is there a way to detect flyout menu button click before it is displayed. Depending on my current selection, I’d like to determine what my flyout menu shows, that is render it on runtime. This could be done by simply modifying the flyout options by catching every click but I’d like to go for the lazy approach, catch click event and then modify the xml.

  5. While creating html5 extension for illustrator cc Why menu panel button is not visible for panels? Is this feature is available for “Illustrator cc”

  6. I created a sample on my Windows machine. Simple extension, just creating the flyout menu on load. No problems. It worked great.
    I then tried the same sample on my Mac machine.
    No flyout menu, no errors, no exceptions. Can’t figure out what the problem is.
    Tried making a new sample from scratch on the Mac. Same result.
    Any ideas?

  7. I tried modyfing the manifest a bit and tried to run the extension in illustrator, it does not seem to work, the menu button does not appear at all. Can you tell me if illustrator supports fly out menus with html…I know you can make it with flash or c.

  8. Any idea how to add an ellipsis to the end of a menu item?

  9. Hi Davide,
    I have been trying to implement drag and drop of files from extension panel into Photoshop so that a linked smart object gets created (similar to what happens when we drag and drop files from the file system into PS). I am using event.dataTransfer.setData(com.adobe.cep.dnd.file.0, path); method. I am passing the full file path here. This code works with Premiere but nothing happens in PS. Can you please suggest if there is a way to make the drag and drop work ?


  10. You can use these quotes instead slashes in menu XML 🙂

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">