Variable

Variables in Zeroplat are temporary storage containers that hold values during the lifecycle of your page. They can store primitive values (strings, numbers, booleans) or complex objects (arrays, JSON). Variables make it easy to manage state across components, queries, and user interactions.

Why Use Variables?

• Store temporary state (e.g., active tab, search filter, modal open/closed).
• Pass data between queries and components without relying on external sources.
• Toggle UI behavior dynamically (e.g., enable/disable buttons, show/hide modals).
• Cache values locally instead of re-fetching data.
• Build dynamic expressions that update automatically when the variable changes.

Anatomy

1. Explorer (left)
   • Variables appear under the Explorer tree.
   • Example: variable1.
2. Editor (center)
   • Initial value: Define the starting value of the variable.
   • Supports static values or bindings (using {{ }}).
   • Example: {{ Button1.disabled }}
3. Response panel (bottom)
   • Shows the current value of the variable at runtime.
4. Bindings
   • Access a variable anywhere with: {{ variable1.value }}

How Variables Work

• A variable is initialized once when the page loads.
• Its value can be updated manually, programmatically, or through event handlers.
• Any component/query bound to that variable will automatically update when it changes.
• Variables are scoped to the current page (they reset when you reload or navigate).

Defining Variables

You can initialize a variable with:

1. A static primitive

42

"Hello World"

false

2. A dynamic binding

{{ Button1.disabled }}

{{ currentUser.userName }}

{{ Table1.selectedRow.data }}

3. An object or array

{ "id": 1, "status": "active" }

[1, 2, 3, 4]

Updating Variables

Variables can be updated in different ways:

1. Programmatically (via JS Query)

variable1.setValue("newValue");

2. From event handlers

• Example: Button → onClick → Set variable value.
• New value can be static or dynamic:
  • Static: "clicked"
  • Dynamic: {{ TextInput1.value }}

3. Using bindings

• Components bound to a variable update automatically when the variable changes.

Accessing Variables

• Use in expressions: {{ variable1.value }}
• Use in queries: await getOrders.run({ status: variable1.value });
• Use in conditional UI: {{ variable1.value ? "Enabled" : "Disabled" }}

Common Use Cases

1. Toggle UI State

// Initial value
false

// onClick of a button
variable1.setValue(!variable1.value);

Bind {{ variable1.value }} to the Hidden property of a component.

2. Store Selected Row

{{ Table1.selectedRow.data }}

Now, variable1.value holds the entire selected record.

3. Pass Parameters Between Queries

// Set variable from search input
variable1.setValue(searchInput.value);

// Use variable in API call
await searchUsers.run({ term: variable1.value });

4. Keep User Context

{{ currentUser }}

Variable holds the logged-in user object.
Access as {{ variable1.value.userName }}.

Best Practices

• Name clearly: e.g., selectedCustomer, isModalOpen, searchTerm.
• Keep scope tight: Only store what you need.
• Use for state, not logic: Avoid putting heavy logic inside variables—use Transformers or JS Queries for that.
• Reset if needed: Remember variables clear when you reload/navigate; if persistence is needed, use a database or storage integration.

Example Walkthrough

Initial Value

{{ Button1.disabled }}

• When Button1 is disabled → variable1.value = true.
• When Button1 is enabled → variable1.value = false.

Usage

• Bind another component’s Disabled property to {{ variable1.value }}.
• Dynamically control UI state without duplicating expressions everywhere.

FAQ

Q: How are Variables different from Transformers?

• Variable = stores state (can be set and updated).
• Transformer = computes derived values (read-only, no manual updates).

Q: Can I store complex objects?
Yes. Arrays, objects, JSON are all supported.

Q: Do variables persist across pages?
No. Variables are scoped to the current page session.

Q: How do I update a variable from code?
Call .setValue(newValue) from a JS Query or event handler.

👉 Variables are the backbone of managing stateful apps in Zeroplat. Use them to synchronize UI, store temporary data, and simplify interactions between queries and components.