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.
Before we get started, let’s make sure everything is ready for you to work. Please make sure you’ve read and completed:
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 the root view.1. We’re going to add this functionality to the app you've 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 the application and click Open Dashboard to open the application dashboard.
2. The application dashboard lists details about your application and gives you the ability to manage permissions, versions, and view session information. To open Application Builder, click on the App Builder button in the upper right corner of the screen.
3. Let’s create our new view. Click on the.png?alt=media&token=0c60df38-d516-448e-a31e-96f0f37c4b0f)
button at the top of the Views panel on the left of your screen.
4. Type a name for the new view. Let’s call it
myHiddenView. Then choose List as the view structure type and select Save.
5. With the new blank view in focus, add a Text card to it and set the Text property value to
My Hidden Message!. 
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, name the script openMyHiddenView, then select Save.
9. The script editor will be displayed. Enter in the following code, and notice that the editor helps you along the way with intelligent code completion:
await skylight.openView({viewId: "myHiddenView"})
10. Navigate to File > Save to save the application.
11. Now preview your
Quick Start app in the web client or on a device. Using a script, we've duplicated the built-in
Open View action. You can explore the other scripting API methods and properties that are available in the Scripting API Reference.Last modified 1yr ago