Question:
a)
How can I traverse through the Repository structure,
find the reports in some folder and render their names?
b)
Are report unit names / newly created report unit names cached
somewhere in Repository or Visualize.js internal cache?
Answers:
a)
To render a list of reports via Visualize.js you should:
use visualize API function resourcesSearch
to perform the search operation,
the values below should be passed as the parameters for this function
(the current version of API is 6.3.0):
recursive: true/false, defines if a search operation is recursive or not
types: here should be mentioned a type of resource, etc ["reportUnit"]
success: a name of the function that should be executed on Success
error: a name of the error handler function should be stated here
create a JavaScript function that should be executed in
case of successful execution of resourcesSearch API call
create a JavaScript function work as an error handler
in case if the resourcesSearch API call finishes with the error
This part of the question is illustrated with the:
Fiddler sample, please see the URL below:
http://jsfiddle.net/alexkonkin/wtvxhbkb/10/
the exported folder that contains a dummy sql based report
that should be exported to your instance
of JasperReports Server. By default this report uses
JServerJNDIDS (the default name of JNDI data source
for JasperReports Server repository).
You can connect this report to any other data source
or
alternatively give a different path to the folder
that contains report units in your environment
(let’s say Public folder)
Quoting the JavaScript part of this solution below:
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
v.resourcesSearch({
folderUri: "/public/case_01460846",
recursive: true,
types: ["reportUnit"],
success: renderResults,
error: function (err) {
alert(err);
}
});
// utility function
function renderResults(results) {
var tbody = document.getElementById("ResultsTableContent"),
alt = false,
html = [];
for (var i = 0; i < results.length; i++) {
html.push((alt = !alt) ? '<tr>' : '<tr class="alt">');
html.push("<td>" + results.label + "</td>");
html.push("<td>" + results.uri + "</td>");
html.push("<td>" + results.resourceType + "</td>");
html.push("<td>" + results.creationDate + "</td>");
html.push("</tr>");
}
tbody.innerHTML = html.join("");
}
});
Quoting the HTML part of this solution below:
<!--Provide URL to visualize.js-->
<script type="text/javascript" src="http://localhost:8630/jasperserver-pro/client/visualize.js?_opt=true"></script>
<div class="datagrid">
<table>
<thead>
<tr>
<th>Label</th>
<th>URI of resource</th>
<th>Type</th>
<th>Created</th>
</tr>
</thead>
<tbody id="ResultsTableContent">
</tbody>
</table>
</div>
Quoting CSS part of this solution below (you can skip this part and design your
own css style):
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td, .datagrid table th {
padding: 3px 10px;
}
.datagrid table thead th {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
background:-moz-linear-gradient(center top, #006699 5%, #00557F 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
background-color:#006699;
color:#FFFFFF;
font-size: 15px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
font-weight: normal;
}
.datagrid table tbody .alt td {
background: #E1EEF4;
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #006699;
background: #E1EEF4;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding:0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 2px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
background:-moz-linear-gradient(center top, #006699 5%, #00557F 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
background-color:#006699;
}
.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #006699;
color: #FFFFFF;
background: none;
background-color:#00557F;
}
div.dhtmlx_window_active, div.dhx_modal_cover_dv {
position: fixed !important;
}
You should modify the JavaScript part of the solution above to adopt it to your
JasperReports Server installation:
please see the auth section, name and password parameters
You should modify the HTML part of the solution above:
please see the very beginning of HTML section,
<script type="text/javascript" src="
you should update it to point to your JasperReports Server deployment
b)
according to the information that I've gotten
from our developers visualize.js does not have
cache, so you should be able to see any reports
including newly created ones as soon as they appear in your
JasperReports Server Repository
Please find in the attachment to the case an exported version
of the report that is used in my solution.
Recommended Comments
There are no comments to display.