Create an Action Chain

Create action chains by assembling several, individual actions into a sequence in the Action Chains editor. The Actions palette contains a list of built-in actions that you can drag on to the canvas to create your sequence.

To create an action chain:

  1. Open the Actions tab, for example, at the page level.

    The Actions tab displays a list of the page’s action chains, or a message if no action chains are defined.
    Description of action-chain-editor-nochains.png follows
    Description of the illustration action-chain-editor-nochains.png

  2. Click + Action Chain.
  3. Enter a name for the action chain in the ID field and, optionally, a description. Click Create.

    The new action chain opens in the editor:
    Description of action-chain-editor-canvas-blank.png follows
    Description of the illustration action-chain-editor-canvas-blank.png

    The editor contains the palette of built-in actions (grouped by type), a canvas, and a Properties pane. The Start icon in the canvas area indicates the starting point for your action chain; the Add icon ( Add icon ) is a placeholder where you add an action to the chain. The Properties pane shows the properties of what's selected on the canvas.

    If you prefer to wire up your action chain manually, you can use Code view to directly edit the action chain's source code. For supported syntax, see Actions and Action Chains in the Oracle Visual Builder Studio Page Model Reference.

    Tip:

    It's possible to declare local variables that are only available within the scope of your action chain. To do this, click the Variables tab in the Action Chains editor and create your variable. These variables are internal to the action chain and can be used internally by actions in the chain. You can also pass them as input parameters to the action chain.
  4. From the actions palette, drag an action and drop it on the Add icon ( Add icon ). You can also click the Add icon ( Add icon ) in the chain and select an action in the pop-up menu.

    Description of action-chain-editor-popupmenu.png follows
    Description of the illustration action-chain-editor-popupmenu.png

    The new action is added to the chain and is selected by default. The Properties pane displays the properties that you can specify for the action. For example, here's what the editor looks like when you add the Call Function action in the Design view:
    Description of action-chain-editor-canvas.png follows
    Description of the illustration action-chain-editor-canvas.png

    The action is usually flagged with a warning icon when a required field isn't set (in this case, because a JavaScript function hasn't been selected yet). Specify the action's properties as required in the Properties pane. For details specific to an action, see Built-in Actions.

  5. To create a fork in your action chain, drag the action from the palette and drop it on the Add icon next to the action where you want the chain to fork. The Add icon appears next to each action in the chain when you drag an action from the palette.
  6. Repeat step 4 (and optionally step 5) until your action chain is complete. The action chain is saved automatically.

    Description of action-chain-editor-finished.png follows
    Description of the illustration action-chain-editor-finished.png

    If you want to remove an action from the chain, select the action on the canvas, right-click, and select Delete ( Delete icon ). You can also click Delete in the Properties pane's options menu.

    Tip:

    When your action chain includes a large number of actions, you can use search to quickly find what you're looking for. In the Search text box, enter any text—variable name, endpoint ID, or even an action ID from the console log. All actions that match the text you enter will be highlighted, along with navigation arrows that you can use to jump from one highlighted action to the next.

    Here's an example of using "etag" to find the expenseReportEtag variable:
    Description of action-chain-editor-canvas-search.png follows
    Description of the illustration action-chain-editor-canvas-search.png

    You can also click the Show Overview icon (Show Overview icon) to view a visual representation of the action chain's flow. In combination with search, the overview diagram can help you know where the highlighted action is within the overall flow. Toggle the Show/Hide Overview icon icon to show or hide the diagram as required.

You can open your action chain at any time from the Actions tab and edit it as necessary. When your action chain is complete, you can call it in response to a component event, a lifecycle event, or from another action chain. You can also trigger it when a variable changes.

If you want to view usage details for your action chain (for example, to see which pages use the action chain), look under Usages in the action chain's Properties pane. Click a usage to readily navigate there. The event listener tied to the event that calls the action chain is also listed, as shown here:
Properties pane for an Action Chain

An action chain's source code is stored in its own JSON file. This helps to optimize performance by reducing the size of the artifact JSON and to reduce the potential for merge conflicts when multiple action chains are edited. To view and edit an action chain's JSON file, it's simplest to use the Code editor in the Diagram view, though you can always view files using the Navigator's Source view. For action chains in applications, flows, and layouts, look in the artifact's chains folder. For action chains in pages, look in the pagename-page-chains folder under pages that's at the same level as the page JSON file:
Description of action-chains-json-source-view.png follows
Description of the illustration action-chains-json-source-view.png

If you create tests for your action chain, those will be stored in another JSON file, distinct from the action chain's file.