API

更新时间:
复制 MD 格式

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.

Note

For information about how to configure data sources for each component, see the component documents under Web visualization development > Components.

Data source configuration

Parameter

Description

Select data source

Select API.

API source

Options:

  • data analysis service: Call APIs developed in the IoT Platform data service, including common APIs and user APIs. The response serves as the component's data source.

    common APIs refer to the predefined metric APIs and product data APIs of the data service. user APIs refer to the custom service APIs of the data service. For more information, see Data API.

    Important
    • Only data service assets that are associated with a project can be accessed and used in the project's applications and business logic development.

      For more information about how to associate data assets, see Data assets.

    • The Data Service API is limited to 1 query per second (QPS). For more information, see API calls.

  • custom API: Call your custom-developed APIs, open APIs, or third-party APIs. The response serves as the component's data source.

    Important

    A custom API must meet the following requirements:

    • If you set request parameters, the data must be in JSON format.

    • The API response must be in JSON format.

    • Custom API calls time out after 10 seconds.

    Supported JSON data formats include:

    • Object: {}

    • Array: []

    • String: "test"

    • Number: 123

    • Boolean: true, false

  • business logic development: Call service APIs developed in the current project by using the business logic development console. The response serves as the component's data source.

    Important

    If a data analysis node is used in the business service, the service API is limited to 1 QPS. For more information, see Data analysis.

  • product and thing management: Call APIs to query product lists, product properties, thing details, or the total number of things. The response serves as the component's data source.

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:

  • static parameter: In the input box below, enter the request parameter as key-value pairs in standard JSON format.

  • dynamic parameter: Add request parameters below by setting keys and values.

    Auto-update: The data source updates automatically when a parameter changes. If you do not select this option, you can trigger a data source update through an interactive action.

    The parameter value can come from:

    • Page variable: Select an existing page variable in the current application as the parameter value. For more information about how to create and assign values to page variables, see Manage page variables.

    • Component value: Select a configured form component in the current application as the parameter value.

    • URL parameter: Use a parameter from the final published page URL as the request parameter value. This is often used when embedding pages to receive dynamic parameters from a host page, such as using an incoming product model as a request parameter.

    • Logged-in account: If application account authentication is enabled, you can select the logged-in user's account information as a request parameter when configuring a custom API or business logic development API. This allows for customization of the interface or features. For more information, see Account data.

    • From interactive action: Use the data source of a pop-up window configured on the Interaction tab as the request parameter value. For more information, see Open a pop-up container.

      Important

      The From interactive action option is available only for pop-up components.

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.

    Note

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

    Important

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

    Note

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