Button Control

Dashboards, in addition to displaying business-related chart data, require many interactive operations, such as refreshing the dashboard, displaying specific charts on the dashboard, switching to full-screen mode, printing dashboard data, exporting dashboard charts, etc. On PC, these functions can be achieved through mouse movements and clicks, such as clicking the browser refresh button to refresh the dashboard, scrolling the mouse to find the specific chart to be displayed, locating the full-screen button to achieve full-screen display, and using the browser's print function to print the dashboard, etc. However, during the presentation, these complex operations make the dashboard presentation process appear chaotic, and sometimes may interrupt the presentation.

The button control effectively solves the above problems. By simply adding a button to the dashboard, complex operations can be completed with one click, making the presentation process smoother and enhancing the user experience.

Below is an introduction on how to add buttons and the specific functions that the button control can achieve.

Adding a Button

1. Click to create a button control to add a new button.

2. Modify the button style, including the button name, button style, and padding.

3. Enter the control settings in the three-dot menu to set the control style.

4. In the control interaction, add the corresponding click events to implement the button functions.

Supported Event Types for Buttons

Buttons support the following events:

• Jump: Supports three types of jumps.
  • Return to the previous page.
  • Jump to a dashboard within the app. When jumping, it supports setting filter condition values. For detailed operations, please refer to the Control Settings -> Jump section.
  • Jump to a specified URL address, which can be used to jump the dashboard to itself. On PC, it supports opening the URL address in the current window, as well as in a new window or a pop-up window.
• Scroll to: Scroll to a control within the current dashboard when the button is clicked, and select the corresponding control from the dropdown.
• Control Container: Switch the container page when the button is clicked, switching to the specified container page.
• Full Screen: Enter full-screen preview when the button is clicked. This event is temporarily not supported on mobile devices.
• Export: Perform an export operation when the button is clicked. Supports exporting dashboard PNG, dashboard PDF, dashboard data, app PPT, app data, app PDF, chart data, chart PNG, chart PDF. This event is temporarily not supported on mobile devices.
• Refresh: Execute a page refresh operation when the button is clicked.
• Print: Execute a browser print when the button is clicked. This event is temporarily not supported on mobile devices.
• Execute JS Code: Execute the written JS code when the button is clicked.

Event Flow

A button can trigger multiple click events, forming an event flow. When adding multiple events, the following operations are supported.

• When adding multiple click events, it is supported to add the same type of event repeatedly.
• Support adjusting the event order.
• Support deleting events.
• Support setting the execution interval for events. After setting the execution interval, the next click event will be executed after the interval time, and if the execution interval is not set, the next event will be executed immediately after the current event.

Demonstration Example

The example demonstrates the effect of the button when implementing functions such as jumping to a specified dashboard within the app, scrolling to a specified control within the dashboard, full-screen, print, etc.