Configuration items for the page carousel widget-DataV(DataV)-阿里云帮助中心

Chart style

The page carousel is a basic interactive widget that rotates through multiple web pages on a data dashboard. Page properties such as ID, name, and link are configured in the data source. 轮播页.gif

Style panel

Search Configuration: Click the Style icon in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.
- Size: The width and height of the component in pixels (px).
- Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.
- Rotation: The rotation of the component around its center point, in degrees (°).
  - Enter an angle value to control the component's rotation.
  - Click the icon to flip the component horizontally.
  - Click the icon to flip the component vertically.
- Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.
- Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.
- Alignment: The alignment of the component within the editor.
Auto Carousel: Enable this option to automatically rotate through multiple pages.
Interval (s): The interval, in seconds, between automatic page rotations. This parameter is available only if you enable Auto Carousel.

Data Source panel

Dashboard Carousel Data API

Field	Description
`id`	The ID of each carousel page on the data dashboard.
`serieName`	The name of each carousel page on the data dashboard.
`url`	The link to each carousel page on the data dashboard.

Current Dashboard Data API

id: The ID of each carousel page on the data dashboard.
- When you use static data, this ID defines the page displayed during the initialization of the page carousel. The ID must correspond to a page ID in the Dashboard Carousel Data API.
- When you use dynamic data, such as data from a database or an API, you can dynamically obtain this ID value through interactive widgets such as timelines or tab lists. This lets you change an element in the interactive widget to navigate to the corresponding carousel page. The ID value returned by the dynamic data must have a format that is consistent with this ID and must correspond to a page ID in the Dashboard Carousel Data API.

Data Item Configuration	Description
Data Source	The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.
Data Mapping	When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the icon to configure field styles individually.
Filter	Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.
Data Response Result	This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the icon on the right to check the current data response result, or click the icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.
Disable Loading State	Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.
Controlled Mode	Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.
Automatic Update Request	Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panel

No event configuration is available for this widget.

Blueprint interaction

Click the icon in the upper-left corner of the page to open the Blueprint page.
On the Layer Node tab, add the current widget to the main canvas.

View the Blueprint configuration parameters.

Events

Event	Description
When Dashboard Carousel Data API Request Is Completed	Triggered after the data API request is returned and processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data Source tab of the widget's configuration panel in the canvas editor.
When Current Dashboard Data API Request Is Completed	Triggered after the data API request is returned and processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data Source tab of the widget's configuration panel in the canvas editor.

Actions

Action	Description
Import carousel data	Imports data in the component's drawing format to redraw the component without sending a new request to the server. See the sample data for an example. `[ { "id": 1, "serieName": "Dashboard One", "url": "https://img.alicdn.com/imgextra/i4/O1CN01nZeSa71FYaTamJg2D_!!6000000000499-2-tps-400-240.png" } ]`
Request carousel data	Requests new data from the server. Data from upstream processing nodes or layer nodes is used as parameters. For example, if a carousel page has an API data source of `https://api.test` and the data `{ id: '1'}` is passed to the Request data interface action, the final request URL is `https://api.test?id=1`.
Import current dashboard data	Imports data in the component's drawing format to redraw the component without sending a new request to the server. See the sample data for an example. `[ { "id": 1 } ]`
Request current dashboard data	Requests new data for the current dashboard. Data from upstream processing nodes or layer nodes is used as parameters. For example, if a carousel page has an API data source of `https://api.test` and the data `{ id: '1'}` is passed to the Request current dashboard data action, the final request URL is `https://api.test?id=1`.
Get current page information	Returns the current page's parameter values, such as `ID` and `URL`. No parameters are required.
Move	Moves the component to a specified position. See the sample data for an example. `{ // Movement method. 'to': absolute, 'by': relative. Default: 'to'. "positionType": "to", // Target position (x and y coordinates). "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation delay. "animationDuration": 1000, // Animation curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }`
Toggle visibility	Toggles the component between visible and hidden. No parameters are required.
Show	Shows the component. See the sample data for an example. `{ "animationType": "",// Animation method. Option: fade. Leave empty for no animation. "animationDuration": 1000,// Animation delay in ms. "animationEasing": ""// Animation curve. }`
Hide	Hides the component. See the sample data for an example. `{ "animationType": "",// Animation method. Option: fade. Leave empty for no animation. "animationDuration": 1000,// Animation delay in ms. "animationEasing": ""// Animation curve. }`
Update component configuration	Dynamically updates the style configuration of a component. To get the configuration data, go to the component's Style panel and click Copy configuration to clipboard. Then, in the data processing node of the blueprint editor, modify the field values as needed.

Demo

This demo shows how to use the list carousel and page carousel widgets together. The list carousel displays dashboard entries with ID, name, and URL fields. As the carousel rotates, the highlighted row's web page is shown in the page carousel through Blueprint interaction. The steps are as follows.

Step 1: Go to the canvas editor

Access the DataV console.
Select any data dashboard and click Edit to open the canvas editor page.

Note
If you do not have a data dashboard, you can create one. For more information, see Create a data dashboard.

Step 2: Add and configure widgets

Add and configure the list carousel

The list carousel displays the ID, name, and URL of each data dashboard entry. During each rotation, one row is highlighted.

In the Widget Library on the left navigation pane, click Table ( icon) > List Carousel to add the list carousel to the canvas.

Configure the data source.

Click the list carousel widget. On the Data Source tab in the editor on the right, set Data Source Type to Static Data and modify the data content to the data dashboard information.

Sample code

[
  {
    "id": 1,
    "serieName": "Digital Dashboard 1",
    "url": "https://www.aliyun.com/product/bigdata/datav?spm=5176.8789780.J_3207526240.51.3dbb45b5OHdxMq"
  },
  {
    "id": 2,
    "serieName": "Digital Dashboard 2",
    "url": "https://www.aliyun.com/activity/intelligent/datavedition"
  },
  {
    "id": 3,
    "serieName": "Digital Dashboard 3",
    "url": "https://developer.aliyun.com/article/1168335"
  },
  {
    "id": 4,
    "serieName": "Digital Dashboard 4",
    "url": "https://datav.aliyun.com/portal/school/atlas/area_selector"
  },
  {
    "id": 5,
    "serieName": "Digital Dashboard 5",
    "url": "https://www.aliyun.com/activity/intelligent/datav-card?spm=5176.14082271.J_5834642020.4.4e684dcf3XqP8D"
  }
]

Configure the widget style.

On the Style tab in the editor on the right, configure the global style and custom column information for the widget.

Global Style: Set the number of table rows to 3, enable carousel, and enable highlighting.

Custom Columns: Modify the field names and displayed data for the list carousel. The modifications are shown in the following table.

Column Information	Column Field Name	Column Display Name
Label 1	id	ID
Label 2	serieName	serieName
Label 3	url	URL

Add and configure the page carousel

The page carousel displays the web page corresponding to the highlighted row in the list carousel.

Note

The page carousel's input data is configured through Blueprint interaction. You do not need to configure a separate data source here.

In the left navigation pane, under Widget Library, click Table ( icon) > Page Carousel to add the page carousel to the canvas.
Click the page carousel widget. On the Style tab in the editor on the right, enable Auto Carousel, and set Interval to 2 seconds.

Step 3: Implement widget interaction through the Blueprint editor

Use the Blueprint editor to connect the list carousel and page carousel. When a row is highlighted in the list carousel, its web page content is displayed in the page carousel.

Click the icon in the upper-left corner of the page to open the Blueprint editor page.
Add widgets and processing nodes.

Note
On the corresponding tab, hover over the target widget or node and click the icon to add it to the canvas.
- On the Layer Node tab, add the list carousel and page carousel widgets to the main canvas.
- On the Logic Node tab, add a Serial Data Processing Node to the main canvas.
  
  Logic nodes let you implement interactions for all elements within the dashboard and process data based on your business needs. For more information, see Overview of logic nodes.
Connect the widgets and nodes as shown in the following figure, and configure the processing logic for the Serial Data Processing Node.
- Processing logic: When a row in the list carousel is highlighted, the serial data processing node passes the data of the highlighted row to the page carousel for display.
- Processing code: The code is as follows.
```
return data.data;
```

Step 4: Preview the result

After configuring the widget interaction, click Preview > Normal Preview in the upper-right corner of the page to view the result.