Part 3: Displaying Data

Learn how data binding works in Skylight.

Time Required: 15 Minutes

Now that you’ve created some cards and learned how to access the script logic behind them, let’s start working with data.

In Skylight, you can display data in your application by binding properties of your views and cards to the underlying data that your application is managing. Binding is the process through which a UI element is linked to data. This will determine how that element will be displayed in your application. When the underlying data changes, the bound UI element will change to reflect the changed data's value.

There are a number of data sources at your disposal when creating Skylight applications. In this example, we’ll use application data to show you how the data binding process works. Application data is a part of your application and cannot be changed during execution. It’s a great place to store configuration information and other static data. Read the article on Data Management to learn more about application data and how it works.

Setup

Before we get started, let’s make sure everything is ready for you to work. Please make sure you’ve read and completed:

Binding Data to UI

As mentioned before, application data is a great place to store configuration and other static data that won’t change as a user works with your application. In this tutorial, we’re going to create some application data and convert our quick start application into a rudimentary assembly app with the help of some data binding. Let’s get started!

  1. First, log into Skylight and open your Quick Start application from the previous tutorial in Application Builder.

  2. Let’s clean up our app a little. Delete the Open View and World cards in your root view by right-clicking on each and selecting Delete. Delete the myHiddenView view by clicking the three dots next to the name and selecting Delete. This should leave you with just a root view with a single text card.

  3. To get started, we’re going to add some application data so that we have some information to bind to. Select the Application icon in the upper left.

4. Then, select Edit Data.

5. Application data is stored in JavaScript Object Notation (JSON) format. Let’s enter some data to get us started. In the text box, enter the following JSON object and click Save:

{
"processName":"Build Assembly 123",
"steps":[
{
"id":"1",
"title":"Prepare Component 1"
},
{
"id":"2",
"title":"Attach Component 2"
},
{
"id":"3",
"title":"Attach Component 3"
}
]
}

6. Let’s use data binding to set the value of the first card to the processName from our application data. Click on the views icon in the upper left to return to the view of the application.

7. Select the card with the Hello text in your root view. Make this a Full sized card using the card properties on the right.

8. Hover your cursor over the Text property’s input box. A small icon pops up showing curly braces {…}. This means that the property can be bound to data. Click on this icon to open a Binding logic dialog. Binding logic in Skylight is surrounded with two sets of curly braces surrounding JavaScript statements.

9. As we want this card to show the title that we’ve set in our application data, we’re going to set its value to:

{{ application.data.processName }}

10. Click Commit to close the Binding logic window and then save your application.

11. If you look at your application in a client, the first card of your application should now reflect the value stored in the Application data.

12. Now let’s set up our application so that selecting the card that displays the process name opens a view containing a list of the steps for that process. With our card still selected, add an action as in the previous exercise to open a new view. Any label will suffice (e.g. View Steps). Set the name of the script to openStepsList and make the body of the script reflect the following code. Back out of the script editor, save the action, and then save the application.

await skylight.openView({viewId: 'stepsList'})

13. If you were to run your application, the code you entered above will produce an error because the view doesn’t exist yet, so let’s create a new view with a list structure and name it stepsList. In this view we’ll bind some cards to a collection of data and present it to the user.

14. In a previous step, we bound the text of a card to a single data value. We can also repeat a card for each item in an array by binding to an array instead of a single object. Skylight allows us to do this through a concept called context. To see how this works, drag a Text card into your new stepsList view. We’re going to use this card as the template for our array items.

15. In the Properties panel on the right, under the Databind section, set the Context for this card to application.data.steps. This tells Skylight that you want to show a copy of this card for every item in the array.

16. If you saved and ran your application, you’d see three cards, one for each of the data items in your array. The text value for each still reads Text. Let’s data bind that value. In the same card, open up the Binding logic dialog for the Text property and enter the following:

{{ context.title }}

17. Click Commit to save this binding logic. When you provide a data binding context to an element in Skylight, you can access the properties of each data item through the context object in your data binding expressions. In this case, each card will display the title property of the data to which it is bound. 18. Now open your application to see the results. When you click on the process name card in your app, you’re presented with a view where each card represents and displays a step from the data.

The web client in Chrome developer debug mode to provide the mobile frame.