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.
Before we get started, let’s make sure everything is ready for you to work. Please make sure you’ve read and completed:
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 
button next to the card and selecting Delete. Also, delete the
Open View and World cards in your root view by clicking the myHiddenView view. This should leave you with 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, under the Data section, select Edit Data.
5. Application data is stored in JavaScript Object Notation (JSON) format. 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. Next, let’s use data binding to set the value of the first card to the 
Views button in the sidebar menu to return to the view of the application.
processName from the application data we just entered.
Click on the 
7. Select the card with the
Hello text in your root view. Make this an Auto sized card (if it is not already) using the segmented control for the "Size" properties on the right.8. Hover your cursor over the Text property’s input box. A small icon 
will pop up. This means that the property can be bound to data.
Click on the icon to open the 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 property that we’ve set in the application data, we’re going to set the binding logic to:
{{ application.data.processName }}
10. Click Commit to close the Binding logic window and then Save your application.
11. If you preview 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 in the properties panel to open a new view. Set the label to
View Steps, the name of the script to openStepsList, and select Save.
13. Add the following code to the script editor and then Save the application.
await skylight.openView({viewId: "stepsList"})
14. 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.
15. 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, insert a Text card into your new
stepsList view. We’re going to use this card as the template for our array items.
16. 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.
17. 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 }}
18. 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.
19. Now Save the application and open the preview 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.
Last modified 1yr ago