Skip to content

Declarations

Overview

The Declarations panel is the bottom section of the Component Editor's right panel. It is where you define everything your component 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 to export declarations and configure export type, data type, and parameters
  • 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 component — adding properties, writing functions, injecting services, or configuring which declarations are exported for consumers to configure.

Component-Specific Behaviour

Exported Declarations

Unlike pages, components can export their declarations. An exported property or function becomes visible in the Properties view when the component is placed on a page or inside another component, allowing the consumer to pass in values or wire up event handlers.

To export a declaration, check the Export checkbox in the Add Declaration dialog when creating it. All export settings — including Export Type, Data Type, Enumeration Options, Default Value, and Parameters — can be changed at any time by right-clicking the declaration and selecting Configure Declaration. When the Export checkbox is checked, additional fields appear depending on the declaration type.

Properties, Arrays, and Objects

Field Description
Export Type Controls the binding direction. One Way means the consumer can pass a value in, but changes inside the component are not propagated back. Two Way creates a live binding — changes inside the component update the consumer's value and vice versa.
Default Value The value used when the consumer has not set the property in the Properties view.

For more on how exported properties appear and are used when placing a component, see Exported Properties and Functions.

Property Data Type

For Property declarations, an additional Data Type field controls how the property is presented and validated in the Properties view when the component is used.

Data Type Behaviour in Properties view
Any Free-form expression editor (default)
Text Text input
Number Numeric input
Boolean Toggle switch
Color Color picker; accepts hex and RGB CSS values
Enumeration Dropdown populated from a defined set of options (see below)

When Enumeration is selected, an Enumeration Options table appears with Value and Label columns. To add an option, type a value and a label, then click +. To remove an option, click the x button on that row. The defined options appear as a dropdown in the Properties view wherever this component is used.

Functions

Exported Function declarations expose a Parameters field — a chip-list input where you enter the parameter names the function expects. These parameter names are shown to the consumer in the Properties view when they wire up a function binding, so they know what arguments the component will call the function with.

Function bindings are always one way, so there is no Export Type option for functions.

An exported function does not have an editable function body — its implementation is provided by the consumer at the point of use. As a result, the Edit Function menu item is not available on exported function declarations.

Exported functions are the mechanism behind component events. For more on how to design and use them, see Managing Events.

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