The Data Zone is a container component that serves a critical role in Shipcode by providing a defined data context to all of its children components. It acts as a gateway for data, allowing you to easily manage and access information from various sources within that section of your Layout.

For more in-depth guidance, refer to the Data Zone tutorial.

Available Properties

The primary functionality of the Data Zone is configured in the Settings Panel.

Data (Settings Panel) Defines the data available to all components nested within the Data Zone. Two sources are available:

• Default: Used to provide static JSON or to select and expose data from the current context, such as an upstream Flow or Environment Variables.
• Form: Tracks user input from form components nested within the Data Zone. Form data is accessible via the parent Data Zone and referenced by the unique ID of each form element.

Data Zone Type (Settings Panel) Optionally defines a typed data structure for the Data Zone by linking it to a named Data Zone schema. Select None for a simple, untyped Data Zone. Select Create New Data Zone to open the schema editor, where you can define a schema and create mocks.

• Schema: Defines the fields the Data Zone expects, including field name, type, and whether the field is required. Shipcode uses the schema to provide field-level hinting in the Data Picker.
• Mocks: Named sample datasets that conform to the schema. Mocks allow you to design and preview your layout using realistic data before connecting a live data source. Multiple mocks can be defined and switched between in the editor.

On Inputs Changed (Settings Panel) Triggers a connected Flow when the data or input state within the Data Zone changes. Select a Flow from the dropdown.

Active Slot (Settings Panel) Controls which slotted child component is currently visible. Only the child whose Slot value exactly matches the Active Slot value will render. If Active Slot is empty, all children render regardless of their Slot assignments. Bind this property to a Flow response or state variable to drive conditional display dynamically. See Slot below.

Native ID (Settings Panel) A unique identifier used for cross-platform debugging and low-level native development. Provides a consistent reference for the component across iOS, Android, and Web.

Slot (Settings Panel) Assigned on a child component nested inside the Data Zone. Sets the visibility label for that child. A slotted child is hidden by default and only renders when the parent Data Zone's

Accessing Data Zone Fields

Child components access a Data Zone's data using the $(TagName) scope in FQL — for example, {{ $(Product).title }}. When Data Zones are nested, $this resolves to the innermost context. Use $(TagName) to reference a specific named Data Zone when multiple are present.

For full guidance on working with Data Zones, refer to the Data Zone tutorial.