Data

Function description

Assume that there is the following configuration:

{
  "component": "Data",
  "componentProps": {
    "alias": "requestData",
    "setToFormData": {
      "merge": false
    },
    "dataSource": {
      "token": "apply-form",
      "pbcToken": "todo-list-prepare"
    },
    "dataResponseKeyPath": "results[0]"
  }
}

Assume that the data returned in the above configuration example is:

{
  "id": 12345,
  "name": "A name text",
  "description": "Some description text"
}

1. Then the properties that support the Variable Pattern syntax among all child components of the Data component can be called through :name and :description, such as the content property of the Text component.
2. If you want to use this data in components of input type, such as Input, DatePicker, Textarea, NumberPcker, etc., you need to use the setToFormData property to put the data into the form data, so that you can use this data in input type component and submit the data together as the form is submitted. As shown in the example above.
3. If you want to access this data outside of the child components of the Data component, but do not need the data to be submitted along with the form submission, you can put the data under context through the alias property, as shown in the above example configuration. Then, these two data can be called outside the child components of the Data component through :context.dataSource.requestData.name and :context.dataSource.requestData.description.

Container properties

All component configurations support Container properties at the first level.

Component properties

Name	Type	Default	Supports Variable Pattern	Description
className	string		✔️	Root div 的 className
alias	string | object			The return data of the data source is used as a property of context.dataSource. The page component can be called by:context.dataSource.xxx
setToFormData	string			Put the return value of the data source into the form data, replace all form data by default, and can be merged through merge
intervalTime	number			How long does it take to request refresh data again since the last request, in milliseconds
renderWhileLoading	bool	false		It also renders child elements when loading
dataSource	{ token: string, pbcToken: string, listUrl: string }			data source
dataUrl	ConditionalListOrSinglePropertyPropType(string)			Get data via dataUrl.
dataFilters	ConditionalListPropertyPropType(DataFilters)		✔️	Fixed filter conditions hidden by requesting data source cannot be changed through the interface
sortModel	Array<SortModel>			How to sort data
dataResponseKeyPath	string			Take a certain subdata in response data as the result.
transformDataResponse	string			Convert the retrieved data, use the eval expression, this points to the retrieved data.
translateDataResponse	bool	true		Is the translation request result required
debounceTime	number	200		Is the translation request result required
defaultValue	object			The default data of the data source will be merged with the data requested by the API. If the api request returns an array, merge each item of the array. If the API request returns an object, merge with this object.
httpMethod	'get' | 'post'	'get'		http method for data request.
selectColId	Array<string>			Loaded data fields, all fields will be loaded without configuration.
multiDataSource	array			Multiple data sources, concurrent requests. The array content supports all the previous single data source configurations, such as dataSourde, sortModel, dataResponseKeyPath, etc.
multiDataSourceFlat	bool	false		If true, converts multiple data into an array with the data flatten of each data source in it.
LoadingProps	LoadingProps			Properties passed to the Loading component

All the remaining componentsProps will be passed to the component root element (div).

SortModel

Name	Type	Default	Description
colId	string		Sort field id
sort	'asc' | 'desc'	'asc'	Order in descending order
sortType	'text' | 'number' | 'date'	'text'	What type of values are sorted

LoadingProps

Name	Type	Default	Description
size	number	20	loading element size, default 20px
centered	bool	true	Whether to center display
overlay	bool	false	Whether to display translucent mask layer
delayed	bool	false	Whether to delay display
delayTime	number	800	Delay time (ms)

JS API

The interface obtained through formApi.getFieldApi() is as follows:

Name	Type	Description
node	HTML Element	The root DOM element of the component
on	func	Bind to componentevent
getData	func	retrieve data
refresh	func	Refresh data

on eventType

Name	callback	Description
dataFetched	(formApi) => any	Triggered when data is successfully retrieved
childrenFirstRendered	(formApi) => void	Triggered when the child element is rendered for the first time