Data Details

DataView

适用场景

适用于从数据源中查询一条数据，并将返回数据展示的场景，如查询访客预约详情。

Basic Features

Query a Specific Data Record

The Data Details Component is one of the core components for obtaining data, enabling quick querying of a data record from data models and APIs and rendering it to the page.

Data Usage and Display

Data Details is a data provider, and the data it provides can be used by all business components. The data of Data Details can be selected from data tables or bound expressions.

1. Quickly select a data table

Drag components that require data binding into the data container to select its data.

2. Binding Expression

Expressions can be static data or variables. You can connect to built-in data tables and external APIs, etc., via Query, and then bind a query in the expression.

The method of binding a query to retrieve data can be implemented by referring to the data list configuration:

Field Query Scope Settings

Data Details, after supporting the v2 query protocol, enables on-demand configuration of field query scopes to improve query performance. Field Query Scope Settings support the following three methods:

• All Fields: returns all fields, including those from this table and associated tables.
• Current Table Fields: returns all fields of the current table, excluding fields from associated tables. (default setting)
• Custom Query Fields: supports on-demand configuration of main table fields to be returned and whether to return associated table fields.

Property Introduction

组件接收的外部传入的属性

属性名	属性标识	类型	说明

数据源	dataSourceType	string	数据源类型选择 示例："data-model"
数据模型	datasource	object	展示模型数据的数据来源
APIs	bindConnectMetadata	object	展示数据的APIs来源选择
表达式	dataSourceData	object	新特性：数据详情追加绑定表达式数据，原APIs路径优化为表达式。注意：当输入的表达式变化时，会触发自动生成详情字段。因此建议先输入表达式再调整样式。查看示例 数据详情展示的数据，可选择变量。
	exprToFieldsSchema	string	示例：""
调用方法	connectorMethod	object	展示数据的APIs调用方法选择
查询入参	connectorParams	string	对APIs调用方法获取的数据进行筛选过滤。支持对象类型，例如 {name:'',value:''}
数据筛选	queryCondition	array	点击fx支持编辑数据筛选表达式 查看格式 对数据进行筛选过滤
字段查询范围	selectFieldType	string	默认查询本表字段 默认值："main"
自定义查询字段	selectFields	array

Event Introduction

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名	事件code	事件出参 event.detail	适用情况	说明

查询为空	queryEmpty		兼容三端	数据查询为空时触发
查询成功	querySuccess		兼容三端	数据查询成功时触发
查询失败	queryFail	object error: object 错误信息 组件内部抛出的错误信息 requestid: string请求 id 如果是接口相关错误会提供请求 id message: string错误提示信息 code: string错误码 original: 原始错误	兼容三端	数据查询失败时触发

Property API

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名	属性标识	类型	说明

数据记录	record	object	数据记录
数据源协议版本	dataSourceVersion	string	数据源类型为数据模型时，数据详情支持的数据源协议版本

Method API

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名	方法标识	参数	方法说明

刷新	refresh		-
删除单条数据	deleteOne	string删除数据的标识	-

Application Example

The following example shows the model visitor details:

1. Add a data detail component

2. Select data source

Data sources support data models and APIs. Query conditions can be configured as needed, such as

Set the query filter conditions where the data identifier is passed from other pages via the page URL parameter id.

3. All components wrapped by the data container can access the data returned by the query

Thus, querying visitor reservation details is completed! The data binding process is as follows:

Frequently Asked Questions

When using data container components, must other components be placed inside them?

The Data Container is the core component for page-data interaction, capable of directly querying and displaying data. On our platform, multiple data container components are available, such as ListView, DataView, WdForm, and WdTable.

The Data Container enables deep integration of data and page components. This greatly simplifies data operation processes. In addition to providing data, the Data Container also supports common page interaction features, such as pagination loading, loading status, and error prompts.

When using data containers, if a component relies on data returned by the data container, it is recommended to place the component inside the data container component. For example, to display an image from a specific field in a data detail, it is better to place the component inside the corresponding data container. This way, the data container can automatically handle loading states, loading failures, etc., without needing to worry about rendering timing.

If you only need to use the data container to obtain data without performing UI interactions, you can directly use the Query function to query data.

How to display Chinese labels for common option sets in data containers

Common option sets now support querying values by key. For usage, refer to the documentation: https://cloud.tencent.com/document/product/1301/95807

How do you refresh other components when an event is triggered?

When you need to refresh other components upon an event trigger, bind a variable to the target component's property, for example by referencing this variable in a filter parameter expression. Then change the variable's value in the triggering event to update the corresponding target component's content.