Visualize.js: How to hide specific input controls

Use case

It is in some cases required to hide some of the input controls from users when displaying report via Visualize.js API, while all the controls should be visible via JasperReports Server repository interface.

Notes on implementation

The API provides a built in 'inputControls' method to render all the controls associated with a report. However there is no built in method to render the controls separately. Such functionality has to be implemented on the client side.

There is more than one way to achieve this. However the simplest one is probably to add a 'display:none' CSS property to the <div> element which contains the Input control you want to hide. Now, it is probably desirable to be able to hide different controls for different scenarios, so using a script to do this is preferrable to assigning the 'display:none' in your CSS configuration.

Another important note is that since the API call is naturally delayed in its execution, you have to implement the CSS overriding in a way that it happens AFTER the report and Input controls have already rendered. Often such tasks are addressed using a callback function. In the example below we will use a built in 'reportCompleted' event instead.

Solution

Lets use the following Visualize.js sample as a basis:

https://jsfiddle.net/gh/get/mootools/1.5.2/TIBCOSoftware/JS-visualize/tree/master/inputControl-report/bind-with-report/

Now lets say we want to hide the Product Family input control:

After a quick inspection of rendered elements we can see that the control is placed inside a <div> with class "jr-mInputControlSingleSelect":

Now lets create a simple CSS class which will hide an element:

.hiddenControl {
  display: none;
}

And then, we will loop through the divs on the page and assign our class to the ones we want to hide. In this case we only want to hide one <div> with class "jr-mInputControlSingleSelect" and label "Product Family". As mentioned above, we will use the built in 'reportCompleted' event to achieve this:

var report = v.report({
        resource: resourceUri, 
        container: "#report",
        events: {
            reportCompleted: function(status) {
              var divs = document.getElementsByTagName('div');
              for (var i=0; i<divs.length; i++) {
                if (divs[i].innerHTML.indexOf("Product Family") > -1 &&
                    divs[i].className.indexOf("jr-mInputControlSingleSelect") > -1) {
                  divs[i].addClass('hiddenControl');
                }
              }
            }
        }
    });

And here is the result:

Other options

You may also consider using other built in event handlers instead of reportRendered, such as beforeRender and pageFinal. In fact after further tests it looks like the pageFinal event works the smoothest of all three, at least in my use case. The complete list of report rendering events available for Visualize.js API can be found here:

https://community.jaspersoft.com/wiki/visualizejs-complete-list-built-events-report-rendering