# Page

Page, browser tab title, navigation, and lifecycle events.

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

WebPage · Containers · Visual · 8 events

## Quick start

The current page is `this`. Use the example in a page method.

```ts
// OnCreate body.
this.browserTitle = 'Customers';
// In OnShow, load the data needed each time the page is shown.
// To navigate: Navigate('PageCustomers');
// To close and remove the instance: this.close({ remove: true });
```

The page root is this. An empty Browser title uses the application name. The route is derived from the page name and is read-only at runtime.

- **OnCreate**: instance initialization. **OnShow**: update on each display. **OnHide**: leaving the page. **OnResize**: size change.
- Configure **Browser title** in the Inspector. Required index and 404 pages use /index and /404; other pages use their lowercase name as the automatic path.
- Use Navigate('PageName') to navigate and close({ remove: true }) to dispose of the instance.
- Configure typed destination parameters in **Navigation → Parameters → Configure Parameters**. Read them through params or this.params; OnParametersChanged handles changes on the current page.
- **OnLogin**, **OnLogout**, and **OnUnauthenticated** depend on RestGO integration. Use OnUnauthenticated to redirect protected pages; a network failure does not confirm logout.

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `800` | width |
| `height` — Height · Size & position | `number` | `600` | height |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxHeight` — Maximum height · Responsive size | `number` | `null` | Inspector / configuration |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `containerMode` — Container layout · Children layout | `enum` — `fixed` `align-to-parent` `row` `column` | `"fixed"` | Inspector / configuration |
| `containerPaddingTop` — Padding top · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingRight` — Padding right · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingBottom` — Padding bottom · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingLeft` — Padding left · Children layout | `number` | `0` | Inspector / configuration |
| `containerGap` — Gap · Children layout | `number` | `0` | Inspector / configuration |
| `containerWrap` — Wrap · Children layout | `boolean` | `false` | Inspector / configuration |
| `containerJustifyContent` — Justify content · Children layout | `enum` — `start` `center` `end` `space-between` `space-around` | `"start"` | Inspector / configuration |
| `containerAlignItems` — Default alignment · Children layout — Default cross-axis alignment for children. Each child can override it with Item alignment. | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `caption` — Caption · Appearance | `string` | `"Page"` | caption |
| `browserTitle` — Browser title · Identity — Title shown in the browser tab. Leave blank to use the application name. | `string` | `""` | browserTitle |
| `parameters` — Parameters · Navigation — Declare typed inputs received when navigating to this page. | `page-parameters` — Editor: page-parameters | `[]` | Inspector / configuration |
| `backgroundColor` — Background Color · Appearance | `color` | `"#ffffff"` | backgroundColor |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `browserTitle` — Browser tab title; blank values retain the application's original title. | `browserTitle: string;` | Read and write |
| `routePath` | `readonly routePath: string;` | Read-only |
| `params` | `readonly params: Readonly<Parameters>;` | Read-only |
| `layoutMode` | `layoutMode: WebPageLayoutMode;` | Read and write |

### `show`

method

```ts
show(): void;
```

Example

```ts
this.show();
```

### `close`

method

```ts
close(options?: ClosePageOptions): void;
```

Example

```ts
this.close({ remove: true });
```

Inherited members (41)

| Member | Signature | Access |
| --- | --- | --- |
| `aspectRatio` | `aspectRatio: WebAspectRatio;` | Read and write |
| `floatingAlignment` | `floatingAlignment: WebPanelFloatingAlignment;` | Read and write |
| `placement` | `placement: 'in-flow' \| 'floating';` | Read and write |
| `floatingHorizontalAnchor` | `floatingHorizontalAnchor: 'left' \| 'center' \| 'right';` | Read and write |
| `floatingVerticalAnchor` | `floatingVerticalAnchor: 'top' \| 'center' \| 'bottom';` | Read and write |
| `floatingZIndex` | `floatingZIndex: number;` | Read and write |
| `caption` | `caption: string;` | Read and write |
| `progressEnabled` | `progressEnabled: boolean;` | Read and write |
| `progressValue` | `progressValue: number;` | Read and write |
| `progressVisible` | `readonly progressVisible: boolean;` | Read-only |
| `backgroundImage` | `backgroundImage: string;` | Read and write |
| `backgroundSize` | `backgroundSize: WebPanelBackgroundSize;` | Read and write |
| `backgroundPosition` | `backgroundPosition: WebPanelBackgroundPosition;` | Read and write |
| `backgroundRepeat` | `backgroundRepeat: WebPanelBackgroundRepeat;` | Read and write |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `requireComponentElement`

method

```ts
requireComponentElement(componentId: string): HTMLElement;
```

### `dispose`

method

```ts
dispose(): void;
```

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnCreate

Standard event (Event).

Signature and example

```ts
import type { WebPage } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainCreate(
    sender: WebPage,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnShow

Standard event (Event).

Signature and example

```ts
import type { WebPage } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainShow(
    sender: WebPage,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnParametersChanged

[PageParametersChangedEventDetail](https://webrad.atentor.com/docs/types#pageparameterschangedeventdetail) in `event.detail` · `previous`

Signature and example

```ts
import type { WebPage, PageParametersChangedEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainParametersChanged(
    sender: WebPage,
    event: CustomEvent<PageParametersChangedEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { previous } = event.detail;
    console.log(previous);
  }
}
```

### OnHide

Standard event (Event).

Signature and example

```ts
import type { WebPage } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainHide(
    sender: WebPage,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnResize

Standard event (Event).

Signature and example

```ts
import type { WebPage } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainResize(
    sender: WebPage,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnLogin

[WebPageLoginEventDetail](https://webrad.atentor.com/docs/types#webpagelogineventdetail) in `event.detail` · `user`

Signature and example

```ts
import type { WebPage, WebPageLoginEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainLogin(
    sender: WebPage,
    event: CustomEvent<WebPageLoginEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { user } = event.detail;
    console.log(user);
  }
}
```

### OnLogout

[WebPageLogoutEventDetail](https://webrad.atentor.com/docs/types#webpagelogouteventdetail) in `event.detail` · `user`

Signature and example

```ts
import type { WebPage, WebPageLogoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainLogout(
    sender: WebPage,
    event: CustomEvent<WebPageLogoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { user } = event.detail;
    console.log(user);
  }
}
```

### OnUnauthenticated

Standard event (Event).

Signature and example

```ts
import type { WebPage } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async PageMainUnauthenticated(
    sender: WebPage,
    event: Event,
  ): Promise<void> {
    Navigate('PageLogin');
  }
}
```