Core Concepts: Data Binding

Static UIs are limited. To create truly dynamic experiences, Devity Specs need to interact with data that changes at runtime. Data Binding is the mechanism that connects data sources to the attributes of your Widgets and Actions.

What is Dynamic Data?

Dynamic data is any information that is not known when the Spec is created in the Console but becomes available when the user interacts with the app. Sources include:

• API Responses: Data fetched from backend servers using the ApiCall Action.
• User Input: Values entered by the user into Widgets like TextField, Slider, Checkbox, DatePicker.
• State Data: Information managed by the Devity SDK, such as data passed into a screen (screenData), data stored globally (globalData), or temporary state managed within the workflow.
• Expression Results: Values computed by evaluating Expressions.

The Binding Syntax

Devity uses a specific syntax within string attribute values in the Spec JSON to indicate that the value should be dynamically bound to a data source instead of being treated as a literal string.

(Note: The exact syntax needs to be finalized, but a common approach is using double curly braces or a similar convention.)

Example Hypothetical Syntax: {{ source.path.to.value }}

• {{ ... }}: Delimiters indicating a data binding expression.
• source: Identifies the origin of the data (e.g., api, widget, state, global).
• path.to.value: A path expression (like JSON path or dot notation) to access the specific value within the source.

Examples:

// Binding a Text widget's 'text' attribute to an API response field
{
  "widgetType": "Text",
  "attributes": {
    "text": "Welcome, {{api.userProfile.response.body.firstName}}!"
  }
}

// Binding a Button's 'enabled' attribute based on a TextField's value
{
  "widgetType": "Button",
  "attributes": {
    "text": "Submit",
    "enabled": "{{ expression.isValidEmail(widget.emailInput.value) }}" // Assuming expression binding
  }
}

// Binding an ApiCall Action's parameter to screen data
{
  "actionType": "ApiCall",
  "attributes": {
    "url": "/api/products/{{state.screenData.productId}}",
    "method": "GET"
  }
}

Data Sources

The binding syntax needs to reference specific data sources managed by the SDK:

1. api: Access data returned from ApiCall Actions. Typically referenced by the Action's ID (e.g., {{api.userProfile.response.body.data}}).
2. widget: Access the current value or state generated by input widgets. Referenced by the Widget's ID (e.g., {{widget.emailInput.value}}).
3. state: Access state managed by the SDK, potentially including:
   • screenData: Data passed into the current DevityScreen instance.
   • globalData: Data available globally, potentially set during SDK initialization.
   • Other temporary state set via SetData actions. (e.g., {{state.screenData.orderId}}, {{state.globalData.userId}}).
4. expression: (Potentially) Use the result of evaluating a named or inline Expression.

Resolution

When the SDK encounters a binding expression in an attribute:

1. It parses the expression to identify the source and path.
2. It retrieves the current value from the specified data source (e.g., looks up the API response, gets the widget's current value, accesses its internal state).
3. It substitutes the binding expression with the retrieved value.
4. If the data source value changes (e.g., API call completes, user types in a field), the SDK re-evaluates relevant bindings and updates the UI accordingly.

Data binding is fundamental to making Devity UIs interactive and connected to real-time information.

The precise syntax and available data sources will be formally defined in the Spec Schema.