Interaction

Controls in a panel work on their own – a toggle flips, a slider drags, a text field takes typing. To make something happen when they are used, add an event to the panel's object with the UI Interaction trigger, then add actions as for any other event.

Add a UI Interaction event

1. Select the User Interface object and add an event in Object Events.
2. Choose the UI Interaction trigger. It is offered only on User Interface objects.
3. Pick the Interaction first, then the View it should listen to. The view picker shows the panel's hierarchy; views that can't produce the chosen interaction are greyed out.
4. Add the actions.

Pick the interaction before the view: changing the interaction clears a view that can't produce it. Views appear in the picker under their Name – naming the views you connect events to keeps the list readable on a busy panel.

If you later delete a view that an event listens to, the event shows Missing View with a warning, and it never fires until you pick another view.

Which views fire what

Interaction	Fires when	Views
Tap	the view is tapped	Button, Label, Image, Shape
Toggled	the toggle is switched on or off	Toggle
Value Changed	the value changes	Toggle, Slider, Stepper, Segmented Control
Text Changed	the text in the field changes	Text Field

Progress View, Divider, Spacer, Web View and the stacks fire no interactions.

A few things to know:

• Labels, images and shapes become tappable only once an event listens to them. Without one they are decoration, and on a screen-space panel touches pass straight through them.
• Sliders fire Value Changed continuously while they are dragged, and Text Fields fire Text Changed on every keystroke. Keep the actions on those events light, or the experience does the same work many times a second.
• The event fires on every change and doesn't check the new value – a Toggled event runs its actions whether the toggle went on or off.

Using the value in a script

Every UI Interaction carries three values: which view fired (uiNodeId), which interaction it was (uiInteractionKind), and the new value (uiValue) – true or false for a toggle, a number for a slider or stepper, the selected index for a segmented control, the text for a text field. A Run Script action reads them from scriptContext.sourceEvent:

// Run Script on a Slider's Value Changed event
var opacity = scriptContext.sourceEvent.uiValue;
var lamp = scene.findEntity({ name: 'Lamp' });
lamp.representation.opacity = opacity;

This is how a toggle's on and off can lead to different results, and how a slider can drive a property continuously.

Common patterns

• Show or hide content – a Button's Tap event with Add to Scene, Remove from Scene or Toggle Object shows another object, or closes the panel itself.
• Switch between variants – one Button per variant, each with a Tap event that removes the current model and adds the next.
• Next scene – a Button's Tap event with a scene transition.
• Open a website – a Button's Tap event with Open Link.

Changing a panel while it runs

Actions work on whole objects, so the event system shows, hides and swaps entire panels. To change one view inside a panel while the experience runs – update a label's text, hide a button, move a slider – use a script: find the view by its Name with findView, then set its properties, or bind it to a variable. See the scripting guide's User Interface page.

Set a panel up from a Run Script on the panel's own On Will Appear event: the views exist by then, and the panel isn't visible yet, so nothing jumps. See Design Guidelines.

A label can also follow a variable without any script of its own, through ${name} in its text – see Text & Variables.