Nearly every property – colors, dimensions, and text values, to name a few – support Data Binding. This means that instead of providing hardcoded values, you can instead use values provided by a network request, form data, or any other data context that’s available in Shipcode.

To attach data, hover over any input field in the Right Sidebar.

If a field supports Data Binding, a + icon will appear next to the field’s name. Click the icon to reveal the Data Inspector.

By default, several types of data (referred to as “sources”) are always available:

• Environment Variables: These are application-wide variables that you can define and customize on a per-environment basis. For more information, see “Environment Variables” in Project Settings.
• DeviceInfo: This source provides information about the end user’s device, such as their operating system
• GlobalState: This allows you to select data that has been stored in the Global State, such as the temporary or persistent data stores. Data is added to Global State through Flows; refer to the Set State Flow Node for more information.
• RouteData: This provides information about the route that was used to navigate to the current Layout, such as the path and query parameters. For more information, refer to the Routing tutorial.
• OverlayData: If the Layout is rendered inside an Overlay, this will be populated with data that was specified using the Set Overlay Data Flow Node.

In addition, any other data sources available in the current context will be displayed. When in Design Mode, these typically represent any Data Zone components that are an ancestor to the currently selected component. For more information, refer to the Data Zone Component documentation.

Selecting Data

Click the radio button next to any item to select it. If an item has additional properties, you can “drill down” by clicking the “>” icon.

When you select an item, note that the input field is updated with the appropriate FQL used to select the property from the data source.

You can preview the selected data and further customize the FQL by using the Preview section of the Data Picker. Any changes you make to the FQL will be reflected in the input field.

Note that any field that supports Data Binding also supports manual FQL entry – you don’t need to use the Data Picker, though doing so generally makes it easier to see what data is available in the current context.