Adding AppPages
An AppPage is a named content area with a URL route. Each navigation item in your app's sidebar points to an AppPage. Here is how to create and configure them.
Creating an AppPage
Right-click the App Root in the App Tree
Right-click the top-level App node → select Add Page. Alternatively, click the + button in the App Tree toolbar with nothing selected.
Name the Page
Enter a name (e.g., "Leads"). This becomes the pageId (slugified) and the default display title. Both can be changed later.
Set the Route
In the Properties Editor (Page tab), set the Route field. Routes start with / and can include parameters:
/leads // static route
/leads/:id // with URL parameter
/leads/:id/edit // nested route
/reports/:year/:month // multiple paramsConfigure Access (Optional)
Under Required Roles, list the roles that can see this page. Leave empty for all app users. Users without the required role do not see this page in the sidebar.
AppPage Properties Reference
| Property | Type | Description |
|---|---|---|
pageId | string | Auto-generated from name. Unique within the app. Used in navigate actions and audit logs. |
title | string | Display title — shown in breadcrumbs and the browser tab. Supports tokens: {{ route.id }} |
route | string | URL pattern relative to the app root. Parameters prefixed with : |
requiredRoles | string[] | Roles that can access this page. Empty = all authenticated app users. |
isHome | boolean | If true, this page is the default on app open (redirected to if no specific route is given) |
breadcrumbParent | pageId | The parent page for breadcrumb generation. e.g., leads-detail's parent is leads-list |
panes | Pane[] | The panes on this page (managed via App Tree — not edited directly here) |
Route Parameters Become Variables
Any :paramName segment in the route becomes a {{ route.paramName }} token available in all widgets on that page:
// Route: /leads/:id
// DataGrid config — filter by the URL id
dataSource: "GetLeadActivities"
params:
leadId: "{{ route.id }}"
// Text widget — show the id in a heading
content: "Activities for Lead #{{ route.id }}"
// Button — navigate back with the same id
onClick:
type: navigate
target: /leads/{{ route.id }}
Setting the Home Page
One AppPage should be designated the home page — the default landing when a user opens the app with no specific route. To set a page as home:
- Select the AppPage in the App Tree
- In the Properties Editor, toggle Set as Home Page to on
- Only one page can be the home page — setting a new one automatically clears the previous
All routes within an app must be unique. Duplicate routes will cause a validation error when saving. App Studio will highlight the conflicting pages in the App Tree with a red error indicator.