Start an Action Chain

You set up an action chain to be triggered when an event occurs in an artifact. The type of event available depends on the artifact. For example, you can trigger an action chain to start when a lifecycle event such as vbEnter is fired to load a page. Or, use the onValueChanged variable event when a variable's value changes. You can also use custom events to start an action chain from another action chain.

Note:

By default, when you create a new action chain for an event listener, component, or variable, it will be a JavaScript action chain. If you want a JSON action chain instead, see JavaScript and JSON Action Chains within Work With JavaScript Action Chains for instructions on how to disable JavaScript action chains.

Start an Action Chain From a Component

When you add a component to a page or layout, you'll need to create a component event and component event listener if you want it to trigger some behavior (for example, to open a URL). The suggested option in the component's Properties pane creates these for you.

There are various predefined events that you can apply to a component, and the events available are usually determined by the component. For example, the ojAction event is triggered when a button is clicked, so you would typically apply it to a button component (you couldn't apply it to a text field component). Each button will have a unique event and an event listener listening for the button's ojAction event, and the listener would start an action chain (or multiple action chains) when the event occurs. Each component event will usually have a corresponding component event listener.

Note:

You can add an event to a component only from the component's Properties pane. You can't create one in the Events tab of pages.

To start an action with a component:

1. Select the component in a page or layout.

   Typically, you assign events to elements such as buttons, menus, and fields in form components. You can select the component on the canvas, in the Structure view, or in Code view.

   
   

   
   Description of the illustration event-listener-component-appui.png

   
   
2. In the component's Events tab in the Properties pane, click + Event Listener. You can choose the suggested event as a quick start or you can create a custom event to use a different event.

   When you add the new event using the quick start, an action chain is created for you and the Action Chain editor opens automatically. When you add the new event using the custom option, you'll need to select an event.

3. For a custom event, select the event you want to use to trigger an action chain. Click Select.
   
   
   Description of the illustration page-designer-inspector-selectevent.png
   
4. Select the action chain you want the event to trigger and click Select Action Chain. Alternatively, click New Action Chain to create a new action chain.
   
   
   Description of the illustration page-designer-inspector-selectchain.png
   

The Events tab in the Properties pane shows events on the component that VB Studio responds to by triggering action chains. You can edit the properties, for example, to add input parameters that you want to use in the action chain. Input parameters can provide values from the component and its page to the action chain, which the action chain can then use to determine its behavior. For example, a table selection event could supply details of which row was selected to its action chain.

Description of the illustration event-listener-component-edit.png

If you used the quick start option to add an event, a component event listener is created for the new event, and the listener is mapped to the action chain it created for you. If you open the Event Listeners tab, you'll see it listed under Component Event Listeners, along with the action chain that it will trigger.

Description of the illustration event-listener-component-qs.png

Start an Action Chain When a Variable Changes

You can start an action chain when the value stored in a variable changes by adding an onValueChanged event to the variable.

When you use an onValueChanged event to trigger an action chain, the trigger has the payload of the variable's old and new values. For example, let's say you changed the name property of an Employee and then reset the Employee; the framework will send an event that the Employee changed, and as part of the payload indicate that the name has changed.

To start an action chain when the value of a variable changes:

1. Open the Variables tab of an artifact.
2. Select the variable in the list, then open the Events tab in the Properties pane.
3. Click + Event Listener in the Events tab.
4. Select an action chain from the list. Click Select.

   When you add the event to the variable, a variable event listener that listens for the onValueChanged event on the variable is automatically created. The variable's Events tab in the Properties pane displays the action chain the event listener will trigger; you can change or remove the action chain, assign input parameters, and add more action chains.
   
   Description of the illustration event-listener-variable-appui.png
   

   Note:

   Variable events and event listeners are not listed in an artifact's Events or Event Listeners tabs.

Start an Action Chain By Firing a Custom Event

You can start an action from another action chain using a custom event, which is triggered by the Fire Event action in an action chain. Typically, you use a custom event when you want to trigger a notification, like displaying a pop-up window with a message, or perhaps to transform some data. After creating a custom event, you need to create an event listener for it to start the action chain.

Each custom event has a Behavior property, which you can use to set whether action chains run serially or in parallel. The default behavior is "Notify", which allows the action chains to run in parallel. For more about setting an event's Behavior property, see Choose How Custom Events Call Event Listeners.

To start an action chain with a custom event:

1. Open the Actions tab for a page, flow, or App UI.
2. Select the action chain you want to edit. The action chain opens in the Action Chain editor. If you want to create a new action chain, click + Action Chain.
3. In the Action chain editor, drag the Fire Event action from the palette and drop it in the action chain where you want the event to occur.
4. In the Fire Event action's Properties pane, specify the Event Name.

   If you are using the Fire Event action to trigger a new custom event, click Create, enter an Event ID, and specify the event's scope. If you want to trigger a custom event that already exists, you can select it in the drop-down list.
   
   Description of the illustration fire-event.png
   

   After creating or selecting the event, you can click Go to Custom Event in the Properties pane if you want to edit the event's Behavior or Payload properties in the Events editor.

5. Create an event listener for your event:
   1. Open the Event Listeners tab and click + Event Listener to open the Create Event Listener wizard.
   2. Select the custom event you added to your action chain. Click Next.
   3. Select the action chain you want the event to trigger. Click Finish.

   Tip:

   If you're on the Events tab, simply right-click your custom event and click Create Event Listener to create an event listener, called (eventId)Listener, in the same scope as the event.

Start an Action Chain From a Lifecycle Event

Lifecycle events are predefined events that occur during a page's lifecycle. You can start action chains when these events occur by creating event listeners for them. For example, if you want to initialize some component variables when the page opens, you can create an event listener in your artifact that listens for the vbEnter event. You could then set the event listener to trigger an action chain that assigns values to the component's variables.

Before you create an event listener to trigger an action chain, it's important to understand a page's lifecycle, so you know where to plug in custom code to augment the page's lifecycle. Each page in your App UI has a defined lifecycle, which is simply a series of processing steps. These might involve initializing the page, initializing variables and types, rendering components, and so on.

Each stage of the lifecycle has events associated with it. You can "listen" for these events and start action chains whenever they occur to perform something based on your requirements. For example, to load data before a page loads, you can use the vbEnter event and start an action chain that calls a GET REST endpoint.

Keep in mind that one or more pages make a flow and each flow has its own lifecycle.

This table describes the lifecycle events you can use to start action chains:

Lifecycle Event	Description
vbBeforeEnter	Triggered before navigating to a page. Commonly used when a user does not have permission to access a page and to redirect the user to another page (for example, a login screen). Because this event is dispatched to a page before navigating to it, you can cancel navigation by returning an object with the property cancelled set to true ( { cancelled: true }). For this event, you can use these variable scopes to get data: $application: All App UI variables can be used in the event's action chain $flow: All parent flow variables can be used in the event's action chain $parameters: All page input parameters from the URL can be used in the event's action chain
vbEnter	Triggered after container-scoped variables have been added and initialized with their default values, values from URL parameters, or persisted values, and is dispatched to all flows and pages in the current container hierarchy and the App UI. Commonly used to fetch data. For this event, you can use these variable scopes to get data: $application: All App UI variables can be used in the event's action chain $flow: All parent flow variables can be used in the event's action chain $page: All page variables can be used in the event's action chain
vbBeforeExit	Triggered on all pages in the hierarchy before navigating away from a page. Commonly used to warn if a page has to be saved before the user leaves it, or to cancel navigation to a page (say, because a user doesn't have permissions to view that page) by returning an object with the property { cancelled: true }.
vbExit	Triggered when navigating away from the page and is dispatched to all flows and pages in the current container hierarchy being exited from. Commonly used to perform cleanup before leaving a page, for example, to delete details of a user's session after logout.
vbAfterNavigate	Triggered after navigation to the page is complete and is dispatched to all pages and flows in the hierarchy and the App UI. The event's payload ($event) is an object with the following properties: currentPage <String>: Path of the current page previousPage <String>: Path of the previous page currentPageParams <Object>: Current page parameters previousPageParams <Object>: Previous page parameters

To start an action from a lifecycle event:

1. Open the Event Listeners tab for the page containing the event you want to trigger an action chain for.
2. Click + Event Listener.
3. In the Create Event Listener wizard, expand the Lifecycle Events category and select the event you want to trigger an action chain for. Click Next.
   
   

   
   Description of the illustration page-designer-events-select-appui.png

   
   
4. Select the action chain you want to trigger. You can select any action chain that is scoped for the artifact. For example, if you are creating an event for a flow artifact, you can only call action chains defined in the flow or in the App UI.

   If you want to create a new action chain now, you can click and enter an ID for the new action chain, which you can edit later in the editor. Click Finish.

   
   

   
   Description of the illustration page-designer-settings-selectaction-appui.png

   
   

After you create an event listener, you can click Add Action Chain for the lifecycle event if you want it to start additional action chains.