9 Work with JavaScript Action Chains

A JavaScript action chain is a sequence of actions started by an event. When a given event occurs in a page, the event listener listening for that event kicks off the action chain.

You implement action chains using either the visual Action Chain editor or through code, using JavaScript. Here's an example of an action chain built with the Action Chain editor. The action chain first calls a REST endpoint to get a full set of songs, then checks to see if any errors occurred. As long as things remain error-free, the action chain loops through the songs and adds those with a "Classic" subgenre and a tempo of 76 to 108 beats per minute to an array. The array is then returned:
Description of jsac-action-chain-example-songs.png follows
Description of the illustration jsac-action-chain-example-songs.png

Here's the same action chain in the code editor:
Description of jsac-action-chain-example-code-songs.png follows
Description of the illustration jsac-action-chain-example-code-songs.png

You can also debug JavaScript action chains using your browser's Developer tools:
Description of jsac-debug-action-chain.jpg follows
Description of the illustration jsac-debug-action-chain.jpg

JavaScript and JSON Action Chains

When you create a new action chain for an event listener, component, or variable, by default it's a JavaScript action chain. When creating one on the Actions Chains tab, you're given a choose between a new JavaScript or JSON action chain, with JavaScript being the default:
Description of jsac-create-new-chain-dialogue.png follows
Description of the illustration jsac-create-new-chain-dialogue.png

We recommend that you use JavaScript action chains (rather than JSON), as they provide a number of benefits, including:
  • The JavaScript Action Chain visual editor offers a helpful Structure pane.
  • The JavaScript code editor has an Actions palette, Structure pane, and Properties pane to facilitate visual development.
  • Debugging is easier, since you can use your browser's Developer tools.
  • JavaScript code is easier to manage through Git operations, such as merge.

You can call a JSON action chain from a JavaScript action chain using the Call Action Chain action; however, you can't call a JavaScript action chain from a JSON action chain.