Setting the Report Body to Be Unavailable by JS

Problem

During report development, you often need to set the report body or toolbar to be unavailable. Namely, the report and toolbar are grayed out and cannot be clicked. Or you need to set the report body or toolbar to be unavailable upon initialization and restore their availability by clicking a button. The following figure shows the effect of the grayed-out report. How to realize the effect?

Implementation Method

You can add a JS Loading End event for the template to gray out the report body and make the report non-editable.

Template Preparation

Prepare a template. The example is the built-in template First_Form.cpt in FineReport installation directory\webapps\webroot\WEB-INF\reportlets\doc-EN\Form.

For details, you can download the example template First_Form.cpt.

Event Adding

Unavailable Report Body

Open the template, choose Template > Web Attribute > Data Entry Setting, select Set for This Template Separately in Following Settings, and add a Loading End event to set the report body to be grayed out and unavailable, as shown in the following figure.

The JavaScript code is as follows.

$('<div id="lock"/>').css({
    position:'absolute',//The absolute position
    top:$('.x-toolbar').height(),//The distance from the element to the top is the height of the toolbar.
    width: '100%',//Display the report in full width.
    height: '100%',//Display the report in full height.
    filter: 'alpha(opacity=50)',//Set the opacity to 0.5.
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//Set the background color.
}).appendTo($('body'));

Unavailable Report Body and Toolbar

The section "Unavailable Report Body" shows how to set the report body to be grayed out and unavailable. If you also need to set the toolbar to be grayed out and unavailable, you just need to modify the distance from the element to the top to zero in JS, as shown in the following figure.

The JavaScript code is as follows.

$('<div id="lock"/>').css({
    position:'absolute',//The absolute position
    top:0,//The distance from the element to the top is zero.
    width: '100%',//Display the report in full width.
    height: '100%',//Display the report in full height.
    filter: 'alpha(opacity=50)',//Set the opacity to 0.5.
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//Set the background color.
}).appendTo($('body'));

Clicking the Button to Restore the Availability of the Report Body

The section "Unavailable Report Body" shows how to set the report body to be grayed out and unavailable. If you want the report to be unavailable upon initialization and restore the availability of the report after clicking a button on the toolbar, you need to add id to div for identification in JS, and add a Click event for the button on the toolbar to remove the grayed-out state of the report based on id, as shown in the following figure.

1. Choose Template > Web Attribute > Data Entry Setting, select Set for This Template Separately in Following Settings, and add a Loading End event, as shown in the following figure.

The JavaScript code is as follows.

$('<div id="lock"/>').css({
    position:'absolute',//The absolute position
    top:$('.x-toolbar').height(),//The distance from the element to the top is the height of the toolbar.
    width: '100%',//Display the report in full width.
    height: '100%',//Display the report in full height.
    filter: 'alpha(opacity=50)',//Set the opacity to 0.5.
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//Set the background color.
}).appendTo($('body'));

2. Add a custom button to the toolbar, modify the button name and icon, and add a custom event for the button, as shown in the following figure.

The JavaScript code is as follows.

document.getElementById("lock").remove();

Effect Preview

Save the template and click Data Entry Preview. The following figures show the preview effect on the PC.

Unavailable Report Body

Unavailable Report Body and Toolbar

Clicking the Button to Restore the Availability of the Report Body

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template Setting the Report Body to Be Unavailable by JS - Example One.cpt.

For details, you can download the template Setting the Report Body to Be Unavailable by JS - Example Two.cpt.

For details, you can download the template Setting the Report Body to Be Unavailable by JS - Example Three.cpt.