Event-Driven Logic
Using Skylight Application Builder, event-based logic that executes locally on clients can be configured to trigger in response to application, view, and card events. Depending on the event type, you can utilize either pre-built Actions or Custom Actions that execute an Event Script. Event Scripts are written in JavaScript inside of Application Builder and interact with the Skylight Scripting API.
Examples include:
- When a user opens an application, a previously created session is set so that they see their up-to-date progress.
- When a user opens a new view, the time is recorded into the session data to track when the user has started the task.
- When a user selects a card, an update is made to the session data to signify that the task has been completed.
These examples are purposefully generic – the true power of events scripts is that you as a developer can tailor the behavior of your Skylight application to fit your exact needs.
To create an event script for an application event, select the 
button on the left sidebar in Application Builder and select Events. Select the event to open a dialog for authoring the script.
This event occurs when the application is first selected from the list of applications or the user returns to Skylight after exiting Skylight with the application open.
The
event object will be accessible in the script with the following properties:- event.event: name of the event (i.e.
application_opened) - event.applicationId: id of the application (e.g.
5e8ce5bfab9f8886b63d318a)
This event occurs when the user exits the application or exits Skylight with the application open.
This event occurs for all other events, including application, view, and card events.
The
event object will be accessible in the script with any of the properties that would be normally be associated with the event being called. To access a particular view's events, select the view from the list on the left. Actions can then be added to the events that appear in the Events & actions section of the Properties panel on the right side.
This event occurs when the view is opened, which can occur if:
- The user selects this application and this view is the root view.
- This view was opened using
skylight.openViewin a client-side script. - This view was opened using an
Open viewaction. - This view was opened as a result of the user re-opening Skylight after exiting Skylight with this view open.
Currently, this event is not triggered if a view is opened as a result of using the back button on the web client, or performing a
Navigate Back action on the smart glasses client (e.g. swipe-down on Glass EE2 or a long-press on the select button on Vuzix M400).The event object is accessible in this script with the following properties:
- event.event: the name of the event (i.e.,
view_opened) - event.applicationId: the application’s id (e.g.,
5e8ce5bfab9f8886b63d318a) - event.viewId: the view’s id (e.g.,
root)
This event occurs when the view is closed, which can occur if:
- The user goes to the previous page.
- The view was closed using
skylight.closeView. - The user exited Skylight with this view open.
The event object is accessible in this script with the following properties:
- event.event: the name of the event (i.e.,
view_closed) - event.applicationId: the application’s id (e.g.,
5e8ce5bfab9f8886b63d318a) - event.viewId: the view’s id (e.g.,
root)
This event occurs when a bluetooth input is received.
The event object is accessible in this script with the following properties:
- event.event: the name of the event (i.e.,
bluetooth_input) - event.applicationId: the application’s id (e.g.,
5e8ce5bfab9f8886b63d318a) - event.viewId: the view’s id (e.g.,
root) - event.bluetoothInput: the Bluetooth input (e.g.,
01429391)
This event occurs when a voice command added using
skylight.voice.command.add is recognized.The event object is accessible in this script with the following properties:
- event.event: the name of the event (i.e.,
voice_command_recognized) - event.applicationId: the application’s id (e.g.,
5e8ce5bfab9f8886b63d318a) - event.viewId: the view’s id (e.g.,
root) - event.data: the data of the recognized command
- event.data.value: the value of the recognized command
- event.data.group: the group of the recognized command, if any
To access a particular card's events, select the card in the Workflow area. Actions can then be added to the events that appear in the Events & actions section of the Properties panel on the right side.
This event occurs when a user selects a card.
The event object is accessible in this script with the following properties:
- event.event: name of the event (i.e.,
card_selected) - event.applicationId: the application’s id (e.g.,
5e8ce5bfab9f8886b63d318a) - event.viewId: the view’s id (e.g.,
root) - event.cardId: the card’s id (e.g.,
a73a32cc-3783-4d02-bb30-7e0ea4ab1ff4) - event.data: if there is data that is bound to this card, this will have that data. See Data Binding and Adapters for details.
It is possible to add multiple actions to an On Select event. In this case, an action sheet will appear when the card is selected, allowing the user to select one of the actions (distinguished by the Label and Icon of the action).
Action sheet displayed on smart glasses client
The following actions can be configured for view and card events:
When triggered, a specified view or card in a view will be displayed and brought into focus.
The Open View action cannot be configured to open collection views or cards with a data binding context that is data bound to an array.
When triggered, a specified event script will be executed.
The navigation menu allows users to access top-level Skylight features (such as settings, applications, and sign out) from any level of an application. Using Application Builder, developers can also inject custom actions to the navigation menu.
.png?alt=media&token=28449dd8-65fa-48c0-9cab-3594f4a2432b)
Application navigation menu with custom actions
To add custom actions to the navigation menu, select the button on the left sidebar in Application Builder and select Menu. You can then add actions or custom actions that execute an event script for each menu item.
Action adapters allow developers to dynamically change the list of actions available from both card action sheets and from application navigation menu items. In Application Builder, developers attach these actions to an adapter, which is then used to dynamically generate actions.
Example: Dynamic app nav menu item, driven by action adapters.
From the "Views" page in Application Builder, select the desired card you want to modify; then, in the properties panel, select the action from the "On Select" menu. In the dialog that appears, select an existing adapter or create a new one.
Adding an adapter to an existing card action
From the "Application" page in Application Builder, select an item from the "Menu" section. In the dialog that appears, select an existing adapter or create a new one.
This application action already has an adapter set
When viewing the list of adapters, all adapters including card and view adapters will be listed. Only select an action adapter; card and view adapters will not work here.
When a new action adapter is created, it will be pre-populated with the default script for the adapter.
The default adapter script
The first
if block simply checks to make sure that the action adapter event is supported on the device. See Feature Status to get a list of Skylight versions that support action adapter events.The script returns an array that has one item: the original action event.
The script can be modified to return an empty array if no action from this adapter should be shown. If the script returns one or more events in the array, an action will be added to the card/application action list for each event. The script must not return null.
An event is an object with the format:
{
"eventType": "select",
"icon": { "name": "25ba" },
"label": "Click me",
"script": {
"scriptId": "selectAppActionHandler"
},
"adapter": "selectAppActionAdapter"
}
The following is an example of returning the event with a modified label and an additional property:
An adapter script that changes the returned event's label and adds an additional property
When an action script is called as a result of a user selecting the event, the event that was selected is included in the
event.event property in the action script. The following is a console log of the event object in an action script that was called by selecting the event returned from the action adapter example above:
This is the event object from an action script
This console log shows that the root
event object has a property called event, which is the event returned by the action adapter. In this example, we show that the additional property (called additionalProperty that was added in the adapter is also passed through).
Last modified 1yr ago