Appearance

UIView ​

A view node inside a UI panel.

Reach via representation.rootView for the panel's root content, or representation.findView(idOrName) for any descendant. The same class represents every kind (label, button, slider, etc.) – kind reports which one, and setProperty / getProperty accept keys appropriate to that kind. Setting an unsupported key for the kind is a no-op.

Mutations apply live to the existing UIKit view (no rebuild – the rendered texture refreshes next frame on iOS; visionOS's view attachment picks up the change automatically). For input controls whose value field is .reference(...), setProperty also writes back to the bound variable so observers (label ${var} templates, other reactive bindings) update – same path the user-drag/tap valueChanged action takes. Literal fields don't write back.

Example:

javascript
const rep = scene.findEntity({ name: "Settings" }).representation;
rep.findView("save-btn").setProperty("title", "Done");
rep.findView({ name: "volume" }).bind("value", "vol");

Properties ​

id ​

  • Type: string
  • Stable view ID set in the experience model.

isEnabled ​

  • Type: boolean
  • Interactive flag. Applies to: any kind.

isHidden ​

  • Type: boolean
  • Visibility flag. Applies to: any kind.

isOn ​

  • Type: boolean
  • On/off state. Applies to: toggle.

kind ​

  • Type: string
  • View kind as a string: "label", "button", "slider", "toggle", "textField", "stepper", "segmentedControl", "progressView", "image", "divider", "shape", "hStack", "vStack", "zStack", "spacer", "webView".

name ​

  • Type: string
  • Optional human-readable name (mirrors representation.name).

opacity ​

  • Type: number
  • View opacity, 0–1. Applies to: any kind.

placeholder ​

  • Type: string
  • Placeholder text. Applies to: textField.

progress ​

  • Type: number
  • Fill progress, 0–1. Applies to: progressView.

selectedIndex ​

  • Type: number
  • Currently selected segment. Applies to: segmentedControl.

text ​

  • Type: string
  • Text content. Applies to: label, textField.

title ​

  • Type: string
  • Button title. Applies to: button.

value ​

  • Type: number
  • Numeric value. Applies to: slider, stepper, progressView, segmentedControl.

Methods ​

animateTo() ​

javascript
animateTo(properties: Object, duration: number, options?: Object): Promise

Animate one or more numeric view properties to target values.

Example:

javascript
await label.animateTo({ opacity: 0 }, 0.3, { timingFunction: 'easeOut' });

Parameters:

  • properties (Object) - Map of propertyName → target numeric value.
  • duration (number) - Seconds.
  • options (Object) (optional)
  • options.timingFunction (string) (optional) - 'linear' | 'easeIn' | 'easeOut' | 'easeInOut'

Returns: Promise

bind() ​

javascript
bind(propertyName: string, variableName: string, options?: Object): JSUIView

Bind a property to an experience variable. Sugar for bindProperty.

Example:

javascript
panel.findView({ name: 'vol' }).bind('value', 'volume');

Parameters:

  • propertyName (string) - Property to bind ('value', 'isOn', 'text', ...). Kind-specific.
  • variableName (string) - Variable identifier in the experience.
  • options (Object) (optional) - { scope: 'segment' | 'experience' }. Defaults to 'segment'.

Returns: JSUIView

bindProperty() ​

javascript
bindProperty(propertyName: string, variableName: string, options?: any): void

Bind a property to an experience variable at runtime. Variable changes flow into the live view; for input controls, user input flows back into the variable. Calling bindProperty again on the same property replaces the existing binding. Does not mutate the saved model – bindings live with this proxy and dissolve when JS releases it (or when the panel rebuilds).

Example:

javascript
slider.bindProperty("value", "volume");
slider.bindProperty("value", "globalVol", { scope: "experience" });

Parameters:

  • propertyName (string) - Property to bind ("value", "isOn", "text", etc.). Kind-specific.
  • variableName (string) - Variable identifier in the experience.
  • options (any) (optional) - Optional { scope: "segment" | "experience" }. Defaults to "segment".

Returns: void

fadeIn() ​

javascript
fadeIn(duration?: number): Promise

Fade view to fully opaque.

Parameters:

  • duration (number) (optional)

Returns: Promise

fadeOut() ​

javascript
fadeOut(duration?: number): Promise

Fade view to fully transparent.

Parameters:

  • duration (number) (optional)

Returns: Promise

getProperty() ​

javascript
getProperty(name: string): any

Read a property by key

Example:

javascript
var title = button.getProperty("title");
var value = slider.getProperty("value");

Parameters:

  • name (string) - Property key (e.g. "text", "value", "isHidden"). Keys are kind-specific.

Returns: any

off() ​

javascript
off(subscriptionId: string): void

Remove an interaction listener by subscription id.

Parameters:

  • subscriptionId (string)

Returns: void

on() ​

javascript
on(type: string, listener: function): string

Subscribe to a UI interaction on this view.

Supported types per kind: - 'tap' → button - 'valueChanged' → slider, segmentedControl - 'toggled' → toggle - 'textChanged' → textField

The listener receives { uiNodeId, uiInteractionKind, uiValue? }, matching the payload authored UI-interaction events emit.

Example:

javascript
slider.on('valueChanged', function(e) { console.log('slider →', e.uiValue); });
button.on('tap', function() { console.log('clicked'); });

Parameters:

  • type (string) - Interaction type.
  • listener (function) - Callback receiving the event payload.

Returns: string

once() ​

javascript
once(type: string, listener: function): string

Subscribe to a single UI interaction; auto-unsubscribes after first fire.

Parameters:

  • type (string)
  • listener (function)

Returns: string

setProperty() ​

javascript
setProperty(name: string, value: any): void

Write a property by key. Live-updates the rendered view; for input controls bound via .reference, also writes back to the bound variable so observers see the change. No view tree rebuild.

Example:

javascript
label.setProperty("text", "Hello");
slider.setProperty("value", 0.5);
view.setProperty("isHidden", true);

Parameters:

  • name (string) - Property key (e.g. "text", "value", "isHidden"). Keys are kind-specific.
  • value (any) - New property value. Type must match the property; mismatches are no-ops.

Returns: void

unbind() ​

javascript
unbind(propertyName: string): JSUIView

Remove a runtime binding installed via bind().

Parameters:

  • propertyName (string)

Returns: JSUIView

unbindProperty() ​

javascript
unbindProperty(propertyName: string): void

Remove a runtime binding installed via bindProperty. The property keeps its current displayed value but no longer reacts to the variable; user input on the property no longer writes back. No-op if no binding exists for propertyName.

Example:

javascript
slider.unbindProperty("value");

Parameters:

  • propertyName (string) - Property previously passed to bindProperty.

Returns: void

Internal API dev only ​

WARNING

These methods are internal implementation details and not part of the public API.

subscribeToEvent() internal ​

javascript
subscribeToEvent(eventType: string, callback: any): string

Internal: subscribe a JS callback to a UI interaction. Runtime js wraps this as view.on(type, listener). Native attaches a UIAction on the matching UIControl.Event for the view's kind.

({ uiNodeId, uiInteractionKind, uiValue? }).

the view's kind. Pass to _unsubscribeFromEvent to detach.

Parameters:

  • eventType (string) - "tap" | "valueChanged" | "toggled" | "textChanged"
  • callback (any) - JS function invoked with an event payload

Returns: string

unsubscribeFromEvent() internal ​

javascript
unsubscribeFromEvent(subscriptionId: string): void

Internal: detach a subscription previously created via _subscribeToEvent. Runtime js wraps as view.off(id). No-op for unknown ids.

Parameters:

  • subscriptionId (string)

Returns: void