Hi Friends,
We can customize the Pentaho report Web viewer (Open .prpt report in New Window after Publishing)
Usually we will get window something like below for Example:
But the client requested me to customize this viewer with below requirement.
1. By default the panel should be hidden
2. Auto-submit option should be invisible
To customize this viewer, We have to edit a file called report.html that is available in the installation folder structure:
C:\Pentaho\server\biserver-ee\pentaho-solutions\system\reporting\reportviewer
In the above path we will have a file with name : report.html
Here I did not remove any code that is available in the file and I have just done some trick to achieve mentioned requirements.
We start with second requirement, We can set this at report designer level by selecting Master-Report
and set false to "Auto-submit".
Now to implement the firest requirement I have used below code:
require(['dojo/ready', 'reportviewer/reportviewer-app'], function(ready) {
ready(function(){
dojo.addOnLoad(function(){
require(["dojo/query"], function(query){
/* function tryHide(isHide){
var autoComplete = $('#reportControlPanel label.auto-complete-checkbox');
if(autoComplete.length>0){
if(isHide)autoComplete.hide();
}else{
setTimeout(function(){tryHide(isHide)},100);
}
}*/
function loadReportOnLoad() {
if ($('#reportControlPanel .pentaho-button').length > 0) {
$('#reportControlPanel .pentaho-button').click();
$(".dijitToggleButton>.dijitButtonNode").click();
} else {
setTimeout(function(){loadReportOnLoad();},100);
}
}
//tryHide(true);// control hide/show autocomplete
loadReportOnLoad();
});
});
});
});
After adding the above code to the file, report viewer will looks like below sanp shot:
After Modification, you file should be something like below code:
<!DOCTYPE html>
<html xmlns:pho="http:/www.pentaho.com">
<head>
<title>Report Web Viewer</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- Include CDF styles first to make sure they can be properly overridden -->
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/cdf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../common-ui/resources/web/dojo/dijit/themes/pentaho/pentaho.css"/>
<script type="text/javascript" src="webcontext.js?context=reporting"></script>
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/jdMenu/jquery.jdMenu.css" type="text/css" />
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/jdMenu/jquery.jdMenu.slate.css" type="text/css" />
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/impromptu/jquery-impromptu.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../../content/common-ui/resources/web/dojo/dijit/themes/pentaho/pentaho.css"/>
<link rel="stylesheet" href="../../../content/common-ui/resources/web/prompting/pentaho-prompting.css" type="text/css" />
<link rel="stylesheet" href="../../../content/reporting/reportviewer/reportviewer.css" type="text/css" />
<style>
#reportControlPanel label.auto-complete-checkbox {
display:none;
}
</style>
<script type="text/javascript">
var _isReportViewer = true;
var _isTopReportViewer = true;
try { _isTopReportViewer = ((window.parent === window) || !window.parent._isReportViewer); } catch(ex) { } // Ignore "Same-origin policy" violation in embedded IFrame
var inMobile = false;
try {
var ua = navigator.userAgent;
inMobile = ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i) || ua.match(/Android/i);
} catch(ex) { /*XSS*/ }
var dojoConfig = {
parseOnLoad: false,
isDebug: true,
disableFlashStorage: true
};
/**
* This is called when a gwt module has been loaded. We depend on these so we'll defer loading of functionality until
* modules have been loaded.
*/
var gwtModuleLoaded = function(moduleName) {
if (moduleName === 'formatter') {
// Once the GWT JSTextFormatter is loaded we can depend on other modules we need and then load the report viewer
require(['local'], function(local) {
local.define('formatter');
});
}
};
try {
if(window.top.showLoadingIndicator) {
window.top.showLoadingIndicator();
} else if(window.parent.showLoadingIndicator) {
window.parent.showLoadingIndicator();
}
} catch(ex) { } // Ignore "Same-origin policy" violation in embedded IFrame
</script>
<script type="text/javascript" src="../../../content/common-ui/resources/web/formatter/formatter.nocache.js"></script>
<script type="text/javascript">
// Provide somewhere for cdf/simile/ajax/scripts/json to inject itself into
var SimileAjax = {};
var logger, logged;
require(['dojo/ready', 'reportviewer/reportviewer-app'], function(ready) {
ready(function(){
dojo.addOnLoad(function(){
require(["dojo/query"], function(query){
/* function tryHide(isHide){
var autoComplete = $('#reportControlPanel label.auto-complete-checkbox');
if(autoComplete.length>0){
if(isHide)autoComplete.hide();
}else{
setTimeout(function(){tryHide(isHide)},100);
}
}*/
function loadReportOnLoad() {
if ($('#reportControlPanel .pentaho-button').length > 0) {
$('#reportControlPanel .pentaho-button').click();
$(".dijitToggleButton>.dijitButtonNode").click();
} else {
setTimeout(function(){loadReportOnLoad();},100);
}
}
//tryHide(true);// control hide/show autocomplete
loadReportOnLoad();
});
});
});
});
</script>
</head>
<body class="tundra body contentHidden">
<div id="toppanel" class="pentaho-transparent hidden">
<div id="toppanelinner" >
<div id="toolbarlinner2" class="pentaho-rounded-panel2-shadowed pentaho-padding-sm pentaho-shine pentaho-background">
<div id="toolbar" data-dojo-type="dijit.Toolbar">
<div id="pageControl" data-dojo-type="pentaho.common.PageControl" class="dijitInline"></div>
<span id="toolbar-parameter-separator" data-dojo-type="dijit.ToolbarSeparator"></span>
<div id="toolbar-parameterToggle" data-dojo-type="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconParameters" showLabel="false">Parameters</div>
</div>
</div>
<script type="text/javascript">
if(inMobile) {
document.getElementById('toolbarlinner2').innerHTML =
'<div id="toolbar" style="display: -webkit-box">' +
'<div id="toolbar-parameterToggle" data-dojo-type="dijit.form.ToggleButton">Prompts</div>' +
'<div style="display: -webkit-box; -webkit-box-flex: 1; box-sizing: border-box; -webkit-box-align: center; -webkit-box-pack: center;">' +
'<div id="pageControl" data-dojo-type="pentaho.common.PageControl" class="dijitInline"></div>' +
'</div>' +
'<div style="visibility: hidden" data-dojo-type="dijit.form.ToggleButton">Prompts</div>' + // TODO: What is this? A second button?
'</div>';
}
// document.getElementById('toolbar-parameterToggle');
var inSchedulerDialog = window.location.pathname.toLowerCase().indexOf('parameterui') >= 0;
var getParams = function() { return prompt.panel.getParameterValues(); };
var initSchedulingParams = function(filePath, validParamsCallback) {
this.file = filePath;
this.parameterValidityCallback = validParamsCallback;
// We're not valid until the prompt is refreshed and tells us we are
if (this.parameterValidityCallback) {
this.parameterValidityCallback(false);
}
};
</script>
<div id="reportControlPanel" class="hidden pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
</div>
</div>
<div id="reportArea" class="pentaho-transparent">
<div id="reportPageOutline">
<iframe id="reportContent" frameborder="0"></iframe>
</div>
</div>
<div id="messageBox" data-dojo-type="pentaho.common.MessageBox" title="" style="width:400px; display:none;">
</div>
<div id="glassPane" data-dojo-type="pentaho.common.GlassPane">
</div>
</body>
</html>
We can customize the Pentaho report Web viewer (Open .prpt report in New Window after Publishing)
Usually we will get window something like below for Example:
But the client requested me to customize this viewer with below requirement.
1. By default the panel should be hidden
2. Auto-submit option should be invisible
To customize this viewer, We have to edit a file called report.html that is available in the installation folder structure:
C:\Pentaho\server\biserver-ee\pentaho-solutions\system\reporting\reportviewer
In the above path we will have a file with name : report.html
Here I did not remove any code that is available in the file and I have just done some trick to achieve mentioned requirements.
We start with second requirement, We can set this at report designer level by selecting Master-Report
and set false to "Auto-submit".
Now to implement the firest requirement I have used below code:
require(['dojo/ready', 'reportviewer/reportviewer-app'], function(ready) {
ready(function(){
dojo.addOnLoad(function(){
require(["dojo/query"], function(query){
/* function tryHide(isHide){
var autoComplete = $('#reportControlPanel label.auto-complete-checkbox');
if(autoComplete.length>0){
if(isHide)autoComplete.hide();
}else{
setTimeout(function(){tryHide(isHide)},100);
}
}*/
function loadReportOnLoad() {
if ($('#reportControlPanel .pentaho-button').length > 0) {
$('#reportControlPanel .pentaho-button').click();
$(".dijitToggleButton>.dijitButtonNode").click();
} else {
setTimeout(function(){loadReportOnLoad();},100);
}
}
//tryHide(true);// control hide/show autocomplete
loadReportOnLoad();
});
});
});
});
After adding the above code to the file, report viewer will looks like below sanp shot:
After Modification, you file should be something like below code:
<!DOCTYPE html>
<html xmlns:pho="http:/www.pentaho.com">
<head>
<title>Report Web Viewer</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- Include CDF styles first to make sure they can be properly overridden -->
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/cdf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../common-ui/resources/web/dojo/dijit/themes/pentaho/pentaho.css"/>
<script type="text/javascript" src="webcontext.js?context=reporting"></script>
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/jdMenu/jquery.jdMenu.css" type="text/css" />
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/jdMenu/jquery.jdMenu.slate.css" type="text/css" />
<link rel="stylesheet" href="../../../content/pentaho-cdf/js-legacy/lib/impromptu/jquery-impromptu.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../../content/common-ui/resources/web/dojo/dijit/themes/pentaho/pentaho.css"/>
<link rel="stylesheet" href="../../../content/common-ui/resources/web/prompting/pentaho-prompting.css" type="text/css" />
<link rel="stylesheet" href="../../../content/reporting/reportviewer/reportviewer.css" type="text/css" />
<style>
#reportControlPanel label.auto-complete-checkbox {
display:none;
}
</style>
<script type="text/javascript">
var _isReportViewer = true;
var _isTopReportViewer = true;
try { _isTopReportViewer = ((window.parent === window) || !window.parent._isReportViewer); } catch(ex) { } // Ignore "Same-origin policy" violation in embedded IFrame
var inMobile = false;
try {
var ua = navigator.userAgent;
inMobile = ua.match(/iPhone/i) || ua.match(/iPod/i) || ua.match(/iPad/i) || ua.match(/Android/i);
} catch(ex) { /*XSS*/ }
var dojoConfig = {
parseOnLoad: false,
isDebug: true,
disableFlashStorage: true
};
/**
* This is called when a gwt module has been loaded. We depend on these so we'll defer loading of functionality until
* modules have been loaded.
*/
var gwtModuleLoaded = function(moduleName) {
if (moduleName === 'formatter') {
// Once the GWT JSTextFormatter is loaded we can depend on other modules we need and then load the report viewer
require(['local'], function(local) {
local.define('formatter');
});
}
};
try {
if(window.top.showLoadingIndicator) {
window.top.showLoadingIndicator();
} else if(window.parent.showLoadingIndicator) {
window.parent.showLoadingIndicator();
}
} catch(ex) { } // Ignore "Same-origin policy" violation in embedded IFrame
</script>
<script type="text/javascript" src="../../../content/common-ui/resources/web/formatter/formatter.nocache.js"></script>
<script type="text/javascript">
// Provide somewhere for cdf/simile/ajax/scripts/json to inject itself into
var SimileAjax = {};
var logger, logged;
require(['dojo/ready', 'reportviewer/reportviewer-app'], function(ready) {
ready(function(){
dojo.addOnLoad(function(){
require(["dojo/query"], function(query){
/* function tryHide(isHide){
var autoComplete = $('#reportControlPanel label.auto-complete-checkbox');
if(autoComplete.length>0){
if(isHide)autoComplete.hide();
}else{
setTimeout(function(){tryHide(isHide)},100);
}
}*/
function loadReportOnLoad() {
if ($('#reportControlPanel .pentaho-button').length > 0) {
$('#reportControlPanel .pentaho-button').click();
$(".dijitToggleButton>.dijitButtonNode").click();
} else {
setTimeout(function(){loadReportOnLoad();},100);
}
}
//tryHide(true);// control hide/show autocomplete
loadReportOnLoad();
});
});
});
});
</script>
</head>
<body class="tundra body contentHidden">
<div id="toppanel" class="pentaho-transparent hidden">
<div id="toppanelinner" >
<div id="toolbarlinner2" class="pentaho-rounded-panel2-shadowed pentaho-padding-sm pentaho-shine pentaho-background">
<div id="toolbar" data-dojo-type="dijit.Toolbar">
<div id="pageControl" data-dojo-type="pentaho.common.PageControl" class="dijitInline"></div>
<span id="toolbar-parameter-separator" data-dojo-type="dijit.ToolbarSeparator"></span>
<div id="toolbar-parameterToggle" data-dojo-type="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconParameters" showLabel="false">Parameters</div>
</div>
</div>
<script type="text/javascript">
if(inMobile) {
document.getElementById('toolbarlinner2').innerHTML =
'<div id="toolbar" style="display: -webkit-box">' +
'<div id="toolbar-parameterToggle" data-dojo-type="dijit.form.ToggleButton">Prompts</div>' +
'<div style="display: -webkit-box; -webkit-box-flex: 1; box-sizing: border-box; -webkit-box-align: center; -webkit-box-pack: center;">' +
'<div id="pageControl" data-dojo-type="pentaho.common.PageControl" class="dijitInline"></div>' +
'</div>' +
'<div style="visibility: hidden" data-dojo-type="dijit.form.ToggleButton">Prompts</div>' + // TODO: What is this? A second button?
'</div>';
}
// document.getElementById('toolbar-parameterToggle');
var inSchedulerDialog = window.location.pathname.toLowerCase().indexOf('parameterui') >= 0;
var getParams = function() { return prompt.panel.getParameterValues(); };
var initSchedulingParams = function(filePath, validParamsCallback) {
this.file = filePath;
this.parameterValidityCallback = validParamsCallback;
// We're not valid until the prompt is refreshed and tells us we are
if (this.parameterValidityCallback) {
this.parameterValidityCallback(false);
}
};
</script>
<div id="reportControlPanel" class="hidden pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
</div>
</div>
<div id="reportArea" class="pentaho-transparent">
<div id="reportPageOutline">
<iframe id="reportContent" frameborder="0"></iframe>
</div>
</div>
<div id="messageBox" data-dojo-type="pentaho.common.MessageBox" title="" style="width:400px; display:none;">
</div>
<div id="glassPane" data-dojo-type="pentaho.common.GlassPane">
</div>
</body>
</html>
