JS Mouse Move to Control the Carousel of Dashboards

1.1 Problem description

When developing dashboards, sometimes we need the carousel effect of multiple dashboards, and we hope to stop the carousel under certain circumstances. If you control the pause and resume of the carousel through buttons, the visual effect of the dashboards will be affected.

1.2 Solutions

You can add mouse move in and out effect to a certain component through JavaScript. At the same time, through the JavaScript delay function, the page will be rotated after the specified time. As shown below:

2.1 The first template

1) New dataset

Create a new dashboard named Carousel1.frm and create a new dataset ds1:

SELECT * FROM Sales_Volume

2) Report block settings

Drag two report blocks and set them as shown in the figure below:

3) Add event

Select report0 and add a After Initialization event, as shown in the following figure:

The JS code is as follows:

function time() {
    timer = setTimeout(function () {
        window.location.href = FR.cjkEncode("${contextPath}/decision/view/form?viewlet=Carousel2.frm"); //The url of the report to be rotated
    }, 2000); //Carousel interval
}
time();
setTimeout(function () {
    //The component name here should be uppercase
    $("[widgetname=REPORT0]").mouseover(function () {
        clearTimeout(timer);
    })
    $("[widgetname=REPORT0]").mouseleave(function () {
        time();
    })
})

Save the dashboard to folder %FR_HOME%\webapps\webroot\WEB-INF\reportlets\.

2.2 Template 2

Create another dashboard named Carousel2.frm under the path %FR_HOME%\webapps\webroot\WEB-INF\reportlets\.

Do the same settings as the first dashboard, but you need to change the URL in the After Initialization event to: "${contextPath}/decision/view/form?viewlet=Carousel1.frm".

Save the 2 dashboards and previe either one. The two dashboards are automatically rotated. After the mouse is moved to report0, the rotation terminates.

Note: Mobile terminal is not supported.

Carousel1.frm

Carousel2.frm