CSS Modify the Style of Prompt Box-FineReport Help Document

Last update：December 16, 2020

I. Overview

1.1 Requirement

When data entry is made successfully, it’s better to have a message that says it successfully completed. However, if the message is too concise, the default tooltip size is too big to look good. Besides, the message is displayed in a single color. Therefore, you need to use CSS to set the size of the tooltip and the font color of the tooltip text.

Specific effect is shown as below:

1.2 Solution

Add a Data Entry Successful event to the template and customize the size of the tooltip and the font color of the tooltip text.

II. Steps

2.1 Choose a template

Open a data entry template. Here we take the template saved in the directory under %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Data Entry\Import Excel.cpt for example.

2.2 Configure settings for a Data Entry Successful Event

Click [Template]＞[Web Attributes] ＞[Reference CSS]. Check [Individually set for the template] and add a Data Entry Successful event by inputting the following JavaScript codes:

Input the following JavaScript codes:

FR.Msg.alert("Prompt", "Data Entry Successful！");
$('#popup_title').css('color', 'black');
$('#popup_title').css('font-size', '17px');
$('#popup_title').css('font-family', 'microsoft yahei');
$('#popup_message').css('color', 'red');
$('#popup_message').css('font-size', '10px');
$('#popup_message').css('font-family', 'microsoft yahei');
$('#popup_container').css('min-width', '100px');
$('#popup_container').width(200);
$('#popup_container').height(100);
$('#popup_header').width(200);

2.3 Hide the built-in tooltip

If you want to hide the built-in Data Entry Successful tooltip, add a Loading End event:

Input the following JavaScript codes:

var old = FR.Msg.toast;FR.Msg.toast = function(x) {
    if(x == "Success") {
        FR.Msg.alert("<font color=black size=3 face='microsoft yahei'>Prompt</font>",
 "<font color=red size=3 face='microsoft yahei'>Data Entry Successful！</font>");
        $('#popup_container').css('min-width', '100px');
        $('#popup_container').width(100);
        $('#popup_container').height(100);
        $('#popup_header').width(100);
    } else {
        old(x);
    }
}