How to change the 'Select Data' view of the new Ad Hoc View create page to tree type from the list type

Requirement:
To change the 'Select Data' view of the new Ad Hoc View create page to tree type from the list type

Solution:
1. Download the required version source ZIP from the eDelivery website (for example, TIB_js-jrs_8.0.0_src.zip).

2. Unzip the source file in a working directory, like C:Jaspersoft

3. Locate the DatachooserDialogView.js file (C:JaspersoftJasperReports-Server-8.0.2-srcjasperserver-uiprojrs-ui-prosrcadhocdatachooserview) and open it in an editor.

4. Create a new variable for setting the tree type view in the beginning of the file, like:
var TREE_TAB = 'tree'; //Add new TREE_TAB variable

Next, modify the render: function () around line 377 of the file to reference the above created tree variable like below (DatachooserDialogView.js file attached for reference):

 

render: function () {
Dialog.prototype.render.apply(this, arguments); // connect search form to dialog header
// connect search form to dialog header
// connect search form to dialog header
// connect search form to dialog header
this._dfdRenderSerachFormTo.resolve(this.$tabHeaderContainer);
this.openTab(TREE_TAB); // Default to TREE_TAB
return this;
}

5. Save the file.

6. Finally, to reflect the JavaScript source code customization on the UI we need to build the scripts using the newer Webpack approach. For complete steps on how to build the scripts, please see the section 5.2.3, "Customizing JavaScript Source Code" from our Ultimate Guide:
https://docs.tibco.com/pub/js-jrs/8.0.2/doc/pdf/TIB_js-jrs_8.0.0_Ultimate-Guide.pdf?id=13

Alternatively, you can also watch the below Dr.Jaspersoft video on instructions for building scripts with Webpack:

datachooserdialogview_0.js