Skip to content

Declarations

Overview

The Declarations panel is the bottom section of the Page Editor's right panel. It is where you define everything your page needs to function: data properties, objects, arrays, functions, and injected services.

For a full explanation of declaration types, the panel UI, the toolbar, context menu, and all dialogs, see Declarations.

What You Will Learn

  • How page parameters are injected automatically and how to access them
  • How to bind declarations to component properties using drag and drop

When To Use This

Use the Declarations panel when you need to define state, logic, or services for a page — adding properties to hold data, writing functions to handle events, injecting API services, or reading URL parameters.

Page-Specific Behaviour

pageParameters

When a page has parameters configured, Bellini automatically injects a pageParameters object into the Declarations panel. This object is read-only and contains one property per configured parameter, populated at runtime from the current URL.

Access parameter values in expressions and function bodies using:

1
pageParameters.paramName

For example, if the page has an id parameter, retrieve its value with:

1
pageParameters.id

pageParameters appears in the declarations tree as an injected service and is always displayed at the top of the tree. It is removed automatically if all parameters are removed from the page configuration.

For more on configuring parameters and navigating between pages with parameter values, see Page Configuration.

Binding Declarations by Drag and Drop

The Declarations panel supports drag and drop shortcuts for quickly wiring declarations to component properties, saving you from typing expressions manually.

Drag a Declaration onto the Canvas

Drag a declaration node from the Declarations panel and drop it onto a component in the canvas. A Select Property dialog opens with a dropdown listing all the properties of that component that can accept the declaration. Select the target property and click Confirm — Bellini writes the expression (e.g. $ctrl.fullName) into that property for you.

Drag a Declaration onto the Properties View

Drag a declaration node and drop it onto a specific property row in the Properties view. The expression editor opens pre-populated with the declaration reference (e.g. $ctrl.fullName), ready for you to confirm or extend.

Drag a Property View Entry onto the Declarations Tree

The reverse also works: drag a property row from the Properties view and drop it onto the Declarations panel. Bellini creates a new declaration with a matching name and type, then automatically assigns the expression for that component property to point to the new declaration. This is a fast way to extract a hardcoded property value into a declaration.

Helpful Resources