Skip to content

Actions JavaScript

Initially, Actions may seem daunting. Therefore, take a look at this example first to get started.

Once you start feeling comfortable, here is some more detailed information.

Base for the JavaScript editor

GraFx Actions are a full implementation of the ES2020 Standard.

Additionally, we have created an implementation to expose the Studio object (with the document, frames, etc.) and added functions specific to GraFx Studio.

Base object & Autocompletion

In addition to all the basic JavaScript functionality, CHILI GraFx has added the "studio" object.

Studio

Start your action with the studio object.

Add a dot "." and the JavaScript editor (Monaco) will suggest objects that fit within the scope of what you are doing.

In this case, it will suggest using one of the available objects in the document.

Autocomplete after typing studio., with frames highlighted at the top of the object list

By hitting the "tab" key, the editor will autocomplete with the selected suggestion.

Add another dot and the next suggestion will appear.

You will see the properties you can set or the functions you can call for this object.

Autocomplete after studio.frames., listing all, assignVariable, byName through to setY

Functions will need parentheses () and once you start with the opening parenthesis (, you will see the next suggestion.

The popup will show what the function expects. In this case, a name (of the frame) and a number for the X position of that frame.

The signature popup for setX in the Create action dialog, naming the frame and the X position

Provide the necessary information.

A single completed line of code: studio.frames.setX("bottle", 120)

Continue to add logic around your statement.

Tip

If you're not comfortable with JavaScript, the W3Schools website is a great place to start.

You'll find information on using Variables, how to work with Operators, If-then-else statements, Loops, and many more topics to get you started.

The setX call wrapped in an if statement that tests the variable reduction against promo

You can add "console.log" statements to show debug information in the browser console.

The browser DevTools Console printing "Seems like it's a promo" from the console.log statement

Security

GraFx Actions run inside a contained environment. They have their own runtime and can run on the client or server-side.

Indefinite loops and concepts that could prevent the system from responding will timeout after 10 seconds.

Circular references, where one trigger triggers another in a back-and-forth manner, will be detected and stopped.

Functions

GraFx Studio Actions are part of the GraFx Studio Open-source SDK.

The Actions can be found here and will be documented later.