Monday, October 12, 2015

Customizing Pentaho Report Web viewer

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>





No comments:

Post a Comment