Component Reference

Embeds another component from the same app into the current layout. This enables reusable component composition -- build a widget once and reference it wherever needed.

Properties

Property	Type	Default	Description
componentId	number	0	The ID of the component to embed. Select from the dropdown in the property panel.

Example

Suppose you have a "Product Card" widget component that displays a product image, title, and price. Instead of rebuilding that layout in every page:

1. Create the "Product Card" as a separate component (type: widget).
2. In your main page component, add a Component Reference widget.
3. Select "Product Card" from the component dropdown.

The referenced component renders inline, inheriting the parent's data context.

Tips

• The referenced component receives the current row context from the parent. If the Component Reference is inside a Repeater, each iteration passes its row data to the referenced component.
• Use Component Reference to avoid duplicating layouts. Build common elements (headers, footers, cards, sidebars) as widget components and reference them throughout your app.
• The dropdown in the property panel shows all components in the current app. The component name is displayed alongside its ID.
• Circular references (Component A embeds B which embeds A) are not allowed and will produce an error.