CEP-Resources
CEP-Resources copied to clipboard
Allow custom title on Window.prompt() dialogs
I need to accept some user input in my extension, but have to avoid using the standard prompt() dialog as the current (uncustomizable) title looks a little too unprofessional/unpolished:
Can we please have the ability to customize the title? Or have a more generic one set as the default? Even an empty string would be preferable. Right now it is locked to being JavaScript Prompt - file:///
The ExtendScript's variant of prompt() doesn't look much better:
Using something like a jQuery popup is not preferable because it will be restricted to the panel window. It seems the only other option is to use ScriptUI.
We also faced this "issue" a while ago when ramping up the UI of our panel extension. Our first approach was to actually create another modeless window extension (let's call it DialogWindow), and use CSInterface to trigger the DialogWindow to open, then using CSEvent to send information like the text to display in the dialog, button labels, etc. But this quickly became a problem too, as there was often a long delay between the moment the call to open DialogWindow was dispatched, and the window actually appearing.
We have resorted to using HTML/jQuery based dialogs. Unfortunately yes it does constrain the dialog to within the panel's window boundaries, but you can provide a much richer UI to the user, and the options for interactivity are endless.
Well, I suppose I feel validated in knowing it wasn't just me being too nit-picky... I just think that if we're going to make efforts towards our panels feeling and looking as professional as possible, it's a shame to use prompt dialogs that look like the ones I posted.
I will most likely go the jQuery route as well, though I will mess with ScriptUI to see if I can re-create the look and feel of standard Photoshop dialogs, like this:
You could make your jQuery/HTML-based dialog look very native with some CSS work. Fortunately the UI skin in Adobe applications are quite easy to recreate. Here is what our dialog looks like, skinned to look like the current version of Premiere:
Unfortunately I can't share the CSS we wrote as our panel extension is proprietary software.
Oh absolutely, that looks great. Thank you for the example. If a ScriptUI solution doesn't work out, I'll definitely go that route, that dialog looks much better than the native ones.
My problem is that my panel's minimum width needs to be quite small, so if I do go the jQuery route I'll need to be clever about how to structure the dialog so it can fit within ~240 pixels and still be fully visible without resizing or scrolling.
I used scriptui to build a custom dialog. I wanted this because they wanted to match the dark theme and I also find the windows dialog are broken and look really bad.
I used he website by joonas https://scriptui.joonas.me/
I used a different script which can turn icons into raw code so you can embed them. It's very easy to make this dialog dynamic. I use it for a couple scripts I made but also for some cep panels.
I'll show some screen grabs and code later when I'm on a computer
Here a screen grab and a gif of it in action. This is for a logo Packer panel i made
https://user-images.githubusercontent.com/6923008/206570691-7e01984b-1bee-4c60-b5f3-24927240b780.gif
Ps scriptui does allow for a custom title. If you check the documentation. It does act different on windows vs osx. But both allow for custom title. What I dislike is the icon on windows and gui of the dialog. That's why I made a custom dialog in scriptui