Interactions in Genius

Note. This article applies to Betty Genius Pages only. The components it refers to belong to the Genius component set. They are not interchangeable with classic Pages components — even where the names match, the available options and runtime behavior differ.

Interactions let a page run logic in response to events, rather than only when a user fills in a form. You define a trigger (when something happens) and an interaction (what happens in response). While the page is open, it watches for the trigger and runs the interaction automatically.

You can set up an interaction in two places:

On the page — triggered when the page loads, or when its data meets a condition you set.

Example: On page load > Redirect > My Card Collection page

On a component, such as a button — triggered when the user clicks it or changes its value.

Example: On button click > Load next page > Show 'featuredCards' collection

The interactions you can run are the same in both places. For example, you can run an action when a page loads, reset a form after it is submitted, or refetch a list when a record changes.

How to create an interaction

On the page

Page interactions are part of a page’s resources:

Open your page in the page builder (Pages)
Go to Page resources.
Select + (Add) and choose Interaction — or open the Interactions tab and select +.

The Create interaction dialog opens. Choose a trigger under WHEN, then an interaction under THEN.

On a component

Component interactions are set on the component itself:

Select the component (for example, Button).
Open the Interactions tab.
Under Interaction type, choose Click (or Change, Blur – depending on component type)
Under Interaction event, select the interaction to run (e.g. Refetch page variable, Run action, etc.)

Triggers

The trigger is the WHEN part of an interaction. Which triggers are available depends on where the interaction lives.

Page triggers

Set in the Create interaction dialog. There are two:

1. On page load. Runs the interaction once, as soon as the page finishes loading. Use it for setup work: fetching data, setting a default value, or running an action before the user does anything

2. On data condition. Runs the interaction whenever a condition you define becomes true. A condition has three parts: a property, an operator, and a value. You pick the property from the Insert menu (page variables, action response variables, or current user variables), choose how to compare it, and set the value to compare against.

Action reference — points to the action you want to run. The interaction doesn't contain any logic itself; it just references an existing action in your app (for example, deleteRecordContact). This is how the page knows which action to trigger.
Input variables — the values the action needs to do its job. An action rarely works in a vacuum: a delete action has to know which record to remove, so you map its record (object) input to the contact's id (contact.Id). This is where you hand the action the data it should act on — without it, the action has nothing to work with.
Action response variable — holds whatever the action sends back once it finishes (deleteRecordContact response). Other logic on the page can read from it, so you can react to the result — show a message, redirect, or refetch the list once the delete succeeds.

Component triggers

Set on a component through its Interactions tab.

Click	Runs when the user clicks the component, such as Button.
Change	Runs when the component's value changes, such as typing in an input or selecting an option.
Blur	Runs when a component loses focus — when the user clicks or tabs away from it after interacting, such as leaving an input field. (It's the counterpart to Change: Change fires as the value changes, Blur fires once the user moves on.)
Submit	Runs when a form is submitted, for example when the user selects the submit button. Available on the Form component.
Backdrop click	Runs when the user clicks the dimmed area outside the component (the backdrop), which usually dismisses it. Available on Drawer and Dialog.
Autohide	Runs when the component dismisses itself automatically after its set time, rather than from a user action. Available on Snackbar.

After choosing a type under Interaction type, pick the interaction to run under Interaction event. The available interactions are the same as for page triggers.

Example. On a Contacts page, a Search button can use Click to refetch the contacts page variable, so the list updates with the search results.

Supported interactions

Once a trigger is set, choose the interaction to run. The same interactions are available whether the trigger is on the page or on a component:

Interaction	What it does
Run action	Runs an action by reference (for example, save or delete a record).
Reset values	Clears the input values of a form or component back to empty.
Redirect	Sends the user to another page.
Refetch page variable	Re-runs a page variable’s data fetch so it shows current data.
Set variables	Assigns one or more values to page variables.
Load next page	Loads the next page of a paginated collection.
Load previous page	Loads the previous page of a paginated collection.

Each interaction is described in detail below, using a Contacts page as the running example.

Run action

What it does: Runs an action you select by reference. After choosing this interaction, pick the action under Action reference.

When to use it: Use it to trigger backend logic automatically — saving, creating, or deleting a record, or any custom action on the page.

Example. On the Contacts page, set the trigger to On data condition with Create Contact Form Object.Company exists. When the Company field has a value, run the Create Contact Form Action to save the contact.

Reset values

What it does. Clears the input values of a chosen component back to empty. Select the component under Component (for example, a form).

When to use it. Use it after a form is submitted, so the fields are clean and ready for the next entry.

Example. Once a new contact is created, reset the Custom Contact Form so its fields clear and the user can add another contact straight away.

Redirect

What it does: Sends the user to another page. Select the destination under Redirect to.

When to use it: Use it to move the user along after something completes — for example, after a successful save or when a condition is no longer met.

Example. After a contact is created, redirect the user from the form page to Dashboard page.

Refetch page variable

What it does: Re-runs a page variable’s data fetch, so the variable returns current data instead of what was loaded earlier. Select the variable under Page variable.

When to use it: Use it after data changes on the page, so what the user sees stays in sync with the database.

Example. After a contact is added or deleted, refetch the contacts page variable so the list reflects the change without a full page reload.

Set variables

What it does: Assigns values to one or more page variables. For each row, pick the variable and enter the value to assign. Select + Add to set more than one.

When to use it: Use it to update state on the page — a counter, a flag, or a value that other components read from.

Example. Set a showDeletedMessage variable to true when deleteRecordContact response.Is success equals true, so a message component on the page confirms the contact was deleted.

Load next page

What it does: Loads the next page of a paginated collection. Select the collection under Collection.

When to use it: Use it to page forward through a long list — for example, behind a “Next” control or when the user reaches the end of the current page.

Example. On the Contacts page, load the next page of the contacts collection so the user can browse beyond the first set of results.

Load previous page

What it does: Loads the previous page of a paginated collection. Select the collection under Collection.

When to use it: Use it to page backward through a list, alongside Load next page.

Example. Load the previous page of the contacts collection so the user can return to earlier results.