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 created 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.

Creating a Binding

Binding a Property

Properties that can be data bound are displayed with aindicator in Application Builder. To create a binding, select the indicator to display a dialog for inputting your binding.

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.

Binding within HTML

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.

Context

A data binding context is object or array that holds data that you can reference from your bindings on a card of view.

If the context 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.

If the context is null or undefined, the card will not be generated.

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. For instance, if there is an array of tasks in session.data, the context could be session.data.tasks.

Another common context is the skylight.sessions array, which holds all open sessions visible to the user.

Refer to the Data Management section for more details on utilizing local, session, and application data in Skylight.

Adapter

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");