JS Set report/toolbar to be unavailable

1.1 Problem

In our report development, in many cases it is necessary to set the report body or (report body + toolbar) to be unavailable, or customize the authority to control the toolbar and report body.

For example: click a button to make the report unavailable, if it is within the user's authority, click withdraw to restore it. 

Note: The mobile terminal does not support this function

1.2 Solution

Add a JS loading end event to the template to grey out the report body and make it uneditable.

Open a template for data entry , here is %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\FreeFrom\Frist_Form.cpt as an example.

Click [template] - [Web attributes] - [data entry settings], select the individual settings for the template, add a loading end event.

Add JavaScript：

$('<div/>').css({
    position:'absolute',//Absolute positioning
    top:$('.x-toolbar').height(),//The height of the element from the top is the height of the toolbar
    width: '100%',//width 100% display
    height: '100%',//Height 100% display
    filter: 'alpha(opacity=50)',//The transparency is 0.5
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'
}).appendTo($('body'));

Click [Data Entry Preview], the report body is unavailable.

The operation is the same as setting the main body of the report. You only need to modify the height of the element from the top to 0:

$('<div/>').css({
    position:'absolute',
    top:0,//The height of the element from the top is 0
    width: '100%',
    height: '100%',
    filter: 'alpha(opacity=50)',
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'
}).appendTo($('body'));

Click [Data Entry Preview], the report body and toolbar are both unavailable.

The operation is basically the same as setting the report body. You need to add an id to the div when adding a loading end event. For example $('<div id=lock/>'), the JS code is as follows:

$('<div id=lock/>').css({
    position:'absolute',
    top:$('.x-toolbar').height(),
    width: '100%',
    height: '100%',
    filter: 'alpha(opacity=50)',
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'
}).appendTo($('body'));

Add a [Custom Button] to the toolbar, select [Custom Button], and click [↑] to add the button to the toolbar.

Double-click the [Custom Button] in the toolbar to pop up the button editing page. Customize [widget Icon] and [widget Alias]

Add a JS event to the button, the JS code is as follows:

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

To preview, click [Data Entry Preview]. After loading, the main body of the report is unavailable. After clicking the recall button, the main body of the report is available. 

Example 1: set the report body unavailable

Set report-toolbar to be unavailable(1).cpt

Example 2: set report body & toolbar not available

Set report-toolbar to be unavailable(2).cpt

Example 3: set the report body unavailable & click the button to restore

Set report-toolbar to be unavailable(3).cpt