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 Specific Data
The Data Detail component is one of the core components for obtaining data. It can quickly query a piece of data from data models or APIs and render it on the page.
Data Usage and Presentation
The Data Detail is a data provider that supplies data for all business components. The data for Data Detail can be selected from data tables or bound to expressions.
1. Quick Select Data Table
Drag the component that requires data binding into the data container to select the data within it.
2. Binding Expression
Expressions can be static data or variables. You can use Query to connect to built-in data tables, external APIs, etc., and then select a query in the expression for binding.
To bind a query for data retrieval, refer to the data list configuration:
Field Query Scope Configuration
After Data Detail supports the v2 Query Protocol, it enables on-demand configuration of field query scopes, thereby enhancing query performance.
Field Query Scope Configuration supports the following three methods:- All fields: Returns all fields, including all fields 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 primary table fields to be returned and whether to return associated table fields.
Property Introduction
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 empty | queryEmpty | Compatible with all platforms | Trigger when data query is empty | |
| query succeeded | querySuccess | Compatible with all platforms | Trigger when data query succeeds | |
| Query failed | queryFail | object
| Compatible with all platforms | Data query failed triggers |
Properties 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 record | record | object | data record |
| Data source protocol version | dataSourceVersion | string | 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 |
|---|
| refresh | refresh | - | |
| Delete a single data record | deleteOne | string删除数据的标识 | - |
Application Example
The following example shows the visitor details of the model.
1. Add a Data Details Component
2. Select Data SourceData sources support data models and APIs. Query conditions can be configured as needed. Such as
Set query filter conditions where the data identifier is the page URL parameter id passed from another page via redirection.
3. All components wrapped by the data container can obtain the data returned by the query.
Thus, the query for visitor reservation details is completed. The data binding process is as follows:
Frequently Asked Questions
Do I have to place components inside Data Container components?
Data Container is the core component for interaction between pages and data, enabling direct querying and display of data. In our platform, multiple data container components are available for selection, such as ListView, DataView, WdForm, and WdTable.
Data Containers enable deep integration of data with page components, significantly simplifying data operations. In addition to providing data, Data Containers support common page interaction features such as pagination, loading states, and error prompts.
When using a data container, if a component depends on the 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's better to place the component inside the corresponding data container. This allows the data container to automatically handle loading states, loading failures, and other situations without needing to manage rendering timing.
If you only need to use the Data Container to obtain data without UI interaction, you can directly use the Query function to query data.
How to Display Chinese Labels in Common Option Sets within Data Containers
The feature for querying values by key in Common Option Sets is now available. Those who need to use it can refer to the documentation: https://cloud.tencent.com/document/product/1301/95807
How to refresh other components when an event is triggered?
When you need to refresh other components upon an event trigger, you can bind a variable to the target component's properties, such as referencing this variable in filter parameter expressions. Then modify the variable's value during the event trigger, thereby updating the content of the corresponding target component.