Global Variables

Global variables are similar to the concept of React's state. They are mainly used for page-level global state management. Developers can also change the global state by calling APIs and trigger page re-rendering.

Creating Global Variables

Users can create global variables by adding variables in the data source panel:

When creating global variables, users can specify the following content:

• Name - Used to declare the name of the global variable, needs to follow JS variable naming conventions;
• Description - Defines the description information of the global variable, which will be displayed when the variable is bound;
• Data - Used to set the initial value of the global variable, supporting basic JS types such as string, boolean, object, etc.;

tip

The Yida platform provides a default global variable urlParams to get the parameters of the current page URL. We can use this.state.urlParams.xxx to get URL parameters, where xxx is the parameter name. If the corresponding parameter is not found, it will return undefined.

API

The Yida platform provides two global variable APIs for reading and writing global variables.

Reading

In variable binding and action panels, we can use the following API to get the page's global variables (in variable binding scenarios, this can be omitted and use state.xxx directly):

const name = this.state.name;

Changing

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

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

caution

Yida's setState API appears consistent with React, but has slight differences:

• Yida's setState API does not provide callback capabilities, so you cannot write callback functions for setState as you would with state;
• Yida's setState API uses a reactive data solution, so after executing setState, the new state data can be obtained immediately, as shown below:

// Assuming this.state.name's value is '小红' before executing setState
this.setState({
  name: '小明'
});

// The printed content will be: 小明
console.log(this.state.name);

Usage Scenarios

After defining global variables, there are two consumption scenarios in custom pages:

Variable Binding

Users can bind state usage by setting component property variable binding. Users can bind global variables by writing manually or selecting data sources (in variable binding scenarios, the variable form is: state.xxx).

Setting text component content property binding to variable:

Binding content data to a variable named 'name' in global variables:

By clicking Preview in the upper right corner, we can see the following binding effect:

Action Handling

In the action panel, developers can read and write global variables through JS programming, as shown below:

Does it look exactly like React's API? You can also go to the Event Handling Document to view usage instructions related to event handling.