Skip to content
A web app for designing and building Adobe ScriptUI javascript dialogs (Illustrator, Indesign, Photoshop, After Effects, Bridge). Design your dialog using a graphical interface and export as .jsx
JavaScript HTML CSS Other
Branch: master
Clone or download
joonaspaakko Fixed “copy to clipboard button” - Fixes #55
- [x] Fixed “copy to clipboard button” - Fixes #55
	- I’m still not sure why this issue exists in the first place, but it seems that when CodeMirror is present and there’s a lot of code involved, the clipboard copy fails occasionally. Not when there’s not a whole lot of code though. I ended up solving it by closing the modal window where CodeMirror sits and open it back up after the copy is complete. (FYI; the CEP export for the sample panel amounts to about 278k characters)
	- Ended up trying bunch of stuff and while this didn’t solve the issue or change much of anything, I ended up removing Clipboard.js
- [x] Added a spinner for clipboard copy so the user knows it’s doing something.
- [x] Removed `soft wrap` from all the `statictext` items from the Sample Panel.
- [x] Added some tooltip text to the CSS & JS toggle in the export settings. Just to make sure users know it is needed, even thought you can omit it.
- [x] CSS & JS is now fetched on page load, instead on every export, if required.
Latest commit 312489c Jul 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Fixed “copy to clipboard button” - Fixes #55 Jul 31, 2019
source Fixed “copy to clipboard button” - Fixes #55 Jul 31, 2019
.atomignore Snapshots + Custom variables Feb 12, 2019
.gitignore Fixes #9 Nov 23, 2018
README.md
config.codekit3 Fixed “copy to clipboard button” - Fixes #55 Jul 31, 2019

README.md

Website (web app)

scriptui.joonas.me

Offline use

This repository includes a build folder that contains the same files as the website. So if the URL doesn't work for some reason, you should be able to download the repo and use it locally (offline). Everything it needs to run is in the build folder. Just open the build\index.html in Chrome.

Desktop applications

Read more...

The desktop applications are only trying to fill a small slot of convenience, but they're not necessary. The desktop apps don't work offline though since they are only loading up the website.

These were created using Web2Desk. They don’t seem to mention it anywhere as far as I know, but I believe Web2Desk uses Electron to create the desktop app that simply displays the chosen website (https://scriptui.joonas.me) using Chromium.

Download desktop applications.

The download folder also now includes a Chrome App. The great thing about it is that you can sync it to other computers. The downside is that it's tied to Chrome.

Desktop app pros

  • If you’re knee deep in the Windows ecosystem and a devout user of Internet Explorer (or any browser that is not Chrome), this desktop application has got your back since it uses Chromium to display the website.
  • You don't have to worry about losing progress if you wipe your browser's browsing history. Although it may be good to know the app does allow you to do that too if the need arises.
  • You get an Icon in your desktop you can use to launch the web app
  • You get to use the web app in its own window

Desktop app cons

  • Can't be used offline
  • There is a tiny hiccup on Windows. In Windows, the Alt key shows the top menu... and especially if you're duplicating items, the structure panel may shift vertically causing you to drop the item in the wrong place.
  • For some reason, the icons look kinda terrible, but since these apps are generated using a 3rd party tool, there's nothing to be done about it.

SDB Layout PSD files

Maybe there's not a whole lot of need for this, but figured I might as well share it. It could be helpful if you wanna suggest a new feature or something. Font files included in the download folder.

Dropbox download link: ScriptUI Dialog Builder PSD files

This was generated using Page Layers. I did clean it up a bit but some of the layer structure may be unnecessarily complicated because it follows the html structure. Because it's essentially a fancy layered screenshot, it doesn't include anything but the visible elements. So no modal windows.

General info about ScriptUI Dialog Builder (SDB)

SDB helps you design and build ScriptUI dialogs without writing code. It auto-generates ready to be used Javascript on export. It doesn't handle events. You'll need to write events yourself.

Because the builder simply simulates ScriptUI layout and behavior, there are various differences here and there. One major factor is that there are small differences between Adobe applications so be aware that the dialog preview may look completely different depending on the application you're using. As an example, a really easy to spot difference is that tabs look completely different in Photoshop they do in other applications. Illustrator CC will be closest since SDB was built using it as the template.

There's a one kinda big feature that I had to leave out (for now) because I just couldn't replicate the behavior. I got pretty close, but I wasn't satisfied with it. ScriptUI items can actually have "fill" on both x and y axis, but in the builder, it's limited to one axis.

Dialog data is saved locally by your browser (local storage). So if you refresh the page or come back later with the same browser, your dialog should still be there, as long as nothing goes wrong in the reconstruction of the dialog. There's always the off chance that an error of some kind wipes it clean. If you’re browsing in incognito mode, your browser will forget this data as soon as you close the tab or window. Each code export also includes importable JSON at the top of the code, which means you can continue working on a dialog on another computer as long as you store the importable JSON somewhere. I've been just leaving it in my scripts. Though if you're using images you might not want to do that since it could make the script size incredibly large (for a script anyway). Here's an example of one of my scripts where I left the import JSON in place.

Usage

A good rule of thumb is to use width and height sparingly. Sometimes Align children: Fill or Alignment: Fill can be used to get the desired result without setting a static width. You can easily make the dialog hard to work with if you have to keep adjusting the width and/or height values every time you add new items or make other changes that would affect the size.

For example, the sample dialog only uses width and height for various EditText fields to basically leave room for characters and the 4 panels so that they have equal height.

Browser support

Chrome. The development has shifted focus to Chrome so you probably shouldn't push your luck with Firefox either. No mobile support. Try the desktop app if you don't like to use Chrome.

Source folder

The source folder contains the development files, which are stitched together using Codekit. Codekit does have nifty features like compressing images and stuff, but the major thing is that it's used in order to stitch together various HTML, CSS and Javascript files... just because it's convenient.

I wouldn't expect anyone to contribute to the code because it's just a big mess. It's all pretty much just prototypes held together by duct tape (So Codekit probably won't be an issue). I may consider hopping off of Codekit in the future...

Dialog examples (JSX+JSON)

  1. Export Layers Inside Selected Group Dialog (Gist) - (Comparison image - Illustrator CC 2019 ).
  2. Import Multiple PDF pages (Gist) - (Comparison image below ↓).

Comparison between ScriptUI Dialog Builder and Indesign

I recreated the dialog of an Indesign script called Multi Page Importer (download link) in the builder, exported the code and ran it in Indesign CC 2019.

(Click to enlarge) Comparison between ScriptUI Dialog Builder and Indesign CC 2019

You can’t perform that action at this time.