Start an Action Chain from a Field

You can start an action chain when an event occurs in a field by adding a component event to the field in a field template.

For example, you might want to display some additional details or options when someone changes the value in one of your form fields. You can add an event that's triggered when the value changes, and start an action chain that retrieves the data and displays it in your page. The Quick Start option in the component's Properties pane can help you quickly create the event, event listener, and action chain. You can also use the event to start action chains that are already defined in the layout.

When creating an action chain, you can use variables and constants defined in your layout, and create new ones if you need them.

To start an action chain from a field:

1. Open the Templates editor for your layout and click the field template you want to edit.

   The field template opens in the Template editor.

2. Select the text field, then open the Events tab in the Properties pane.
3. Click + Event Listener and select the On 'value' option.
   
   

   
   Description of the illustration template-field-addevent.png

   
   

   The On 'value' event is a quick start that suggests an event for your component. In the case of a text field, the suggested event is value, which is triggered when the text field's value changes, for example, when someone types in the field. If you don't want to use the suggested event, you can select New Custom Event in the drop-down list and select a different event. Make sure the event name starts with a lowercase letter, though camel case is allowed. Hyphens are not supported.

   When you select the Quick Start option:

   • an event is defined for the text field
   • a new action chain is created
   • an event listener is created that will trigger the new action chain when the event occurs
   • you are navigated to the new action chain in the Action Chain editor.
4. In the Action Chain editor, define the action chain's properties in the Properties pane. You can edit the default ID, add a description, and configure the action chain's input parameters and return type.
   
   

   
   Description of the illustration template-field-addevent-action.png

   
   
5. Create the action chain by adding actions from the palette. Depending on the actions you add, you might also need to create variables used in the action chain or layout and define other properties for the actions.

If you navigate back to the template editor, you'll see the event details in the field's Events tab in the Properties pane. You can add more action chains that will be triggered by the same event, or you can add different events to the same component.

Description of the illustration template-field-addevent-result.png