Render Unique Identifier (Key)

Feature	Free plan	Basic edition	Professional edition	Dedicated edition
Custom page	Not supported	Not supported	Supported	Supported

1. Introduction and Configuration Path

The render unique identifier (key) works on the same principle as the key attribute of a component in React. Both uniquely identify a component during rendering or when components are switched. Path: On a custom page, click any component >> Premium on the right >> Whether to render >> Render unique identifier. This configuration is typically used together with the Whether to render and Loop features. Custom page

2. Use Cases

2.1 Switching Between Components of the Same Type

In the following scenario, when Hobby is set to Games, Favorite game is displayed; when Hobby is set to Sports, Favorite sport is displayed. Configure it as follows:

Add a variable data source: hobby.
Set the form identifier of Favorite game to game, and bind Whether to render to the variable state.hobby === 'Games'.
Set the form identifier of Favorite sport to sport, and bind Whether to render to the variable state.hobby === 'Sports'.
Configure the onChange action for Hobby.

export function onChagne({ value, actionType, item }) {
  this.setState({
  	hobby: value,
  });
}

Bind the onClick action to the Submit button.

export function submit() {
	console.log(this.$('form').getValue());
}

With the configuration above (without a render unique identifier set), switching hobbies does swap the text box below. However, when the data is submitted, the sport field still contains the value from Favorite game even if Sports is selected. Reason: When switching between Text Box components without a key set, the underlying framework “reuses” the component from before the switch. To fix this, configure a Render unique identifier for both components.

Getting Started

Quick Start

Form Management

Workflow Design

Report Design

Aggregate Table Design

Portal Design

Custom Pages

Integration & Automation

Cool App

App Management

Platform Management

Internationalization

YiDA Dedicated

Developer Features

1. Introduction and Configuration Path

2. Use Cases

2.1 Switching Between Components of the Same Type

​1. Introduction and Configuration Path

​2. Use Cases

​2.1 Switching Between Components of the Same Type

1. Introduction and Configuration Path

2. Use Cases

2.1 Switching Between Components of the Same Type