Binding data in Viz Flowics means linking properties of graphic elements such as Building Blocks to information data coming from a Data Provider.
Using bindings to connect data to graphic elements offers some benefits:
Real-time Updates: By directly binding graphic elements to data sources like a mechanic data provider or external APIs, you ensure that your graphics reflect the most current information available. Any changes or updates to the external data automatically update the graphics without requiring manual intervention.
Dynamic Visualization: Bindings enable your graphics to dynamically adjust to changes in the underlying data. Whether it's new data, modifications, or deletions, the graphics respond accordingly, providing users with an interactive and informative visualization.
How to Identify Bindable Properties?
Most graphic elements have bindable properties. Depending on the element, you'll find binding possibilities in properties like values of Texts, sources of Images, backgrounds of Rectangles and Containers, and many more.
Elements | Bindable Properties |
Text |
|
Image |
|
Rectangle |
|
Dynamic Content List |
|
When selecting an element look for this blue button next to some of the element's controls it in the Inspector panel (right side of the editor). It means that property can be bound.
Clicking this button will trigger a modal dialog where you'll be able to search through all available data sources and bind that property to some value.
Using the Binding Modal
Once you click on the blue button a modal pops up
| Description |
| It's the Data Provider or Dynamic Content List where the data is coming from. |
2. Search Variable | Search variables by their names |
3. Array Selector | Allows you to select a specific INDEX from the array of the data: When binding to a property inside an array, the array selector lets you choose which item from the array it will bind the property, in this example, we are binding to the Best_lap property of the first element of the Untitled array |
4. Variable | The variable you want to bind / link to the element's property. You'll only be able to select variables of the types that can be bound to that specific property. |
5. JSON pointer | This option allows you to manually set the path of the variable you're looking for, in case it is not listed above. Read more about JSON Pointers below. |
6. No binding | Use this option to unbind/unlink the data previously selected. |
The variables listed were declared within the JSON schema. If they haven't been added to the schema, they won't be listed.
JSON Pointer in detail
Variables listed in this modal dialog, along with their names and types, are described in what is known as a JSON Schema. Think of it as a dictionary of all the available variables, and most data vendors and external APIs provide a complete and accurate JSON Schema.
But you may come across cases —often due to recent updates in vendors' APIs, or when using custom datasets— where you know a certain variable exists in the dataset, but it does not appear in the list. Or maybe you know your dataset very well and want to use a very specific variable, that is found inside a complex structure like an object that's inside another object, that's in an array of more objects, and so on.
For this kind of case, you can use JSON Pointers, which are a way of describing the path to a variable.
The path is represented as strings with a series of tokens separated by / , where each token corresponds to a key or index within the JSON object or array. E.g. given the following JSON document:
{
"name": "John",
"age": 30,
"address": {
"city": "New York",
"zip": 10001
},
"hobbies": ["reading", "traveling", "cooking"]
}
Here are some examples of JSON Pointers:
/name: Refers to the value "John"./address/city: Refers to the value "New York"./hobbies/1: Refers to the value "traveling" (since arrays are zero-indexed)
With JSON Pointers, it is possible to set up a binding to a variable that is not described in the schema of the data.
Here is an example: field01 doesn't appear in the list because it is not present in the schema but exists in the JSON document, so you can bind to it this way. Below the path and type inputs, you'll find a validation text that will help you know if everything is ok, or if there are syntax errors, or if the path you try to reach is not found in the data payload.
Depending on the element property you are binding to, and the value found in the specified path, you can change the type of the variable. This will improve formatting options and conditional visibility operators.
