Dropbox Paper

GUI using website https://scriptui.joonas.me/

Remember when you decided to make a script but then you had to create the User Interface and that was tedious and you decided to post-pone it? Again?

Well, no more! In today's article I’m gonna teach you how to rapidly create a dockable Graphic User Interface(we will call this GUI from now on) in 10 minutes or less.

First things first. You should go to https://scriptui.joonas.me and check that amazing tool. It is a website in which you can create a GUI with drag and drop and it will give you a piece of code at the end that can be used to create your window. If you don’t plan to make your script dockable, you are done here. But hey, only rookies make that, and you’re not a rookie, right? So play a bit with the controls to see how they work and then I’ll see you here.

So let’s proceed.

I have created this piece of code that, in junction with the one given by Joonas’s website, will make a dockable panel out of your window. Now, let’s see how we use it.

First, create a jsx file in your preferred text editor.

Then, paste this text inside:

(function (thisObj){

function buildUI(thisObj){

        var dialog =  /* use your variable name here */  = (thisObj instanceof Panel) ? thisObj : /*paste the window declaration here*/

//Paste code here

//===============

dialog.onResizing = dialog.onResize = function () {this.layout.resize();}

return dialog;

}

var myWindow = buildUI(thisObj);

if ((myWindow != null) && (myWindow instanceof Window)){

myWindow.center();

myWindow.show();

}else if ((myWindow != null) && (myWindow instanceof Panel)) {

myWindow.layout.layout(true);

myWindow.layout.resize();

}

})(this);

Now go back to https://scriptui.joonas.me to take the part that desccribes your window. Here is how you do that:

After you’ve finished creating the GUI the way you like it, click export.

In the new window click settings and turn everything off. There is one exception here. If you think you will ever plan to modify this window in the future using the same website, turn on “Import JSON” option. This will create a comented part at the begginging of your code that can later be used to recreate this GUI by using the import feature.

Select all the text and hit ctrl+C to copy it or just click the blue “Copy to Clopboard” icon.

I used a simple example with a Static Text and two radio buttons grouped in a Group object. Here is the code from Joonas’s website, for my particular case:

// WIN

// ===

var win = new Window("window", undefined, undefined, {resizeable: true});

win.text = "My Script";

win.orientation = "column";

win.alignChildren = ["center","top"];

win.spacing = 10;