13 Trigger Actions in Dynamic Components

To create a causal relationship in your dynamic components—for example, to add a button that opens a link—you define 1) what you want to happen, and 2) under what circumstances. In other words, you must define three things:

  • an action chain, composed of a sequence of actions used to define behavior. In the button example, an action chain opens the link.
  • events, which define when an action chain starts. In the button example, the button-click is the event.
  • event listeners, which start an action chain when the event occurs.

When working with dynamic components, where and how you create the action chains, events, and event listeners depends upon the type of component:

  • For dynamic tables and forms, you define the functionality in the Layout.
  • For dynamic containers, you define the functionality in the page containing the container.

You can't edit action chains, events, or event listeners defined in a dependency, but you can use them in your extension if the App UI developer has made them extendable. For example, if a dependent App UI adds a "click" component event to a button and makes the event "listenable" for extensions, you could create a listener in your extension that listens for it. This would allow you to use the event to trigger your own action chain, even though you can't configure the component itself.

VB Studio provides tabs with editors for creating the various elements you'll need to add action chains and events to your dynamic component. Here's what each of the editors do:

Editor Description
Actions Create and edit action chains describing the behavior of components.
Event Listeners Create and edit event listeners that start your action chains.
Events Create and edit custom events used in action chains.
Types Create and edit variable types.
Variables Create and edit variables and constants.
JavaScript A JavaScript editor.
JSON Edit the JSON metadata files.

An editor only has access to elements in its own scope. So if you're configuring a page, you'd use the page's Variables editor to edit extendable variables used in the page, but if you're configuring a dynamic form you'd need to use the Layout's Variables editor to edit the extendable variables used in the form.

In the Action Chains editor, each action chain also contains a Variables tab for adding and editing the action chain's variables. For details on the Action Chains editor and how to create action chains, see Create an Action Chain and Test Action Chains.