Global functions

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.

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

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.

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:

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 for defaults, direct links, and invalid values.

Configure paths, index/404 pages, History/Hash, and subfolder publishing in Routing and hosting.

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) 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 for authentication, data, and files.

Theme controls the application theme; see Layout, styles, and themes 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:

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:

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, 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.