# Global functions

Use built-in functions, pass page parameters, and create shared functions in Units.

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

`Message`, `Confirm`, `Navigate`, `RestGO`, `Theme`, and `Env` are available in project code. Additional classes and types come from `@webrad/runtime`; the RestGO SDK can be imported from `@webrad/restgo-sdk`.

## Use a global function in an event

1. Select a Button in the Designer.
2. In **Interaction**, double-click **OnClick** to create and link the method.
3. Copy the following body into that method and run **F9 Preview**.

```ts
if (!Confirm('Save these changes?')) return;
Message('Changes saved');
```

These built-in functions need no import and no `this`. Use them in event methods and other authored application code.

## Message and Confirm

```ts
Message('Operation completed');
if (!Confirm('Do you want to continue?')) return;
```

Both convert the received value to text and use browser dialogs. `Confirm` returns a `boolean` synchronously.

## Navigate

`Navigate(destination, options?)` accepts a page name, ID, automatic route, URL string, or URL object. Internal navigation switches pages without reloading the application. Back/Forward restores the corresponding page.

```ts
Navigate('PageCustomers');
Navigate('/pagecustomers');
Navigate('PageLogin', { replace: true });
Navigate('https://example.com/help', { newWindow: true });
```

`replace` replaces the current history entry. `newWindow` or `target` opens another context, subject to browser popup blocking. External URLs follow normal browser navigation.

### Pass page parameters

Declare parameters on the destination page through **Properties → Navigation → Parameters → Configure Parameters**. For a Customers page with a required numeric `customerId` and optional boolean `showOrders`:

```ts
Navigate('Customers', {
  params: { customerId: 42, showOrders: true },
});
```

The destination reads `params.customerId` or `this.params.customerId`. The IDE generates names and types from its declarations. Defaults and required values are checked when resolving navigation. A parameter change on the active page updates its context and emits **OnParametersChanged**.

With supplied parameters, `paramsHandling` defaults to `replace`; `merge` retains existing fields and applies the supplied values, while `preserve` keeps the current values. See the [page parameter manual](https://webrad.atentor.com/docs/rotas-e-hospedagem#page-parameters) for defaults, direct links, and invalid values.

Configure paths, index/404 pages, History/Hash, and subfolder publishing in [Routing and hosting](https://webrad.atentor.com/docs/rotas-e-hospedagem).

## Titles and closing

Configure **Identity > Browser title** on the Page root or assign `this.browserTitle`. Empty values use the application name; the visible page’s title appears in the browser tab.

`this.close()` closes the current page. `this.close({ remove: true })` also removes its structure. Popup has its own signature: `Popup1.close('confirmed')` stores the text in `Popup1.returnValue`.

## Env, RestGO, and Theme

`Env.VARIABLE_NAME` reads the environment value selected in Project Settings at compilation time. Values are strings, typed by the registered names and read-only. See [Global variables (Env)](https://webrad.atentor.com/docs/global-variables) for creation, Development/Production selection, and examples.

`RestGO` uses the connection enabled and configured in the project. `RestGO.CurrentUser` reads the last server-confirmed identity, or `null` before authentication/restoration. See [RestGO SDK](https://webrad.atentor.com/docs/restgo-sdk) for authentication, data, and files.

`Theme` controls the application theme; see [Layout, styles, and themes](https://webrad.atentor.com/docs/layout) for configuration and events.

## Create shared functions in a Unit

To reuse your own functions across pages and reusable components, create a Unit and import its exports where needed.

1. Choose **Project → Add Unit** and name it **Formatting**.
2. Open `units/Formatting.ts` and replace its sample content with:

```ts
export function formatCurrency(value: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency', currency: 'USD',
  }).format(value);
}
```

Add the import above the existing class in a page's authored TypeScript file. Put the assignment in a linked event method:

```ts
import { formatCurrency } from '../units/Formatting';
// Keep the page's existing imports and class.
// Inside a linked event method; add Label1 in the Designer first:
Label1.caption = formatCurrency(150);
```

The Label displays `$150.00`. Repeat the import in another page or reusable component to use the same implementation. The example assumes the importing file is one folder below the project root; adjust the relative path for its location.

Unit exports use ordinary TypeScript imports. They become available by their imported names, without `this`. They do not automatically become built-in globals. Pass values into shared functions instead of relying on a particular page's component names. A helper used by just one page can remain a class method; both its direct name and `this.methodName` work in that instance's code.

Shared functions may be asynchronous. Declare a precise return type, await the call in an async event method, and handle errors there. For third-party functions, first install the package through [Packages and libraries](https://webrad.atentor.com/docs/packages), then import it in the Unit or authored file that uses it.

## Create instances directly

Use Designer instances for interface components. Classes from `@webrad/runtime` can also wrap compatible DOM elements, but their constructors do not assemble the structure, styles, and bindings generated by WebRAD. Review the component signature before creating an instance in code.