1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work With JSON Action Chains
  4. Start an Action Chain
  5. Start an Action Chain From a Component

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 event-listener-component.png follows
    Description of the illustration event-listener-component.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.
  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.

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 event-listener-component-edit.png follows
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 event-listener-component-qs.png follows
Description of the illustration event-listener-component-qs.png