All Products
Search
Document Center

DataV:List Carousel

Last Updated:May 12, 2023

This topic describes the chart styles of the list carousel widget and the meaning of each configuration items.

Chart Style

Carousel list is a type of table widget. It supports custom configuration of the style and content of each row and column, hyperlink configuration of list content, and list content in image format. Carousel animation can be used to clearly display data information in a list on visual applications. image..png

Settings Panel image..png

  • Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for asset configurations.
  • Size: indicates the size of a widget, including its pixel width and height. You can click the Proportional resizing icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
  • Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
  • Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
    • Drag the black dot in the Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip icon to vertically flip a widget.
  • Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.
  • Global 轮播列表全局配置

    • Table Rows: the number of rows in the carousel table.

    • Carousel: If you turn on the switch, the content in the preview or release page can be automatically caroused. If you turn off the switch, the animation style cannot be configured.

    • Font: the font of all text in the widget. Default value: Microsoft Yahei.

    • Animation: This feature takes effect only when you turn on Carousel configuration items.

      Parameter

      Description

      Animation Mode

      The mode of the carousel animation. You can select Scroll All or Scroll One by One.

      Carousel Interval (Seconds)

      The time of the carousel interval. Unit: seconds.

      Single page without carousel

      Turn on the switch. If the number of data rows cannot reach the number of rows in the table (only one page of data), the carousel is not performed.

    • Highlight: the highlighting style of a single row in the carousel table. You can click the 眼睛图标icon to control the highlighting style.

      Parameter

      Description

      Auto Highlight

      If you turn on the switch, each row in the carousel list is automatically highlighted in turn. If you turn off the switch, you can specify a row to highlight.

      Specify Highlight Sequence Number

      Enter the serial number of a row in the carousel list. You can specify that the content of the row in the list is highlighted. This function takes effect only when automatic highlighting of configuration items is disabled.

      Highlight Style

      The style of the highlighted rows within the carousel table.

      • Text Style: the text style of the highlighted line in the list, including the font style, weight, font size, and color of the text in the line.

      • Background Color: the background color of the highlighted rows in the list.

      • Border: the border style of the highlighted rows in the list, including the border thickness, border line type, and border color.

        Note

        If the border color is gradient, the border type is invalid.

    • Hide Row with Null Value: If you turn on the switch, the row is automatically hidden if the data content is empty.

    • Overflow Text Scrolling

      Parameter

      Description

      Scroll

      If you turn on the switch, overflow text can be automatically scrolled on the preview or publish page.

      uniform rolling

      If you turn on the switch, the overflow text on the preview or publish page can be scrolled at a constant speed.

      Rate

      The speed at which the system rolls at a constant speed. Unit: px/s. This can be set only when the configuration items of constant speed scrolling is turned on.

      Rolling Time (Seconds)

      The scrolling time of the overflow text. Unit: seconds. It can be set only when the configuration items of constant speed rolling is turned off.

    • Immediate Update: If you turn on the switch, the view is immediately updated when the data is updated. If you turn off the switch, the view is updated in the next carousel.

    • Default Image: the default image that is displayed when the content type of the custom column is set to Image.

      Note

      The default image format can be png, jpg, gif, or jpeg.

  • Header: the header style of the list. You can click the 眼睛图标icon to control whether the header style is visible or hidden. 轮播列表表头配置

    Parameter

    Description

    Header Row Height (%)

    The ratio of the header to the height of the entire chart. Valid values: 0 to 100. Unit: %.

    Background Color

    The background color of the header, please refer to the color picker description to modify.

    Text Style

    The style of the text in the table header.

    • Text Alignment: the alignment mode. Valid values: Left, Center, and Right.

    • Font: the text font. The default font is Microsoft YaHei.

    • Font Color: the color of the text.

    • Font Size: the size of the text. Valid values: 0 to 200.

    • Font weight: the font weight of the text.

  • Row configuration 轮播列表行配置

    Parameter

    Description

    Odd Row Background Color

    The background color of the odd rows in the list.

    Row background color

    The background color of the even rows in the list.

    Callback Field

    The field that is used as the callback parameter. You need to take a field from the data.

  • Serial Number: the type of serial numbers in the list. You can click the 眼睛图标icon to display or hide the serial numbers. 轮播列表序列号配置

    Parameter

    Description

    Background Color

    Background color of the serial number.

    Column Width Ratio (%)

    The width of the column where the serial number resides. The value is a percentage of the column width. Valid values: 0 to 100. Unit: %.

    Radius Proportion (%)

    The radius of the serial number. The value is a percentage of the width of the column where the serial number resides. Valid values: 0 to 100. Unit: %.

    Text Style

    The text style of the serial number text, including the font style, color, font size, and font weight.

  • Custom Column: Click the 加号图标or 垃圾桶图标icon to add or delete a label column. Click the 横排列图标or 竖排列图标icon to configure the arrangement style of multiple custom series. Click the 复制图标icon to copy the selected tag series configurations and add a tag series with the same configurations.

    Note

    This configuration items is an array that can be configured with multiple custom columns. The editor traverses the data so that the data is rendered cyclically through one or more custom column configurations. If you need to customize some data to a specific style, you need to sort the data manually.

    Parameter

    Description

    Column Field Name

    The name of the custom column, which must correspond to the type field in the data.

    Column Display Name

    The display name of the custom column, which is displayed as the content of the table header.

    Column Width Ratio (%)

    The percentage of the custom column to the width of the list. Valid values: 0 to 100. Unit: %. The sum of all column width percentages is 100%. If the sum exceeds the value, it will deviate from the value you entered.

    Content Type

    The content type of the custom column. Valid values: Text and Image.

    Note

    If you set the Content Type parameter to Image, make sure that the content in the column name is the URL of the real image.

    Image Width

    The width of the image in the custom column. Unit: pixels. This parameter is available only after you select Image configuration items the Content Type parameter.

    Image Margins

    The image margin value of the custom column. You can specify the distance between the image and the left side of the custom column and the top side of the custom column. Unit: pixels. This parameter is available only after you select Image from the Content Type configuration items.

    Enable

    If you turn on the switch, the content of the custom column can be automatically wrapped. Configurable only when Text is selected configuration items Content Type.

    Text alignment

    The text alignment of the custom column. Valuable values: Align Left, Align Center, and Align Right. Configurable only when Text is selected configuration items Content Type.

    Text Style

    The text style of the custom column. This parameter is available only after you select Text configuration items the Content Type parameter.

    • Font: the font style of the text in the column. The default value is Microsoft Black.

    • Font weight: the font weight of the column.

    • Font Size: the size of the text in the custom column. Valid values: 0 to 200.

    • Color: the color of the text in the column.

Data Panel

image..png

The fields that you want to configure must correspond to the fields in the Column Name configuration items under Custom Columns on the Configuration tab. To implement a hyperlink, you can set the content of the field to a label.

Table 1. Parameters
ParameterDescription
Controlled ModeIf you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data RequestAfter you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data SourceIn the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data FilterIf you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response ResultThe response to a data request. If the data source changes, you can click the Refresh icon icon next to Data Response Result to view the data response in real time.

Interaction Panelimage..png

Interaction Event

Description

When a single row is clicked

Select the Enable check box to enable interactions between widgets. You can click a row in the carousel list to throw a callback value. By default, the area, pv, and attribute fields are thrown. For more information, see Configure callback IDs.

When data is scrolled

Select the Enable check box to enable interactions between widgets. When the data in the list is flipped, the callback value is thrown. By default, the index (index value) field is thrown. For more information, see Configure a callback ID for widgets.

When highlighted

Select the Enable check box to enable interactions between widgets. When the contents of a data row in the list are highlighted, the callback value is thrown. By default, the index (index value) field is thrown. For more information, see Configure a callback ID for widgets.

A rolling end

Select the Enable check box to enable interactions between widgets. When the data rows in the list scroll through a round, the callback value is thrown. By default, the message and isEnding fields are thrown. For more information, see Configure callback IDs.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In the blueprint editor, click the List Carousel component in the Import Nodes pane. You can view the parameters of the carousel list on the canvas, as shown in the following figure. 轮播列表蓝图编辑器参数

    • Event

      Event

      Description

      When the data interface request is completed

      The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.

      When a data interface request fails

      The event that is returned when a data interface request fails (the request may be due to network problems or interface errors) and is processed by the filter. The event also throws the processed JSON data. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.

      When a single row is clicked

      The data of the current row is thrown when a row of the carousel list is clicked.

      When data is scrolled

      Triggers when the data rows of the carousel list scroll and throws the data and index values of the current page.

      When highlighted

      Triggers and throws the data and index values of the current page when the data row of the carousel list is highlighted.

      A rolling end

      Triggers and throws the data and end scrolling of the description information of the end of the scroll when the list of the carousel scrolls.

    • Policy Action

      Policy Action

      Description

      Request Data Interface

      This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.

      Import data

      After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.

      Highlight

      Highlight the data row in the carousel list. The following example shows the reference data.

      return {
        "isOrder": true,
        "hightLightIndex": "1",
        "hightLightStyle": {
          "color": "#f00",
          "borderColor": "#f00",
          "borderWidth": 1,
          "backgroundColor": "yellow",
          "fontSize": 12,
          "fontWeight": "normal",
          "fontFamily": "Microsoft Yahei"
        }
      }

      Turn on scrolling

      Start carousel scrolling. The input data of the motion is of the object type. Example:

      return {
        "isLoop": true // Specifies whether to carousel. Default value: true. 
      }

      Pause Scrolling

      Pause scrolling, no parameters are required.

      Update component configurations

      Style configurations of widgets are dynamically updated. Before this action is executed, you must click the widget in Canvas Editor, click the Settings tab in the right-side panel, and click Copy Configurations to... to obtain widget configurations. After that, change the style field for the data processing node in Blueprint Editor.

      Display

      Displays the widget. The following example shows the reference data.

      return {
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      };

      Hide

      The following example shows how to hide a widget.

      return {
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      };

      Switch to the implicit state

      Specifies whether to show or hide a widget. The following example shows the reference data.

      return {
        "animationIn": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        },
        "animationOut": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        }
      };

      Move

      Move a widget to a specified location. The following example shows the reference data.

      return {
        // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
        "positionType": "to",
        // The location, which is indicated by the x and y coordinates. 
        "attr": {
          "x": 0,
          "y": 0
        },
        // The animation type. 
        "animation": {
          "enable": false,
          // The duration in which animation is displayed. 
          "animationDuration": 1000,
          // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
          "animationEasing": "linear"
        }
      };