Data Bindings

The Bindings Inspector allows you to bind parts of your app to data sources. Data bindings can be applied to an entire scene or individual views within a scene.

You can set up data bindings using either the results of an integration request or the local view properties available to a particular view.


Binding to an integration request

One of the most powerful things Qwikly can do is connect your views to real data via external integrations.

To set up an integration-based binding:

  1. Create an integration with at least one request configured
  2. Select the integration and request from the drop-down selectors
  3. Click ‘Fetch’ to get a sample response from the data source
  4. Bind data points from the response by dragging them onto the canvas

add-binding-integration

To remove an integration-based binding, do one of the following:

  • Deselect the integration or request from the drop-down selectors
  • Click the small rectangular overlay on a bound element in the canvas to remove a particular view binding

remove-binding


Binding to view properties

View properties are a special type of data source - this technique can only be used in views that are displayed via a transition that uses the ‘push props’ option. To learn how to set up transitions, check out this page

To setup a view properties binding:

  1. Select ‘View properties’ from the drop-down selector
  2. Click on an view in the canvas to display the xpath input field for that view
  3. Enter an XPath selector in the input to bind the selected view. A simple example would be '.user.name'.

add-binding-view-props

For more info about XPath selectors, check out this page.

To remove a view properties binding, do one of the following:

  • Deselect the ‘View properties’ integration from the drop-down selectors
  • Select a view from the canvas and remove the value from the xpath input field