Static data

In a component's Data Source Configuration dialog box, select Static Data from the Select Data Source drop-down list. You can directly edit the data in JSON format within the editor area. At the bottom of the dialog box, you can find the Format Reference and Validate Data Format links, as well as the OK and Cancel buttons.

When setting a component's data source to static data, you can use the system's default source or import your own. The required data format varies depending on the component.

• Indicator Light and Switch components

  The data format must be a boolean. true indicates on, and false indicates off.

• Icon component

  The data format must be a string that serves as the icon's identifier. The string must be a valid identifier from the Icon List's Fusion icon library.

  For example, the identifier for is "smile".

• Progress Indicator component

  The data format must be a single-precision number, a double-precision number, or an integer.

• Carousel component

  The data format must be a one-dimensional array of image URLs.

  [
    "https://img.***01.png",
    "https://img.***02.jpg",
    "https://img.***03.jpg"
  ]

• Weather component

  The data requires the following fields:

  • city: The city name.

  • district: The district name.

  • province: The province name.

  For example:

  {
    "city": "Beijing urban area",
    "district": "Dongcheng District",
    "province": "Beijing"
  }

• Repeater and certain chart components (Table, Line Chart, Mini Line Chart, Bar Chart, Radar Chart, Heatmap, Scatter Plot, Rose Chart, Funnel Chart, Dual-axis Chart, Horizontal Bar Chart, Pie Chart, and Crosstab)

  The data must be in the following format:

  {
    "data": [
      {
        "名称1": "value",
        "名称2": "value",
        "名称3": "value",
        "名称4": "value"
      },    
      {     
        "名称1": "value",
        "名称2": "value",
        "名称3": "value",
        "名称4": "value"
      }
    ]
  }

  • The data is in a tabular format, structured as an array of objects. Values without double quotation marks are treated as numbers.

  • Each object in the array must contain the same set of keys. If a value is missing, use an empty string ("") as a placeholder.

  • Chart components require data with at least one dimension (a boolean, string, or time value) and one measure (a numeric value) to structure it in a two-dimensional format.

  For example:

  {
    "data": [
      {
        "city": "Hangzhou",
        "month": "Jan",
        "sales": 360,
        "cost": 150
      },
      {
        "city": "Shanghai",
        "month": "Jan",
        "sales": 420,
        "cost": 180
      },
      {
        "city": "Hangzhou",
        "month": "Feb",
        "sales": 320,
        "cost": 140
      },
      {
        "city": "Shanghai",
        "month": "Feb",
        "sales": 400,
        "cost": 170
      },
      {
        "city": "Hangzhou",
        "month": "Mar",
        "sales": 380,
        "cost": 120
      },
      {
        "city": "Shanghai",
        "month": "Mar",
        "sales": 450,
        "cost": 140
      }
    ]
  }

• Steps component

  The data format must be a positive integer. The integer represents the step to display. For example, 1 corresponds to Step 1, 2 to Step 2, and so on.

  Note

  If the returned value is greater than the total number of configured steps, the component switches to the final step.

• Tree, Transfer, TreeSelect, and Cascader components

  These components share the same data format but differ in presentation.

  The Transfer component supports a tree structure of up to two levels, while the other components can display an unlimited number of levels.

  • The Transfer component is divided into left and right columns. The left Source panel displays data items in a tree structure, where Form expands to show the child items Input (grayed out and unselectable) and Field, and Data and mark are two top-level items. The right Target panel is initially empty. Arrow buttons are provided in the middle to move data items between the columns.

    [
      {
        "children": [
          {
            "label": "Input",
            "value": "4",
            "disabled":true
          },
          {
            "label": "Field",
            "value": "7"
          }
        ],
        "label": "Form",
        "value": "2"
      },
      {
        "label": "Data",
        "value": "8"
      },
      {
        "label": "mark",
        "value": "a"
      }
    ]

  • TreeSelect, Cascader, and Tree display the same hierarchical data in different ways: TreeSelect presents the hierarchy as a dropdown tree list (for example, shanxi > xian > xianshi), Cascader expands level by level in a breadcrumb-like manner, and Tree displays all nodes in a static directory tree. The tongchuan node is grayed out and cannot be selected because it is configured with disabled:true.

    [
      {
          "value": "2973",
          "label": "shanxi",
          "children": [
            {
              "value": "2974",
              "label": "xian",
              "children": [
                {
                  "value": "2975",
                  "label": "xianshi"
                }
              ]
            },
            {
              "value": "2980",
              "label": "tongchuan",
              "disabled":true
            }
          ]
       }
    ]

  Table 1. Parameters

  Parameter	Type	Description
  label	string	The data item displayed in the component's list.
  value	string or number	The value mapped to the label.
  disabled	boolean	An optional parameter. If you set it to "disabled": true, the data item is grayed out and unselectable.
  children	One-dimensional JSON array	The array must use the format shown below, which requires the label and value fields. You can also add the optional disabled parameter to make a data item unselectable. "children": [ { "label": "Child data 1", "value": "Child value 1" }, { "label": "Child data 2", "value": "Child value 2" }, ... { "label": "Child data n", "value": "Child value n" } ]

• Dropdown, Radio button, Checkbox, and Breadcrumb components

  The data requires the following fields:

  • label: The text displayed for the option.

  • value: The unique value that corresponds to the label. The value can be a number or a string.

    Important

    For the Breadcrumb component, the value in the data source must be a valid URL.

  In the data for a Radio button or Checkbox component, you can make an option unselectable by setting "disabled": true for that option.

  For example:

  [
    {
      "label": "Apple",
      "value": "apple"
    },
    {
      "label": "Pear",
      "value": "pear",
      "disabled":true
    }
  ]

• Search box component

  The data format is a one-dimensional array, for example, ["Recent", "dress", "sunglasses"]. When you start typing in the search box, a suggestion box appears, showing suggestions from the data source.