Define Behavior for Components in Layouts

You can configure components in field and form templates to start action chains. For example, if you've created a field template that contains an icon component, you could add a component event to it to trigger some behavior, say, open a URL.

Note:

You can only create a component event from a component's Properties pane. You can't create one in the Layout's Events editor.

To define the behavior of a component in a field or form template:

1. Open the Layout's Templates tab, and then select the template that contains the component you want to configure.
   
   

   
   Description of the illustration dyncomponents-templates-tab.png

   
   
2. Define the component event:
   1. In the template editor, select the component on the canvas or in the Structure view.
   2. In the Events tab of the component's Properties pane, click + Event Listener and select the component event option in the list.

      The drop-down list shows the component event type that's most typically added to your component (for example, an "onclick" event), but you can also select + Create in the list to select a different type (for example, "onfocus"). If you select + Create, you'll need to select the component event type and specify the action chain it should trigger.

      
      

      
      Description of the illustration dyncomponents-event-onclick.png

      
      

      The Events tab now shows the properties of the component event, and you can edit the properties in the tab, for example, to add and assign input parameters that you might 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. If you create an input parameter in the Events tab, you can edit it in the action chain's Variables editor.

      
      

      
      Description of the illustration dyncomponents-event-onclickevent.png

      
      

      When you add the event, an action chain is created for you, and the Action Chain editor opens automatically. A component event listener for the new event is created for you, and the listener is mapped to the action chain.

   In the Event Listeners editor, you can see the new listener listed under Component Event Listeners, as well as the name of the action chain that it will trigger. This image shows the Event Listeners editor with the list of all the event listeners defined in the Layout.

   
   

   
   Description of the illustration dyncomponents-event-onclicklistener.png

   
   
3. Define the component's behavior with an action chain.
   1. Open the Layout's Actions tab.
   2. Create the variables you might want to use in your action chain.
      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.
   For more on creating the action chain, see Work With JSON Action Chains.