Pages & Routing

URL Structure

Every page in your app has a slug — a short path segment that determines the page's URL. The page's full URL is the app's base URL followed by the slug:

Example — Page URL from slug

App address: <app address> Page slug: order-details Full page URL: <app address>/order-details

The slug is set when the page is created and can be changed in Page Settings at any time — but changing it breaks any external links or bookmarks pointing at the old address. Your app's address is shown, read-only, in Settings → General → App URL; see Path Tree and URLs for how the full URL is built.

Warning: No two pages can have the same URL. If the slug you enter is already used at that path, the message "Page url cannot be the same as other pages url" appears under the slug field. Choose a different slug to resolve it.

The Navigator Panel

The Navigator panel (left rail in the builder) lists all pages and modules as a tree. Pages can be organized into folders. Click a page to open its Page Settings. The page actions below are in the ⋮ menu at the top of the Hierarchy panel, the separate left-rail panel that lists the blocks of the page you have open:

The Page Settings panel menu also has Clone Page, which creates a copy of the page, and Delete Page. To set the app's default (home) page, go to Settings → Development → Navigation, open the Content tab and, under Default Page, choose a page for Logged in User. Logged out User is optional: it must be a Public page, and if you leave it unset, signed-out visitors see the login page. Only pages with static paths can be default pages.

Creating a New Page

In the Navigator panel, click the Create New Page icon next to the search box. You can also click + in the page switcher in the top bar and choose Page. The Add a New Page dialog opens: choose a starting point under Start with (Blank Page, Figma Frame or Data) or pick one of your workspace's page templates. The Page Setup dialog then asks for these fields; click Confirm to create the page.

Page Settings

After a page is created, open Page Settings by clicking the page in the Navigator to configure it further. Settings are organized into sections:

General Settings

Events

The Interactions section of Page Settings is where page triggers (Events, such as On Page Load and On Page Focus) and Keyboard Shortcuts are configured. See Loading States & Triggers for full details.

Permissions

In Governance → Permissions, limit the page to users who hold specific permissions. A rule names one or more permission groups and the permissions a user must hold; the user needs every permission listed. Permissions layer on top of the Privacy setting. A signed-in user without them sees an Access Denied screen ("You do not have access to this page"), and menu items that point at the page are hidden for them. See Slugs and Visibility.

Custom Code

Add raw HTML to this page in two slots: Head Code is added at the end of the <head> tag, and Footer Code is added before the </body> tag. The HTML can include <script> and <style> tags. The code ships with this page only. Use it for third-party analytics snippets, meta tags or page-specific styles. See Page Layout & Folders for examples and a security warning.

Dynamic URLs

Dynamic URLs let a single page represent many different records by capturing a variable value from the URL path. This is how you build detail pages — one page design, many records.

Folder Types for Dynamic Segments

Dynamic URL segments are created by setting a folder's type in the Navigator:

To create a dynamic folder:

1. Add the folder: In the Navigator panel, click the Create new folder icon next to the search box. To nest it inside an existing folder, open that folder's + menu and choose Add sub-folder.

2. Open its settings: Click the folder to open Folder settings.

3. Name it: Enter the Folder name, for example orderId. This becomes the parameter name.

4. Make it dynamic: Under Type, choose Dynamic param. A Mock value field appears.

5. Enter a Mock value: Type a sample value, for example ORD-2847. It is used only in the builder to preview URLs.

6. Save: Click Save in the folder settings panel.

7. Add pages inside it: Open the folder's + menu and choose Add page, or set an existing page's Parent folder to this folder.

Dynamic folders have a Mock value setting — a placeholder value used in the builder so the page can preview correctly without a real record ID.

Folder Redirects

A folder can be configured to Redirect to another page. When a URL matching the folder's path is visited without a child page match, the visitor is redirected to the target page. Path parameters captured from the URL can be passed to the redirect target.

Example — Dynamic URL structure for an order detail page

Folder: orders/ (static segment) Folder: :orderId/ (dynamic segment — captures order ID) Page: details (slug: "details") Resulting URL pattern: /orders/:orderId/details Example URL: /orders/ORD-2847/details In-page access: {{ pageParams.orderId }} → "ORD-2847"

Navigating Between Pages

In-app navigation is controlled by the Go to Page action (and related navigation actions), configured in any interaction or event handler.

Go to Page Action

Example — Navigating to an order detail page from a table row

// In a row action's On Click handler in the orders_table Table: Action: Go to Page Page: Order Details Dynamic Params: orderId: {{ orders_table.context.currentRow.id }} // The resulting URL will be something like: // /orders/ORD-2847/details // In the Order Details page, access the param: // {{ pageParams.orderId }} → "ORD-2847" // Then use it as a data source input to fetch the order.

Related Navigation Actions

Deep Linking

Because every page and every record has a deterministic URL, sharing deep links is built in. To share a link to a specific record:

1. Navigate to the detail page for the record

2. Copy the URL from the browser address bar

3. Share it — anyone with access to the app who opens the link lands on that exact record's detail view

This works because the dynamic URL segment captures the record ID in the path, and the On Page Load trigger uses that ID to fetch the correct record from the data source.

Example — Fetching a record from a deep-linked URL

// Shared URL: // /orders/ORD-2847/details // In the Order Details page, on Page Load: // Run data source: order_query // Input — orderId: {{ pageParams.orderId }} // order_query fetches the specific order with id ORD-2847. // The page displays that order's data — same as if the user // had clicked through from the Orders list.

Privacy and Access

Every page has a Privacy setting that controls who can open it:

Permissions (Page Settings → Governance → Permissions) layer on top of Privacy. A Private page is first gated by sign-in; Permissions then decide which signed-in users can open the page. Users without the required permissions see an Access Denied screen.

Document Title

The document title is the text shown in the browser tab when this page is open. It's available in web apps only, and you can edit it only for the page that is currently open in the builder. It can be:

Example — Dynamic document title on an order detail page

Document Title: Order {{ order_query.data.orderNumber }} — Acme App // While the page is loading: // Browser tab: "Order — Acme App" (orderNumber not yet resolved) // After data loads: // Browser tab: "Order ORD-2847 — Acme App"

The title updates automatically when the bound expression resolves — no extra actions required.

Query Parameters (Page Inputs)

Pages can accept input values via the URL query string. These are declared as Query Parameters in Page Settings and received by the page as named inputs.

Routing Summary

Note: Dynamic params (URL path segments like /orders/:orderId) are best for identifying the main subject of the page — the record being viewed. Query parameters (URL query string like ?tab=overview) are best for supplemental context like active tab, filter state, or display preferences. Both are readable in the page via expressions.