API
When you select an API as the component's data source, you can use the API response to populate the component with data. Supported API sources include Data Service API, custom API, business logic development, and product and thing management. This topic describes how to configure an API data source.
Prerequisites
You have selected API as the data source when configuring the component.
For information about how to configure data sources for each component, see the component documents under .
Data source configuration
|
Parameter |
Description |
|
Select data source |
Select API. |
|
API source |
Options:
Note
For some chart components and repeater list components, the supported API types are data analysis service, custom API, and business logic development. For more information, see the component documentation. |
|
Request method |
Select the request method for the custom API. Options: get, post. This parameter appears when you select custom API as the API source. |
|
Request URL |
Enter the request URL for your custom API. This parameter appears when you select custom API as the API source. |
|
Select API |
Select the API to call. This parameter appears when you select data analysis service, business logic development, or product and thing management as the API source. |
|
Request parameters |
Options:
|
|
Response |
When you click Validate Data Format or OK, the system writes the response to the Response field. |
|
Data filter script |
If selected, you can use JavaScript to process the raw data from the API response to fit the display requirements of charts or text. For more information, see Data filter. |
|
Data table configuration |
If selected, you can parse and sort the structured data from the API response or after script processing to determine which data the component displays. For more information, see Data filter. |
|
Processed result |
The result after script processing and data table configuration. This result is used directly to display data in the component. This parameter appears when you select data filter script or Data table configuration. |
|
Save response to page variable |
If selected, the API response can be saved as a page variable when the service is called. You can also select an existing page variable to store the response. Click Add Page Variable to manage page variables, including adding, editing, and deleting them. |
|
Scheduled refresh |
If selected, specify the interval in seconds for automatically calling the API to get the latest data. This feature is disabled by default. Important
For control and form components, a scheduled refresh overwrites manual user changes. If the data returned by the API differs from a user's update, the component displays the API data. |
Data format
Different components support different response data formats. The following components have specific requirements:
-
Table component
If the data format of the API response is the same as the format for static data, the same pagination rules apply.
An API data source can also return paginated content dynamically. If you enable the table component's paginator, the API must meet the following requirements:
-
The API request parameters must include pageSize (the number of records per page) and pageNo (the current page number, starting from 1).
-
The API response parameters must include pageSize (the number of records per page), pageNo (the current page number, starting from 1), and total (the total number of records). The total parameter is optional. If this parameter is not returned, the table component's paginator may not display correctly.
NoteThe parameter names are case-sensitive and must match the names described here.
When the component calls the API, it automatically passes the pageSize and pageNo parameters. If the API supports paginated data, the response must match the following format:
{ "pagination":{ "pageSize": 3, "pageNo": 1, "total":6 }, "data": [ { "month": "Jan", "sales": 300, "cost": 150 }, { "month": "Feb", "sales": 300, "cost": 150 }, { "month": "Mar", "sales": 300, "cost": 150 } ] }total represents the total number of data records. The table component uses this number and the records per page to display the pagination. data represents the data for the current page, and its format must be consistent with that of a static data source.
ImportantWe recommend that the number of items in data matches the value of pageSize. If they do not match, the table's paginator may not be displayed correctly.
-
-
Form components that support static data sources
The API response must conform to the data format requirements for static data. For more information, see Static data.
NoteIf the API response does not meet the requirements, you can use the data filter script feature to process the data.
Operation | Description |
Format reference | Click Format reference to view the data formats that the component supports. |
Validate data format | Click Validate data format to check if the current data format meets the component's requirements. If the format is valid, a "Validation successful" message appears. If not, a detailed error message is displayed. |