PowerTools ActiveReports for .NET 9.0J > ActiveReportsユーザーガイド > クイックスタート > レポートを表示する > Webで表示する > HTML5ビューワの使用 > JavascriptでHTML5ビューワの操作 |
Javascriptを使用してHTML5ビューワを操作する場合、初期化中と実行時に設定できるオプションと、初期化した後にのみ使用できるAPIメソッドとプロパティがあります。
以下のオプションは、初期化中、または実行時にHTML5ビューワを操作するときに設定できます。
uiType
説明: HTML5ビューワのUIモードを設定します。
型: String
有効な値: 'Custom'、'Mobile'、'Desktop'
例:
viewer.option('uiType', 'Mobile');
element
説明: HTML5ビューワコントロールをホストする要素を指定するJQueryセレクター。
メモ: このオプションは初期化中にのみ使用されます。 |
型: String
例:
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewerContainer2',
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
});
reportService
説明: ActiveReports 9.0J Webレポートサービス、またはActiveReports 9.0J Serverを使用するレポートサービス。
型: urlプロパティと任意指定のsecurityTokenプロパティを含むオブジェクト
例:
reportService: {
url: '/ActiveReports.ReportService.asmx'
// ActiveReports 9.0J Serverを使用する場合は、以下を使用します。
// url: 'http://myar9server.com/ReportService.svc/json/',
// securityToken: securityToken,
// resourceHandler: 'http://myar9server.com/TemporaryResource.axd/'
};
reportService.url
説明: レポート情報と出力を提供するActiveReports 9.0J Webサービス、またはActiveReports 9.0J ServerインスタンスのURL。
型: String
例:
reportService: {
url: '/ActiveReports.ReportService.asmx'
// ActiveReports 9.0J Serverを使用する場合は、以下を使用します。
// url: 'http://myar9server.com/ReportService.svc/json/',
// securityToken: securityToken,
// resourceHandler: 'http://myar9server.com/TemporaryResource.axd/'
};
reportService.securityToken
説明: ActiveReports 9.0J Serverへのログインに必要な16進数の文字列で構成されるセキュリティキー。セキュリティトークンの取得方法は、「ActiveReports 9.0J Server管理者ガイド - セキュリティトークンの取得」をご覧ください。
型: String
例:
reportService: {
url: 'http://myar9server.com/ReportService.svc/json/',
securityToken: securityToken,
resourceHandler: 'http://myar9server.com/TemporaryResource.axd/'
};
reportService.resourceHandler
説明: ActiveReports 9.0J ServerリソースハンドラのURL。
型: String
例:
reportService: {
url: 'http://myar9server.com/ReportService.svc/json/',
securityToken: securityToken,
resourceHandler: 'http://myar9server.com/TemporaryResource.axd/'
};
report
説明: ActiveReports 9.0J ServerまたはActiveReports 9.0J Webレポートサービスに表示されるレポート。
型: reportIDプロパティとreportParametersプロパティを含むオブジェクト
例:
report: {
id: 'CustomersList',
parameters: [
{
name: 'CustomerID',
value: 'ALFKI'
}]
};
reportID
説明: HTML5ビューワに表示されるレポートのID。なお、ActiveReports 9.0J Serverのレポートを表示する場合は、帳票名を指定します。
型: String
例:
report: {
id: 'CustomersList',
parameters: [
{
name: 'CustomerID',
value: 'ALFKI'
}]
};
reportParameters
説明: レポートの実行に使用されるパラメータを表す{name, value}ペアの配列。
型: Array
例:
単一値パラメータの場合:
report: {
id: 'CustomersList',
parameters: [
{
name: 'CustomerID',
value: 'ALFKI'
}]};
配列としての複数値パラメータの場合:
var arrParam = [1, 2, 3];
var reportOption = {
id: 'PageReport1.rdlx',
parameters: [
{
name: 'Parameter1',
values: arrParam,
multivalue: true
}]
};
viewer.option('report', reportOption);
reportLoaded
説明: HTML5ビューワが要求されたレポートに関する情報を取得するときに呼び出されるコールバック。TOC情報、パラメータ情報、およびレンダリングされたレポート結果へのリンクを含むreportInfoオブジェクトがこのコールバックに渡されます。
型: function(reportInfo)
例:
var reportLoaded = function reportLoaded(reportInfo)
{
console.log(reportInfo.parameters);
}
viewer.option('reportLoaded', reportLoaded);
action
説明: HTML5ビューワがハイパーリンク、ブックマークリンク、ドリルダウンレポートを開く前、またはレポートコントロールの表示/非表示を切り替える前に呼び出されるコールバック。
型: function(actionType, actionParams)
例:
function onAction(actionType, actionParams)
{
if (actionType === 0)
{
window.open(params.url, "Linked from report", "height=200,width=200");
}
}
viewer.option('action', onAction);
availableExports
説明: HTML5ビューワのエクスポート機能で使用できるエクスポート形式の配列。設定可能な値: 'Pdf', 'Word', 'Image', 'Html', 'Xls'
型: Array
例:
viewer.option("availableExports", ['Pdf']);
// すべてを有効(※デフォルト)
// viewer.option("availableExports", ['Pdf', 'Word', 'Image', 'Html', 'Xls']);
maxSearchResults
説明: 1回の検索呼び出しが受け取る検索結果の数。
型: Number
例:
maxSearchResults: 10
error
説明: レポートの表示プロセスでエラーが発生したときに呼び出されるコールバック。コールバックがtrueを返す場合、デフォルトのエラーパネルが表示されません。エラーパラメータのオブジェクトにあるmessageプロパティにより、エラーメッセージをカスタマイズできます。
型: function(error)
例: デフォルトのエラーパネルを非表示にする
var options = {
error: function(error){
if (error.message) {
// エラーパラメータを表示します。
alert("内部エラーです。システム管理者に問い合わせてください。");
return true; // デフォルトのエラーパネルを表示しません。
}
},
// 他のプロパティを設定します。
};
var viewer = GrapeCity.ActiveReports.Viewer(options);
例: エラーメッセージをカスタマイズする
var options = {
error: function(error){
error.message = "これはカスタムエラーメッセージです。";
},
// 他のプロパティを設定します。
};
var viewer = GrapeCity.ActiveReports.Viewer(options);
documentLoaded
説明: サーバー上でドキュメントが完全にロードされたときに呼び出されるコールバック。
型: function()
例:
var documentLoaded = function documentLoaded()
{
setPaginator();
}
viewer.option('documentLoaded', documentLoaded);
localeUri
説明: ローカライズ文字列を含むファイルのURL。
メモ: このオプションは初期化中にのみ使用されます。 |
型: String
例:
var viewer = GrapeCity.ActiveReports.Viewer(
{
localeUri: 'Scripts/i18n/ja.txt'
});
showOnlyLastError
説明: エラーパネルの[詳細]ボタンを非表示にします。
型: String
例:
var viewer = GrapeCity.ActiveReports.Viewer(
{
showOnlyLastError: true
});
以下は、HTML5ビューワを初期化するコードの一例です。対象のHTMLページに、HTML5ビューワを格納するDIV要素とスクリプトを追加します。
<body>タグと</body>タグの間に貼り付けます。 |
コードのコピー
|
---|---|
|
<body>タグと</body>タグの間に貼り付けます。 |
コードのコピー
|
---|---|
|
HTML5ビューワを初期化した後、以下のAPIメソッドおよびプロパティを使用できます。
option
説明: 名前によってオプションの値を取得します。valueパラメータが指定された場合は、名前によってオプションの値を設定します。
構文: option(name,[value])Object
パラメータ:
例:
viewer.option('uiType', 'mobile');
viewer.option('report', {
id: 'my report'
});
戻り値: 現在のオプションの値。
refresh
説明: レポートのプレビューを更新します。
構文: option(name,[value])Object
例:
viewer.refresh()
戻り値: Void
説明: 現在レポートが表示されている場合、そのレポートを印刷します。
構文: print()Void
例:
viewer.print()
戻り値: Void
goToPage
説明: ビューワに特定のページを表示し、完了後にコールバックを呼び出します。オプションで特定のオフセットにスクロールできます。
構文: goToPage(number, offset, callback)Void
パラメータ:
例:
viewer.goToPage(1, {
2, 3
}, function onPageOpened()
{});
戻り値: Void
backToParent
説明: ドリルダウンレポートの親レポートをビューワに表示します。
構文: backToParent()Void
例:
viewer.backToParent()
戻り値: Void
destroy
説明: 要素からビューワコンテンツを削除します。
構文: destroy()Void
例:
viewer.destroy()
戻り値: Void
export
説明: 現在表示されているレポートをエクスポートします。
構文: export(exportType,callback,saveAsDialog,settings)Void
パラメータ:
メモ: 描画拡張機能を使用して各種ファイルに出力するため、セクションレポートではsettingsの設定は有効になりません。また、PDFファイルに出力する場合、ページレポート/RDLレポートについてもエクスポートフィルタを使用してPDFファイルを作成しているため、settingsの設定は有効になりません。 |
例:
function exportToExcel() {
viewer.export('Xls', downloadReport, true, { FileName: "DefaultName.xls" });
}
// 関数uriからレポートを取得します。(コールバック関数)
var downloadReport = function (uri) {
var newWin = null;
// uriを新しいウィンドウで開きます。
try {
newWin = window.open(uri);
} catch (e) { }
// uriを新しいウィンドウで開けない場合は、現在のウィンドウで開きます。
if (!newWin) {
window.location = uri;
}
};
戻り値: Void
search
説明: 特定の検索オプション(大文字と小文字の区別、単語単位での検索)を使用して特定の文字列を検索し、検索結果を渡して特定のコールバックを呼び出します。
構文: search(searchTerm, searchOptions, callback)Void
パラメータ:
例:
viewer.search('a', {
matchCase: true,
wholePhrase: false
}, function (results)
{
console.log(results);
});
戻り値: Void
getToc
説明: parent(node)、startChild(index)、およびcountパラメータによって指定されたレポートの見出しマップラベルの部分を取得し、その結果をパラメータとして渡してコールバック関数を呼び出します。
構文: getToc(callback) Void
パラメータ:
例:
viewer.getToc(function (toc)
{
console.log(toc);
})
戻り値: Void
pageCount
説明: 現在表示されているレポートのページ数を取得します。
構文: viewer.pageCount
console.log(viewer.pageCount)
戻り値: ページ数を表す整数。
currentPage
説明: 現在表示されているページ番号を取得します。
構文: viewer.currentPage
例:
console.log(viewer.currentPage)
戻り値: 現在表示されているページ番号を表す整数。
Toolbar
説明: デスクトップUIモードでツールバーを表示するHTML要素を返します。
構文: viewer.Toolbar
例:
$(viewer.toolbar).hide();
ToolbarTop
説明: モバイルUIモードで上部ツールバーを表示するHTML要素を返します。
構文: viewer.ToolbarTop
例:
$(viewer.toolbarTop).hide();
ToolbarBottom
説明: モバイルUIモードで下部ツールバーを表示するHTML要素を返します。
構文: viewer.ToolbarBottom
例:
$(viewer.toolbarBottom).hide();