Skip to main content

Data Details

DataView

Applicable Scenarios#

Suitable for scenarios where querying one entry from the data source and displaying the returned data, such as querying visitor appointment details.

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.

image-20221024215721765

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.

image-20221024215721765

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. image 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. image

Property Introduction

External properties received by the component

Property Name
Property Identifier
Type
Description
Data sourcedataSourceTypestring

Data source type selection

Example: "data-model"

data modeldatasourceobject

Show model data source

APIsbindConnectMetadataobject

Data display APIs source selection

expressiondataSourceDataobject

New feature: Bind expression data to data details, with original APIs optimized for expressions. Note: When the input expression changes, it triggers auto-generation of detail fields. It is recommended to input the expression first and then adjust the style. View example

Display details of the data, selectable variables.

exprToFieldsSchemastring

Example: ""

calling methodconnectorMethodobject

API invocation method selection for displaying data

Query input parametersconnectorParamsstring

对APIs调用方法获取的数据进行筛选过滤。支持对象类型,例如 {name:'',value:''}

data filterqueryConditionarray

Click fx to support editing data filter expressions View format

Filter data

Field query scopeselectFieldTypestring

Default query table field

Default value: "main"

Custom query fieldselectFieldsarray

Event Introduction

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
query is emptyqueryEmptyCompatible with all platforms

Trigger when data query is empty

query succeededquerySuccessCompatible with all platforms

Trigger when data query succeeds

Query failedqueryFailobject
  • error: object 错误信息

    组件内部抛出的错误信息

    • requestid: string请求 id

      如果是接口相关错误会提供请求 id

    • message: string错误提示信息
    • code: string错误码
    • original: 原始错误
Compatible with all platforms

Data query failed triggers

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
data recordrecordobject

data record

Data source protocol versiondataSourceVersionstring

For data source type data model, supported data source protocol version in data details

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
refreshrefresh

-

Delete a single data recorddeleteOnestring删除数据的标识

-

Application Example

The following example shows the model visitor details:

1. Add a data detail component

image-20221024211426230

2. Select data source

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

image-20221024205037841

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

image-20221024205548537

img

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.