Create Action Chains in Design Mode

When you use the Actions palette, Properties pane, and Structure pane in Design mode, VB Studio writes the corresponding JavaScript behind the scenes. You can edit this code directly at any time by switching to Code mode, which opens a code editor.

Description of the illustration jsac-action-chain-editor-overview.jpg

Right-click an action to display a context menu with the following options:

• Go to Code: Go to the action's code in the code editor.
• Surround with If: Surround the action with an If action.
• Surround with Try-Catch: Surround the action with a Try-Catch action.
• Delete: Delete the action.

Here are some helpful tips for working with action chains:

• When you add a local function, the function and its actions are added to the Structure pane for quick navigation; the function’s properties appear in the Properties pane; and the local function is added to the Actions palette, under a newly created Local Functions category:
  
  
  Description of the illustration jsac-local-functions-example.png
  
  
• To convert a local function to an action chain so that it can be used by other action chains, right-click the local function and select Convert Function to Chain:
  
  
  Description of the illustration jsac-local-function-chain.png
  
  

  The local function, as well as any local functions it uses, is converted to an action chain:
  
  Description of the illustration jsac-local-function-chain2.png
  

  In the original action chain, the Call Function action that called the local function is converted to a Call Action Chain action that calls the new action chain:
  
  Description of the illustration jsac-local-function-chain3.png
  

• You can also create a local function from an action on the canvas. Just drag an action from the canvas onto the Create Function button that appears on the bottom right of the canvas, or onto the green line that appears before or after a local function. In this example, we create a local function by dragging a For Each action onto the Create Function button:
  
  
  Description of the illustration jsac-canvas-action-function.png
  
  In the run() entry point function, the For Each action was replaced with a Call Function action that calls the new local function:
  
  
  Description of the illustration jsac-canvas-action-function2.png
  
  
• To visually simplify large action chains, you can fold the code blocks for If, Switch, Run in Parallel, and For Each actions. To do so, hover over the canvas's left margin and click the down arrows for the blocks of code to fold. To unfold a block, click the corresponding right arrow or ellipses on the action card:
  
  
  Description of the illustration jsac-foldable-code.png
  
  

  You can further visually simplify an action chain by hovering over the canvas's upper-left corner and clicking the Summary button that appears. The Summary button hides the input parameter details for each action, except the Assign Variable and Reset Variables actions. The Full button switches back to displaying them:
  
  Description of the illustration jsac-summary-full-buttons.png
  

• If you prefer to construct your action chain using code, click the Code button at the top-right of the screen to open a code editor. Typically, one uses Design mode to visually add and configure an action, then switches back to Code mode to work directly with the code, as needed.