JS Initial Button Color,Change Color After Clicking-FineReport Help Document

Last update： 2020-12-15

I. Overview

1.1 Requirement

Widget CSS and Button CSS can be used to change the CSS style of a certain widget throughout the template. Even if the optional CSS styles are not what you want, you can use the debugging function of the browser to customize a CSS style by taking the following steps: press F12 and find CSS codes of the widget and override CSS style with JavaScript.

However, in some cases you may add more than one button in a template as needed. The effect we pursue is that all buttons are displayed in a unified style upon initialization, are displayed in another unified style after click, and return back to the first unified style after click again. But unfortunately the previous method to modify CSS style is not applicable. So how can we achieve the effect shown below?

1.2 Solution

II. Sample

2.1 Design a template

1) Add a built-in dataset, as shown below:

2) Drag the Column 1 of the built-in dataset into A1 and add a Button widget in B1. The template is designed as follows:

Settings of the Button widget in B1 are configured as follows, of which the initial value is off.

2.2 Change to a unified style upon initialization

It is easy to get a unified style by modifying CSS to the Loading End event.

To grey out a button upon initialization, open [Menu]-[Template]-[Web Attributes]-[Data Entry Settings], and add a Loading End event, as shown below:

Input the following JavaScript codes:

$('.fr-btn-up#fr-btn-').each(function(){
  if($(this).closest('td').attr('col')=='1')
{
  $(this).css('background-color','gray');
}
})

2.3 Change to another unified style after click

When the button input is invalid, click the button to make it enabled, and the background color will become red. Click B1 and add a Click event, as shown below:

Input the following JavaScript codes:

if (this.getValue() == 'off') {  // If the button value is off before click
    this.setValue('on'); // The button value will become on after click
    this.$btn.closest('#fr-btn-').css('background-color', 'red');// The background color will become red
    this.$btn.closest('#fr-btn-').css('background-image', 'url()');// Remove background image
} else {
    this.setValue('off');  // If the button value is on before click
    this.$btn.closest('#fr-btn-').css('background-color', 'gray');// The background color will become grey
    this.$btn.closest('#fr-btn-').css('background-image', 'url()');// Remove background image
}

You can use this approach to change the color of a widget separately. If you want to change a background image, just fill in the image url in the function url().