Skip to content

Page Configuration

Overview

Each Bellini page has a set of properties that control its URL path, display name, default page status, and URL parameters. These properties are configured in the Properties view while the page is open in the Page Editor. Changes take effect as soon as you save the application.

What You Will Learn

  • How to open the page configuration properties
  • What each configuration property does
  • How to define URL parameters and map them to path segments
  • How to access parameter values in the page using the pageParameters object
  • How to navigate to a page and pass parameters using the $state service

When To Use This

Use this page when you need to rename a page, change its URL path, mark it as the default landing page, or define the parameters it accepts.

Opening Page Configuration

Page configuration is accessed through the Properties view while a page editor tab is open.

  1. Open the page in the Page Editor by double-clicking it in the Apps view.
  2. In the Elements Tree, click the item named after your page (the top-level item).
  3. The Properties view on the right sidebar displays the page's configuration properties. If the Properties view is not visible, click the Properties icon on the right sidebar to open it.

Page Configuration Properties

The Properties view shows the following configurable fields for the selected page.

Property Type Description
Name Text input The display name of the page, shown in the Apps view and the Elements Tree.
Path Text input The URL path used to access this page. See Page Path below.
Default Page Checkbox When checked, this page loads when the application is opened at its root URL. Only one page can be the default.
Parameters Edit button Opens the Edit Page Parameters dialog to define the parameters this page accepts. See Page Parameters below.

If authentication is enabled on the application, two additional properties appear:

Property Type Description
Authentication Required Toggle Controls whether the page is public or private. See Public vs Private Pages.
Scopes Selector Restricts access to users with matching permission scopes. See Page Access Control.

Page Path

The Path property defines the URL segment used to navigate to this page. Bellini appends this path to the application's base URL.

  • Use forward slashes to separate path segments: /orders/details
  • Path segments that start with : are treated as path parameters: /orders/:id/details

Path parameters defined here must also be declared in the Parameters table (see below) with the Path checkbox enabled, so Bellini knows to read them from the URL.

For more on how routing works in Bellini, see Page Routes.

Page Parameters

Parameters let a page receive dynamic values — either from the URL path or when navigating to the page programmatically. Click the edit button next to Parameters to open the Edit Page Parameters dialog.

The dialog displays a table with the following columns:

Column Description
Parameter The name of the parameter. This is how you reference it in the page's declarations and expressions.
Default Value The value used when the parameter is not supplied. Leave blank if the parameter is always required.
Path Check this box if the parameter is read from the URL path segment (i.e., mapped to a :name segment in the Path property).

Path Parameter Example

To create a page that displays an order by ID, you would:

  1. Set the Path to /orders/:orderId.
  2. Open Edit Page Parameters and add a parameter named orderId.
  3. Enable the Path checkbox for orderId.

Navigating to /orders/42 would make orderId available in the page with the value 42.

Programmatic Parameters

Parameters with the Path checkbox unchecked are not part of the URL. They are passed when navigating to the page using the navigation functions available in declarations and expressions. This is useful for passing complex objects or state between pages without exposing values in the URL.

Accessing Parameter Values in the Page

Once a page has at least one parameter configured, a pageParameters object becomes available in the page's Declarations panel. Each defined parameter appears as a property on this object.

For example, if you defined a parameter named orderId, you can read its value in any function or expression using:

1
pageParameters.orderId

This works for both path parameters (read from the URL) and programmatic parameters (passed during navigation).

Navigating to a Page with Parameters

To navigate to another page and pass parameters to it, inject the built-in $state service into the source page's Declarations, then call $state.go.

Injecting $state:

Inject $state as a service in the Declarations panel of the page you are navigating from. For instructions on how to inject services, see Page Editor.

Calling $state.go:

1
$state.go(to, params, options)
Argument Required Description
to Yes The name of the target page state. Use the page name as configured in Bellini. Supports absolute names ('orders.detail'), parent ('^'), sibling ('^.sibling'), or child ('.child') relative paths.
params No An object containing the parameter values to pass to the target page. Unspecified parameters inherit their current values.
options No Transition options object for advanced control over the navigation behaviour.

$state.go returns a TransitionPromise that resolves when the navigation completes.

Example — navigate to an order detail page:

1
$state.go('order-detail', { orderId: 42 });

This navigates to the order-detail page and sets its orderId parameter to 42.

Example — navigate to a sibling page:

1
$state.go('^.summary', { orderId: pageParameters.orderId });

This navigates from the current page to a sibling page named summary, passing along the current orderId value.

Helpful Resources