XML DropDownList Preset demo

Presets management with DropDownList and XML in ExtendScript

Davide Barranca —  — 6 Comments

ScriptUI windows can contain several controls (checkboxes, sliders, etc), and to setup a Preset system is a very handy way to allow users save and retrieve their own preferred configurations easily. In this tutorial I’ll show you how to implement Presets with a DropDownList menu based upon XML data.

XML DropDownList Preset demo

Starting point

I’ve set up a simple demo dialog using a resource string – you can use it either in InDesign or Photoshop for instance: this is the base which I’ll be using throughout the post adding functional bits of code. (I’ve used CoffeeScript, a nice language that compiles to JavaScript, to write the whole script; in this tutorial I’m going to show the JS only, but you can find the entire CoffeScript code at the bottom of the page if you’re curious).

This scheme lets you:

  • Save new custom presets.
  • Delete custom presets.
  • Reset to the default group of presets (which are protected and cannot be deleted).

The presets are stored as XML data in a file (in the example there’s a single value only, but they can be as many as you need)

The default="true" attribute marks this presets as read-only (i.e. the user can’t delete them)

Logic

This is how I’ve decomposed the problem (click to open a bigger version)

Presets Demo Workflow

Building the Presets system

Basically the core is an initialization routine that reads XML data from an XML file (or creates a default one if it’s missing) and fills the DropDownList (DDL from now on) with labels, so let’s start with it.

1. Initialization routine

I’ve set few globals that will be useful for other functions too – the code is commented so it should be quite self-explanatory.

As you’ve seen I’ve mentioned some utility functions like readXML() and writeXML(), alongside createDefaultXML(), here they are:

So far the script detects whether a preset.xml file exists: if it doesn’t, it creates a default one – otherwise it reads it and use it to fill the DDL.

2. Save a new preset

I’ve setup the following onClick() function which makes use of createPresetChild(), another utility that grabs values from the GUI and creates a node from them. Which node, in turn, will be appended to the existing XML data.

Please notice the lack of indexOf in ExtendScript (the used __indexOf is courtesy of CoffeeScript)

 3. Delete preset

That’s pretty straightforward, you just need to check whether the default attribute of the preset is false (which means that the preset is not protected and can be deleted). Again, each preset’s modification needs to write the changes to disk in the presets.xml file and re-initialize the DDL in order to populate the menu properly.

 4. Reset presets

Another easy task, just replace presets.xml with a default one (which is hardcoded inside the script).

 5. Apply preset

The last thing we’ve to add is a handler for the DDL onChange event – that is, the user selects the preset and window controls must be updated with values coming from it.

Completed script

Let’s put everything together! As follows both versions (JS and CoffeeScript). Speaking of the latter, XML management in ExtendScript made me use more than I wanted the backticks (which embed regular JS code), but that’s fine – I’m a big fan of CoffeeScript anyway 🙂

Javascript

 CoffeeScript

Print Friendly
Share

6 responses to Presets management with DropDownList and XML in ExtendScript

  1. Hi Davide,

    Great stuff. Using CoffeeScript for Adobe Scripting looks interesting.

    Loic

    • Thanks Loïc!
      Yes, CoffeeScript is pretty addictive 🙂 I’ve been using either TextMate or Sublime Text to code and compile, pasting the results in ExtendScript ToolKit. Speaking of which, it’s a barely usable piece of software, imho.

  2. Hi,

    This is great tutorial and it helped me a lot for my ongoing scripting project.I learned a lot from this. Thank you so much.

    Only thing went wrong when I use “true” and “false” for default preset confirmation for deleting preset,it actually throw “cant delete , It’s part of the default set of Presets”. as reserve word “true” returns , preset has “default”, not “the preset is default”. It was quickly solved using non reserve word like “yes” and “no”.

    But Thanks a lot for this , I was looking for this for over a month and I could not find this site.

  3. Sorry I was too quick to review. Even using “Yes “and “No”. It does not work ..Now its remove default preset as well. Can you help to solve. I am scripting for AE.

    • That’s been a gross error on my side, I apologize!
      The issue is in the deletePreset.onClick() function, where I cast to boolean the xmlData.preset[win.presetsPanel.presetList.selection.index].@default. First, that piece of data is xml (use typeof to check it), second even if it was a String, !!"false" is true and as a result you can’t delete anything.
      The proper way to write it is to use .toString() and compare it against “true” (as a string). I’ve corrected the code, thank you!

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=""> 

*
*