Interactions provide a way for you to update the page based on what the user is doing. Interactions are set up for components on a page. They provide a way for you to modify something else on the page after a user does an action such as clicking on a button. They can also be used to modify things on a page when the page loads or when the user changes some input such as a text box. 

Tip for Professional Web Developers: Think of interactions as just Javascript events and event handlers combined into one thing. 

There are three steps to create an interaction:

1. Specify what needs to happen in order to trigger the interaction.
2. Specify what the interaction should do.
3. Specify what component the interaction should affect.

For example, if a user clicks on a button, we want to show or hide a column elsewhere on the page depending on whether it's already being shown or is hidden. If the column is already hidden then we want to show it. If the column is already shown then we want to hide it. In this case the interaction would consist of these three steps:

1. User clicks on the button.
2. Another component will be shown or hidden.
3. The shown/hidden component will be the column. 

Steps to set up an interaction

1. Select the component to which you would like to add the interaction. Select the interactions tab. Finally, select the "Create new interaction" button. In this case we are adding an interaction for a button on a page called Project Detail. 
   
   
   
   
2. For the first step, specify what needs to happen to trigger the interaction. Clicking on "Click", "Change", or "More" provides various options depending on the type of the component where you're adding the interaction. 
   a.    "Click" is used when you want to do something if a user clicks on a button or some other component.
   b.    "Change" is used when you want to do something if a user changes some input such as a form field. 
   c.    "More" and "onActionSuccess" is useful for doing something after your form has been successfully created or updated. 
   d.    "More" and "onActionError" or "onActionLoad" are also available if you need them.
   
   In this case we are selecting the "Click" option for the "When I ... Button" question for the example above, where we want an interaction to occur based on clicking a certain button.
   
   
   
   
3. For the second step, specify the event that will happen. There is a very long list of possible events. See https://docs.bettyblocks.com/en/articles/5814545-what-are-component-interactions and https://docs.bettyblocks.com/en/articles/8176924-interactions-reference for complete lists. Commonly used events are the following:
   a.    Filter. This updates a filter for a dataTable, dataContainer, or any DATA component and therefore reloads the data based on the new filter. You will be able to specify what the new filter is by selecting the property to filter and selecting an operation such as “matches with”. Note that this filter needs to be added to a text input, select, or autocomplete only. When the user changes those the filter will be updated based on their input. This filter replaces the existing filter. One one property at a time can be filtered.
   b.    Hide. This hides a component so the user will no longer see it.
   c.    Show. This shows a component that was previously hidden. 
   d.    Show/Hide. This is a toggle. It hides a component if it is already shown. It shows a component if it is already hidden.
   e.    Submit. This causes the form to submit and trigger the action for the form. 
   f.     Redirect. This will send the user to a different page in your application. You will need to specify to which page you want to have the user transferred.
   g.    Refetch. This causes a data component to refresh itself and fetch new data. A common use for this is to update a list of items after you add a new item.
   
   Interactions don't affect all components. You can view the https://docs.bettyblocks.com/en/articles/8176924-interactions-reference article to see which components supports which events. If an interaction isn't functioning then it might not work with the component specified. 
   
   In this case we are selecting "Show/Hide" for the "Select component function" question. 
   
   
   
   
4. Select target component. Select the component that the event will affect. Make sure you gave your target component a good name or it can be hard to find it in the drop-down list of components. 
   
   In this case we are selecting "TaskColumn" for the "Select target component" question. 
   
   
   
   
5. Select "Save" and you are done.