Interactions and events

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:

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.

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:

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

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:

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.