Data Binding
Data binding is a process that provides synchronization between a data source and UI components. Whenever the value of the underlying data source changes, the UI component automatically updates. This allows you to very quickly and easily create dynamic and connected applications with very little code.
Using Skylight Application Builder, you can data bind properties on views and cards to local, session, or application data. You can also add inline data bindings within HTML cards.
Refer to the Data Management section for more details on utilizing local, session, and application data in Skylight.
Properties that can be data bound are displayed with the data binding button 
when you hover over the left side of the property. To create a binding, click the button to open the binding dialog.
For each data bind you include a template expression that is wrapped by
{{ }} . The expression is evaluated at runtime and returns a value. By default, the expression is setup to return a static value. 
Replace the static value with a path to your data object (e.g.
{{ context.stepInstructions }}) to bind to it.
Data binding template expressions can also be added inline on HTML cards. Not only can you dynamically update text values, but also styles and layout within the HTML.
A data binding context is object or array that holds data that you can reference from your bindings on a card or view.
Typically, the context is referenced from application, session, or local data in your application (
skylight.application.data, skylight.session.data, orskylight.local.data). Properties of those data categories can also be specified as the context. Refer to the Data Management section for more details on utilizing local, session, and application data in Skylight.
If the context that is set is an array, the card will be repeated once for every item in the array and each card will be passed that item as its data source. For instance, if there is an array of tasks in
session.data, the context could be session.data.tasks.If the context is specified but resolves to null or undefined, the card will not be generated.
The context for a view cannot be bound to an array. The context is used only to limit the data context.
A data binding adapter is a script that acts as a filter or mapper between the context and the binding.
It takes in the context as the
event.data variable and returns either an object or array of objects that are then passed into the data binding.If the adapter returns null or undefined, the card will not be generated.
To create an adapter, select the Adapter dropdown on the Properties panel in Application Builder.
Then you can author your script in the dialog.
Here is an example of an adapter script that filters an array of items to only include those that have the color property set to
red or orange.adapter-filterarray_colorAdapter
//event.data has the context that was specified in the data binding
const items = event.data;
//Return a filtered version of this list
return items.filter(item => item.color === "red" || item.color === "orange");
Last modified 2yr ago