JS Add Prompt Sound to Report Page

1.1 Problem

In reports that require high real-time performance of key indicators, some key indicators need to be noticed in time. When the value of some key indicators changes significantly, the user needs to be reminded the first time, and the sound alarm prompt is a commonly used.

As shown in the following figure: When the total sales is less than 15000, a warning window will pop up and a warning sound will be played. When you click OK in the alarm window, the sound will stop playing; When the sales are higher than At 15000, there is no prompt.

1.2 Solution

First of all, take the value and detect the required key indicators. Use the bgsound or audio tags in the HTML page to play the sound. Here you need to detect the types of different browsers, to use different play methods.

Note: In addition to the prompt sound alarm, you can also push alarm information in JavaScript by sending emails , sending platform messages, etc.

2.1 File preparation

Prepare an mp3 sound file, named alarm.mp3 , and place it in the webapps\webroot\help directory under the installation directory , as shown in the following figure: 

2.2 Modify the template

Let's take the built-in gettingstartedEN.cpt template as an example, insert a column and a row at the beginning of the template, and enter the formula =E6 in cell A1 , as shown in the following figure:  

Note: In this example, the key indicators are obtained by entering the formula in the first row of cells. Since the data in the table is expanded, if you define the parameter value = E6 directly in JavaScript, you cannot get the value of the total sales. Only in the first row where the expansion is not performed, the result of the following expanded row can be obtained.

2.3 Add loading end event

Click Template>Template Web Attributes>Pagination Preview Settings , select individually set for the template, add a loading end event to the template, define a formula parameter value = A1 , and add JavaScript at the same time, as shown in the following figure:  

var $alramDiv;
//Determine whether the alarm prompt alarmDiv exists, if not, initialize
if($("#alarmDiv").length>0){
    $alramDiv=$("#alarmDiv");
} else{
    $alramDiv=$('<div id="alarmDiv"></div>').appendTo($(document.body));
}
//Clear the alarm object to prevent multiple playbacks after multiple refreshes
$alramDiv.empty();
//Judging the sales value, less than 15000, prompt sound
if(value<15000){
    //Judge the browser type, IE and other browsers play different sounds
    if(FR.Browser.isIE()){
        //loop="-1" means the sound loops endlessly, you can specify a number to control the number of loops  
        $('<bgsound src="../../help/alarm.mp3" loop="-1">').appendTo($alramDiv);
    } else {
        //loop="true" means the sound loops infinitely, if it is removed, it will be played once  
        $('<audio src="../../help/alarm.mp3" hidden="true" autoplay="true" loop="true">' ).appendTo($alramDiv);
    }
    //A warning window will pop up, stop playing the sound after confirmation
    FR.Msg.confirm("Warning","Sales are lower than 15000,【Confirm】Alarm information?",function(value){  
    if(value){  
        $alramDiv.empty();  
    }
    },100);
    //You can add template messages here, send emails and other events to push alarm information
} else{
    //When the sales value exceeds 15000, the alarm object-alramDiv is cleared, that is, no sound is played
    $alramDiv.empty();
}

2.4 Preview effect

Save the template, click Pagination Preview, the effect is as shown in 1.1 expected effect.

Note: Mobile terminal is not supported.

2.5 Attention

If the warning sound cannot be played normally in the Chrome browser, please enter chrome://settings/content/sound in the browser to open the sound settings. 

Add http://IP:port/ to the web page that allows playback to automatically play the alarm sound. As shown below: 

soundAlert.cpt