Start an Action Chain from a Field or Variable

You can start an action chain by adding an event to a field in field templates or to variables in the Layout. 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 onValueChanged event that's triggered when the value changes, and the event can start an action chain that retrieves the data and displays it in your page. The event can start action chains you create or action chains already defined in the Layout.

If you are using a variable in your Layout, say in a template or action chain to store an amount, you can add an event so an action chain is triggered when the amount changes. You can add the event to variables you've defined in your Layout, as well as to extendable variables in dependencies. You can also add an onValueChanged event to constants if its default value is an expression containing a variable.

To start an action chain when a field's value changes:

1. Do one of the following:
   • Open the Layout's Templates tab, and then open the field template you want to edit in the Template editor.
   • Open the Layout's Variables tab.
2. Select the text field, then open the Events tab in the Properties pane.
3. Click + Event Listener in the Events tab and select the On 'value' event in the drop-down list.

   The suggested event for a field is On 'value', which is triggered when the 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 + Create in the drop-down list and select a different event. You can also add more events to the field.

   
   

   
   Description of the illustration dyncomponents-templates-field-addevent.png

   
   

   When you select On 'value':

   • an onValueChanged event is defined for the field;
   • a new action chain is created;
   • an event listener for the event is created that will trigger the new action chain when the event occurs; and
   • you are navigated to the new action chain in the Action Chain editor.

   The variable's Events tab displays the action chain the event listener will trigger. In the Events tab you can change or remove the action chain, add and assign input parameters, and add more action chains.

4. Define the action chain.
   1. Define the action chain's properties in the Properties pane.

      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 dynamicui-templates-field-action.png

      
      
   2. Create the variables you might want to use in your action chain.
      Depending on the actions you add, you might also need to create variables used in the action chain, for example, variables for the action chain's input parameters. You can't use a page's variables directly in your action chain, but you can create your own in the action chain's Variables editor.
   3. Create the action chain in the editor by adding actions from the palette.
      For more on creating the action chain, see Work With JavaScript Action Chains.

If you navigate back to the Events tab in the Properties pane for the field or variable, you can see the event details, including the name of the action chain and input parameters. You can add more action chains that will be triggered by the same event, or you can add different events.

Description of the illustration dynamicui-templates-field-newevent.png