How can I create the resource string without a big string?

Question

In After Effects scripts, if you want your script to be able to be docked in the program's workspace, the only way to do it as far as I know is to use a resource string like this:

var res = "Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    group1: Group{orientation:'column', alignment:['fill', ''], alignChildren:['fill', ''],\
        button1: Button{text: 'Button'},\
    },\
}";
                
myPanel.grp = myPanel.add(res);

The above code creates a script UI with one button ("button1") inside a group ("group1").

I would like to know other ways to create the same resource string. Is it possible to make it using a JSON object and then stringifying it??

I know it can be done somehow, because I have inspected the Duik Bassel script that is dockable and, for example, adds elements like this:

var button1 = myPal.add( 'button' );

but I cannot understand how to do it myself.

TL;DR: I want to make a dockable scriptUI without writing a giant string all at once, but bit by bit, like a floating script.

Answer 1

UI container elements have an add() method which allows you to add other UI elements to them, and you can treat them as normal objects.

var grp = myPanel.add("group");
grp.orientation = "column";
grp.alignment = ['fill', 'fill'];
grp.alignChildren = ['fill', 'fill'];

var group1 = grp.add("group");
…
var button1 = group1.add("button");
button1.text = 'Button'

More details and examples here: https://extendscript.docsforadobe.dev/user-interface-tools/types-of-controls.html#containers

Also worth checking out https://scriptui.joonas.me/ which is a visual scriptUI interface builder. You have to do some work on the code it produces to get panels for AE, but it's not hard.

Answer 2

extendscript still uses a 20th century version of javaScript, which doesn't have JSON built-in, but I have successfully used a JSON polyfill with it.

I used json2.js to get structured data in and out of Illustrator, and it worked beautifully, but I can see there's now a json3.js which might be better for whatever reason. This stackoverflow question addresses the differences.

To load another .js file (such as a polyfill) into your script, you need to do something like

var scriptsFolder = (new File($.fileName)).parent; //  hacky but effective
$.evalFile(scriptsFolder + "/lib/json2.js"); // load JSON polyfill

These file locations may differ in other Adobe apps. Not sure what it would be in AfterEffects. I seem to remember that InDesign has a different location for scripts. You can also hardcode the path, of course.

Good luck!