Part 2: Adding Logic

Learn how to create views and add event scripts

Time Required: 5 Minutes

In Part 1: Hello World we created our first application in under 5 minutes, but our Hello World! application doesn’t do very much. So let’s change that and start to layer some logic into our solution.

Setup

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

Adding Logic to Your Application

In the first part, you saw that the Skylight user experience is made up of one or more views that contain cards. You know that the default view of the application is called root. Now let’s add some logic to open a different view when you select a card in our root view.

  1. We’re going to add this functionality to the app you already created. Navigate to the Applications section of the Skylight web portal like you did the first time. You should see your Quick Start app appear in the list -- if not, refresh the page. Hover your mouse over it and click Open Dashboard to open the application dashboard.

2. You should now see the application dashboard that lists details about your application and gives you the ability to manage permissions, versions, and view session information. To open Application Builder, simply click on the App Builder button in the upper right corner of the screen.

3. Let’s create our new view. Click on the plus sign next to the search box at the top of the Views panel on the left of your screen.

4. Type a name for your new view, let’s call it myHiddenView. Then choose List as the view structure type and select Save.

5. With our new blank view in focus, add a text card to it and set the text property’s value to My Hidden Message!. Let’s also make the card a bit wider by selecting 2/3 for the Size property in the properties on the right.

6. Developers can add event scripts that contain logic to respond to user and system actions. These scripts are written in JavaScript and interact with Skylight’s scripting API to make Skylight do different things. In our case, we want to show our new hidden view by selecting a card in the root view. To do this, let’s go back to our root view by selecting it from the list of views on the left of the screen.

7. Let’s add a new Text card to the root view with the text Open View. On the bottom of the card’s properties panel on the right, you’ll see an Events & actions section. Click on the plus sign next to the On Select box.

8. The label for this action is only used if there are multiple actions. As we'll only be using one action, any label will do, such as Open Hidden View. The icon is optional. Selecting the action dropdown will provide a couple possibilities. The built-in Open View action would accomplish what we need without needing to use code, but let’s re-create this functionality so that you can see how to add your own custom event scripts. Select New script.

9. We'll first call our script openMyHiddenView. Below the Script name input field, you’ll see an area where you can enter in your code. Enter in the following code, and notice that the Skylight script editor helps you along the way with intelligent code completion:

await skylight.openView({viewId: "myHiddenView"})

Save this script by selecting Back in the lower right of this editor dialog, save the action, then save the application.

Now preview your Quick Start app in the web client or on a device. We’ve duplicated the built-in Open View functionality with our own code. You can explore the other API methods and properties that are available in the Scripting APIs.