VisualizeFolderTree

A hierarchical, tree based navigator of the JasperReports Server repository

The samples here show a hierarchical tree, based on the popular Javascript Fancytree control [https://github.com/mar10/fancytree]. Samples are here: [http://wwwendt.de/tech/fancytree/demo/index.html]

There are some reusable components you can use if you want to include this functionality in your own web application.

##VisualizeFolderTree object

function VisualizeFolderTree(
  visualizeObj,                      // the visualize.js main object
	divSelector,                 // the div tag the tree will display in
	// Optional parameters
	startingUri,                 // the top level repository folder the display will start at. Defaults to "/" (root)
	resourceTypes,               // array of JasperReports Server resource types. Defaults to all types.
	nodeInitializationFunction,  // function to control the contents of the displayed nodes in the tree. There is a default
	                             // See [http://www.wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html] 
	bootstrap,                   // true/false. uses bootstrap glyph icons if true
	treeOptions)                 // Fancytree options. see [http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions]

This control uses visualize and Fancytree to populate and control the hierachical display in a "lazy" manner - only getting values through visualize as needed.

depends on:

• visualize.js

• jquery.min.js

• jquery-ui-1.10.4.custom.min.js

• jquery.fancytree-all.min.js

• underscore-min.js

• ui.fancytree.css - a Fancytree skin, select from [https://github.com/mar10/fancytree/tree/master/dist]

if using bootstrap: bootstrap.min.js and bootstrap CSS.

Resource Types

The array of resource types that can be filtered are:

"folder", "dataType", "jdbcDataSource", "awsDataSource", "jndiJdbcDataSource"

"virtualDataSource", "customDataSource", "beanDataSource", "xmlaConnection"

"listOfValues", "file", "reportOptions", "dashboard", "adhocDataView"

"query", "olapUnit", "reportUnit", "domainTopic", "semanticLayerDataSource"

"secureMondrianConnection", "mondrianXmlaDefinition", "mondrianConnection", "inputControl"

The full reference is at http://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v62/api-reference-resourcessearch

Example:

The following shows:

Creating a new FolderTree that shows only folders, reports and dashboards underneath the "/public" folder.

The activate "treeOption" runs the selected report or dashboard in a div named "container".

folderTree = new VisualizeFolderTree(visualizeObj, '#tree', '/public', ['folder', 'reportUnit', 'dashboard'], null, true, {
  activate: function(event, data) {
	var selectedNode = data.node;
	if (selectedNode.data.resourceType == 'dashboard') {
		visualizeObj.dashboard({
				resource: selectedNode.key,
				container: "#container",
				error: handleError
		});
	} else if (selectedNode.data.resourceType == 'reportUnit') {
		visualizeObj.report({
				resource: selectedNode.key,
				container: "#container",
				error: handleError
		});
	}
  }
});