How to add a web viewer to your web page

SharpShooter Reports > SharpShooter Reports.Web > How To
The process of adding a web viewer to a project is rather simple. A web viewer with a standard skin will definitely meet your requirements in case you are not planning to deeply customize the viewer. This short guide relies on the fact a developer has a strong knowledge of the technology used in his/her web application and plugging in CSS and Java files to a project is quite effortless.

Step 1


Add the scripts from Web\Skins\Default\Scripts folder as well as skin files from Web\Skins\Default\Content folder to your project.

Step 2


The following CSS files should be plugged in to your web page:

<link href="<path_to_scripts_folder>/WebViewerSkin.css" rel="stylesheet" type="text/css" />
<link href="< path_to_scripts_folder >/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

The following JS files should be plugged in to your web page:

<script src="< path_to_scripts_folder >/jquery-1.9.1.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/jquery-ui-1.10.3.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/jquery.treeview.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/mscorlib.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/PerpetuumSoft.Reporting.WebViewer.Client.Model.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/PerpetuumSoft.Reporting.WebViewer.Client.js" type="text/javascript"></script>
<script src="< path_to_scripts_folder >/WebViewerSkin.js" type="text/javascript"></script>

Step 3


Add an empty div element to a web page:

<div id="reportViewer"></div>

Step 4


Add the following JavaScript code that creates a reportViewer in a div:

$(document).ready(function () {
            var reportViewer = ReportViewerConstructor.Create("#reportViewer");
            reportViewer.setServiceUrl("<path_to_service>");
            reportViewer.reportName = "<report_name>";
            reportViewer.renderDocument();
        });


The full markup should look as displayed below:

 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.     <head>
  3.         <link href="Styles/WebViewerSkin.css" rel="stylesheet" type="text/css" />
  4.         <link href="Styles/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />    
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
  9.     <script src="Scripts/jquery-ui-1.10.3.js" type="text/javascript"></script>
  10.     <script src="Scripts/jquery.treeview.js" type="text/javascript"></script>
  11.     <script src="Scripts/mscorlib.js" type="text/javascript"></script>
  12.     <script src="Scripts/PerpetuumSoft.Reporting.WebViewer.Client.Model.js" type="text/javascript"></script>
  13.     <script src="Scripts/PerpetuumSoft.Reporting.WebViewer.Client.js" type="text/javascript"></script>
  14.     <script src="Scripts/WebViewerSkin.js" type="text/javascript"></script>
  15.     <script language="javascript">
  16.         $(document).ready(function () {
  17.             var reportViewer = ReportViewerConstructor.Create("#reportViewer");
  18.             reportViewer.setServiceUrl("http://localhost:29855/ReportService1.svc");
  19.             reportViewer.reportName = "report";
  20.             reportViewer.renderDocument();
  21.         });
  22.  
  23.     </script>
  24.     <div id="reportViewer">
  25.         
  26.     </div>
  27. </body>
  28. </html>
 



Article ID: 618, , Modified: August 11, 2015 at 1:17 PM

Add Feedback

Share this article

Print