# Interactions and events

Link events and use sender, event, and CurrentRow.

URL: https://webrad.atentor.com/docs/interactions
Updated: 2026-11-07

Link events to methods in the Inspector’s **Interaction** tab:

1. Select the component in the Builder.
2. Open **Interaction** and double-click the event.
3. Edit the method created in the page or reusable component class.
4. Use **F9** to run Preview.

The link is saved in the project. Creating a method with a similar name does not link the event. Preserve the name shown in Interaction.

## Components, fields, and methods

Use the name defined in the Builder: `Save.caption` or `this.Save.caption`. Fields, methods, getters, and setters in the same class also support direct access or `this`. The page or reusable component root is `this`.

Local variables and parameters with the same name take precedence. Direct access belongs to instance code; in callbacks, prefer arrow functions to preserve that context. Each reusable placement has its own components and state.

## sender and event

The method receives `sender`, the typed component instance, and `event`. Data events use `CustomEvent` with typed `event.detail`. The IDE creates the appropriate signature and imports when you open an event.

For DOM events, narrow `Event` before accessing specific properties:

```ts
Edit1.bindEvent('OnKeyDown', (sender, event) => {
  if (!(event instanceof KeyboardEvent)) return;
  if (event.key === 'Enter') {
    event.preventDefault();
    Message(sender.value.trim());
  }
});
```

Changing a property in code does not guarantee an `input` or `change` event. To cancel a default action, call `event.preventDefault()` before any `await`.

## Events in code

`bindEvent` keeps one handler per event name on the instance. A new binding replaces the previous one, including a binding created through Interaction. The returned function removes the binding. Shortcuts such as `onClick` use the same mechanism.

```ts
const unsubscribe = Button1.bindEvent('OnClick', (sender) => {
  Message(sender.caption);
});
unsubscribe();

Button1.onClick = (sender) => { Message(sender.caption); };
// Remove the handler:
Button1.onClick = null;
```

## CurrentRow in Repeating Group

Configure the list in Repeating Group and use **Current row** on template children to bind properties to item fields. Paths are JSON Pointers relative to the row, such as `/name` and `/id`. A Group organizes children; bind data to the Label, Edit, Image, or other visual control inside it.

Opening a template child’s event adds the typed `CurrentRow` parameter:

```ts
const id = CurrentRow.value.id;
const rowIndex = CurrentRow.index; // Zero-based.
Label1.text = String(id);
```

The type of `value` comes from the bound operation’s response schema. In a row event, `Label1` and `this.Label1` resolve to that row’s component. The context and value remain associated with the event after `await`. Outside these events, generated access to a child uses the first row and fails if no rows exist; use `RepeatingGroup1.getRow(rowIndex)` to choose a row explicitly.

## Page lifecycle

| Event | When it occurs |
| --- | --- |
| OnCreate | First display of each page instance. |
| OnShow | Page display. |
| OnParametersChanged | Parameters changed while the same page remains active; params already contains the new values. |
| OnHide | Page closing. |
| OnResize | Page size change. |

Use OnCreate for initialization and OnHide to release external subscriptions created by the page. Navigation disposes of the previous page and its instances. Do not register handlers again on every OnShow without removing the previous binding.

With RestGO configured, pages and reusable roots offer:

| Event | Data |
| --- | --- |
| OnLogin | `event.detail.user` and `restored`; the latter indicates a restored session. |
| OnLogout | `event.detail.user`, the last authenticated user. |
| OnUnauthenticated | No user payload; the SDK confirmed the absence of a session. |

On a protected page, link OnUnauthenticated and use `Navigate('PageLogin')`. Keep the login page accessible without a session. Authentication observation follows visible pages and mounted reusable components and is released automatically.

## Errors and disposal

Use `try/catch` in asynchronous actions. API Client, uploads, player, and reports may reject Promises as well as emit events; the RestGO SDK normally returns `data/error`. Generated pages and reusable components already dispose of their components. Call `dispose()` only on instances whose lifecycle you created.