ActiveReports for .NET 18.0J
WebViewerのカスタマイズ
ActiveReportsユーザーガイド > レポートの表示 > ASP.NET用のビューワの使用 > カスタマイズ化 > WebViewerのカスタマイズ

jQueryメソッドを使用して、WebViewerインタフェースをカスタマイズすることができます。WebViewerは、ページスクリプトにjQueryライブラリを追加します。このチュートリアルは、WebViewerのツールバーにボタンを追加し、クライアント側でPDFエクスポートの処理を実現する方法について紹介します。

チュートリアルを完了すると、次のレポートが作成されます。

カスタマイズされたWebViewerインタフェース

カスタマイズされたWebViewerインタフェース

WebアプリケーションにActiveReportsを追加する

  1. Visual Studioで、「ASP.NET Webアプリケーション(.NET Framework)」を作成します。
  2. MESCIUS.ActiveReports.Web.jaパッケージをインストールするには、[ツール]>[NuGet パッケージ マネージャー]>[ソリューションの Nuget パッケージの管理]メニュー コマンドの順に選択し、[参照]タブでパッケージを検索してインストールします。
  3. [ソリューションエクスプローラー]で、プロジェクトを右クリックし、[追加]>[新しい項目]を選択します。
  4. Webフォームを選択し、[追加]をクリックします。
  5. 追加されたWebForm.aspxの[デザイン]タブに移動し、デザイナにWebViewerコントロールをドラッグ&ドロップします。WebViewerコントロールのデフォルトのビューワはHTMLビューワです。
  6. ReportNameプロパティを設定し、WebViewerにレポートを追加します。
    メモ: HTMLViewerでセクションまたはページの任意のレポートを追加することができます。詳細は「WebViewerコントロールの使用」を参照してください。

WebアプリケーションにjQueryライブラリを追加する

WebForm.aspxファイルのソースビューで、以下のコードを追加します。

<head>の後に次のコードを貼り付けます
コードのコピー
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 

WebViewerのビューモデルにアクセスする

HTML WebViewerは、UIに依存しないビューモデルを提供するMVVMパターンにより作成されます。コードでプロパティとメソッドを使用し、Viewerのビューモデルにアクセスし、カスタムUIと連結することができます。MVVMに対応するために、JavaScriptの標準のMVVMライブラリであるknockout.jsを使用することができます。Knockout.jsは、HTML内で宣言的に連結し、監視オブジェクトとコレクションを提供します。詳細は、「JavaScriptでHTMLビューワの操作」を参照してください。

ViewModelにアクセスするには次の手順を行います。

  1. WebForm.aspxファイルのソースビューで、<script>タグを追加します。
  2. 以下のJavascriptコードを追加し、UIがHTMLページに描画される際に発生する、WebViewerのLoadedイベントとドキュメントのOnloadイベントのイベント処理メソッドを作成します。
    .aspxソースにコードを貼り付けます
    コードのコピー
    <script>
    function viewer_loaded()
    {
    };
    function document_onload()
    {
    };
    </script>
    ...
    <body onload="document_onload()">
    
  3. viewer_loadedイベントのハンドラに以下のJavascriptコードを追加し、WebViewerのビューモデルにアクセスします。
    .aspxソースにコードを貼り付けます
    コードのコピー
    function viewer_loaded() {
    var viewModel = GetWebViewer('ArWebViewerDiv_WebViewer1');
    };
  4. 以下のJavascriptコードをdocument_loadイベントのハンドラに追加し、WebViewerのLoadedイベントをクライント側のviewer_loadedイベントと連結します。
    .aspxソースにコードを貼り付けます
    コードのコピー
    function document_onload() {
                $('#WebViewer1').ready(viewer_loaded);
            };

WebViewerのツールバーにボタンを追加する

WebForm.aspxのソースビューファイルで、viewer_loadedイベントのハンドラに以下のJavascriptコードを追加し、WebViewerツールボックスにアクセスします。次に、ツールバーにカスタムボタン(エクスポートボタン)を追加して、PDFエクスポート機能を追加します。

.aspxソースにコードを貼り付けます
コードのコピー
       
function viewer_loaded() {
var viewModel = GetWebViewer('ArWebViewerDiv_WebViewer1'); var pdfExportButton = {
key: '$pdfExportButtonKey',
text: 'To PDF',
iconCssClass: 'mdi mdi-file-pdf',
enabled: true,
action: function (item) {
console.log('PDF形式にエクスポートします。');
},
onUpdate: function (arg, item) {
console.log(ビューワが更新されました。');
}
}; viewModel.toolbar.desktop.addItem(pdfExportButton);
};

 

ソースビューのWebForm1.aspxの完全なコードは次のとおりです。

.aspxソースにコードを貼り付けます
コードのコピー

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>       
<%@ Register assembly="GrapeCity.ActiveReports.Web" namespace="GrapeCity.ActiveReports.Web" tagprefix="ActiveReportsWeb" %>
       
<!DOCTYPE html>       
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body onload="document_onload()">
<form id="form1" runat="server">
<div>
<ActiveReportsWeb:WebViewer ID="WebViewer1" runat="server" height="466px" width="667px" ReportName="AllCustomers.rdlx">
</ActiveReportsWeb:WebViewer>
</div>

</form>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script>
function viewer_loaded() {
var viewModel = GetWebViewer('ArWebViewerDiv_WebViewer1'); var pdfExportButton = {
key: '$pdfExportButtonKey',
text: 'PDFにエクスポート',
iconCssClass: 'mdi mdi-file-pdf',
enabled: true,
action: function (item) {
console.log('PDF形式にエクスポートします。');
},
onUpdate: function (arg, item) {
console.log('ビューワが更新されました。');
}
}; viewModel.toolbar.desktop.addItem(pdfExportButton);
}; function document_onload() {
$('#WebViewer1').ready(viewer_loaded);
};
</script>
</body>
</html>

 

既存のツールバーボタンを削除する

.aspxソースにコードを貼り付けます
コードのコピー
function viewer_loaded() {
var viewModel = GetWebViewer('ArWebViewerDiv_WebViewer1');
...
viewModel.toolbar.desktop.removeItem($newButtonKey); //(ボタンのキー)
};

 

メモ: