- 02 Jun 2022
- 2 Minutes to read
- DarkLight
- PDF
Events
- Updated on 02 Jun 2022
- 2 Minutes to read
- DarkLight
- PDF
Event categories
Events fall under the following categories.
- App lifecycle events
- Page lifecycle events
- Component events
- Variable events
- Other events
- Custom events
Event schema
Currently, events do not expose their schema to Composer fully, so while there's a definite schema to the data available in the eventValue
output of an event node, you need to manually utilize it via formulas, e.g. writing outputs[:id].eventValue.params
to access the parsed parameters of the App brought to foreground via URL event.
App lifecycle events
App lifecycle events have to deal with the running application as a whole.
App loaded
Available on the global canvas. Executed when the app has started and is ready to start executing logic.
App brought to foreground via URL
Mobile-only. Executed when the app was brought to the foreground via a custom URL scheme link. For the default AppGyver Preview app, the URL scheme is sapappgyver://
. You can define a custom scheme for your app binary in the Build Service.
Event schema
The examples below assume the app was brought to foreground via the URL sapappgyver://auth?token=abc123
.
Key | Example | Description |
---|---|---|
path | sapappgyver://auth | Path part of the URL. |
params | {token: "abc123"} | Object containing the parsed query parameters from the URL. |
url | sapappgyver://auth?token=abc123 | Full unparsed URL. |
Page lifecycle events
The following events happen in the context of a single page.
Page mounted
Executed once when the page is added to the navigation stack, either by being the root page or via the Open page flow function.
Refreshing a page in the browser or navigating directly to a route also causes the Page mounted event to be fired.
Page focused
Executed when the page becomes focused, including the following conditions:
- The page is pushed to navigation stack with Open page
- The page is the topmost in the navigation stack of a tab the user switches back to
- A page above the page is popped from the navigation stack (via e.g. Navigate back or native back button)
Page blurred
Executed when the page becomes blurred, i.e. loses focus.
Page nav bar item clicked
Executed when an item in the navigation header bar is clicked. The event value contains the clicked button's index.
Component events
The following events happen in the context of a single component.
Component tap
Executed when the component is tapped/clicked by the user.
If there are logic nodes attached to the tap event, a tap animation is played when the component is tapped.
This event is available for all view components.
Component onChange
Executed when the component's input value changes, e.g. the user finishes typing a new value in an Input field or a new option is selected in a dropdown.
Event value contains the new input value.
Component onFocus
Executed when an input component becomes focused, e.g. the user selects an Input field.
Component onBlur
Executed when an input component is blurred, i.e. loses focus.
Custom events for composite components
Composite components can define custom events.
Custom events should always map to actual primitive component events inside the composite, linked via the Trigger event node.
For example, a product card composite with Add to cart and Change variant buttons could have events Add to cart button tap and Change variant button tap, allowing whoever's using the composite to wire the desired logic correctly without having to edit the composite component itself.