Global Variables

Global variables in YiDA are similar to React’s state concept. They are used primarily for page-level state management, and developers can change global state and trigger page re-rendering by calling the corresponding APIs.

Create Global Variables

Create a global variable by adding one in the Data Source panel. When creating a global variable, specify the following:

Name — Declares the name of the global variable. Must follow JavaScript variable naming conventions.
Description — Provides a description of the global variable. This description appears during variable binding.
Data — Sets the initial value of the global variable. Supports basic JavaScript types such as string, boolean, and object.

YiDA provides a default global variable urlParams for retrieving parameters from the current page URL. Access URL parameters through this.state.urlParams.xxx, where xxx is the parameter name. If the parameter does not exist, the value is undefined.

API

YiDA provides two APIs for reading and writing global variables.

Read

In variable binding and action panels, retrieve page global variables using the following API. In variable binding scenarios, omit this and use state.xxx directly:

const name = this.state.name;

Update

Use the setState API to change page global variables and trigger page re-rendering (similar to React’s setState), as shown below:

this.setState({
  name: 'Jack'
});

YiDA’s setState API looks consistent with React’s but has slight differences:

YiDA’s setState API does not provide callback capability, so you cannot pass a callback function as you would in React’s setState.
YiDA’s setState API uses a reactive data model. As a result, you can access the new state immediately after calling setState, as shown below:

// Assume this.state.name is 'Alice' before calling setState
this.setState({
  name: 'Bob'
});

// Prints: Bob
console.log(this.state.name); 

Usage Scenarios

Once global variables are defined, they can be consumed in two scenarios within custom pages.

Variable Binding

Bind state by configuring the variable binding of a component property. Bind global variables by typing manually or selecting from the Data Source. In variable binding scenarios, the variable format is state.xxx. Bind the Content property of a Text component to a variable: Bind the Content data to a global variable named name: Click Preview in the upper-right corner to see the binding result:

Action Handling

In the action panel, developers can read and write global variables through JavaScript, as shown below: Looks exactly like React’s API, doesn’t it? You can also visit the event handling documentation for detailed usage instructions on event handling.

Getting Started

Developer Guide

API

Tutorials

Components

Create Global Variables

API

Read

Update

Usage Scenarios

Variable Binding

Action Handling

​Create Global Variables

​API

​Read

​Update

​Usage Scenarios

​Variable Binding

​Action Handling

Create Global Variables

API

Read

Update

Usage Scenarios

Variable Binding

Action Handling