HTML5ビューワは、ActiveReports 11.0J Webサービスでホストされているレポートをプレビューするために、Webアプリケーションで使用できるJavaScriptコンポーネントです。ターゲットとするデバイスの幅を広げるため、HTML5ビューワにはいくつかのUIタイプが用意されています。アプリケーションでパブリックAPIメソッド、およびプロパティを使用して、これらのオプションを切り替えることができます。
HTML5ビューワのモバイルUI
HTML5ビューワモバイルの上部ツールバー
HTML5ビューワモバイルの下部ツールバー
ツールバーの要素 |
名前 |
説明 |
 |
前ページ |
表示されているレポートの前のページに移動します。 |
 |
次ページ |
表示されているレポートの次のページに移動します。 |
2/124 |
現在のページ |
現在のページ番号とページ総数を表示します。ページ番号を入力すると、任意のページを表示できます。 |
 |
親レポートに戻る |
ドリルスルーページレポート、またはRDLレポートから親レポートに戻ります。 |
HTML5ビューワモバイルの[見出しマップラベル]ペイン
[見出しマップラベル]ペインは、ツールバーの[見出しマップラベル]ボタンをタップすると表示されます。[見出しマップラベル]ペインのいずれかの項目をタップすると、ビューワ内のレポートの対応するセクションに移動します。
[見出しマップラベル]ペインには[閉じる(×)]ボタンがあり、これをタップすると[見出しマップラベル]ペインが閉じてレポート表示領域が表示されます。レポートに見出しマップラベルがない場合、ツールバーの[見出しマップラベル]ボタンは無効になります。
HTML5ビューワモバイルの[パラメータ]ペイン
[パラメータ]ペインは、レポートにパラメータが含まれている場合に自動的に表示されます。
[パラメータ]ペインの
ボタンをクリックするとパラメータ値エディタが開き、そこでパラメータの型に従って値を選択、または入力できます。
値を選択、または入力した後、[戻る]ボタンをクリックして[パラメータ]ペインに戻ります。[レポートを表示]ボタンをクリックすると、選択したパラメータ値に従ってレポートが表示されます。
レポートにパラメータが含まれていない場合、ツールバーの[パラメータ]ボタンは無効になります。詳細については、「パラメータ」を参照してください。
HTML5ビューワモバイルの[検索]ペイン
[検索]ペインは、ツールバーの[検索]ボタンをタップすると表示されます。
このペインでは、レポート内の特定のテキストを検索できます。
レポート内を検索するには
- 検索フィールドに語句を入力します。
- 検索フィールドの下で[大文字と小文字を区別する]オプション、[単語単位で検索]オプションを使用して、検索時に大文字と小文字を区別するか、単語単位で検索するかを指定できます。
- [検索]ボタンをクリックすると、検索結果が[検索]ボタンの下に表示されます。
- リストのいずれかの項目をクリックすると、レポート上のその項目にジャンプします。
HTML5ビューワのデスクトップUI
HTML5ビューワデスクトップのツールバー
HTML5ビューワデスクトップの[見出しマップラベル]ペイン
[見出しマップラベル]ペインは、ツールバーの
[サイドバー]ボタンをクリックすると表示されます。[見出しマップラベル]ペインのいずれかの項目をクリックすると、ビューワ内のレポートの対応するセクションに移動します。
HTML5ビューワデスクトップの[パラメータ]ペイン
[パラメータ]ペインは、ツールバーの[サイドバー]ボタンをクリックしてから[パラメータ]タブをクリックすると表示されます。[パラメータ]ペインでは、表示するデータをフィルタリングするための値を入力します。
[レポートを表示]ボタンをクリックすると、選択したパラメータ値に従ってレポートが表示されます。
 |
メモ: Internet Explorer 11で日付・時刻型のパラメータをDateTimeピッカーで表示するには、以下のスクリプト要素をHTML5ビューワを含むindex.htmlの</body>タグの上に追加します。
</body>タグの上に貼り付けます。 |
コードのコピー
|
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/jquery.livequery-1.3.6.js"></script>
<script src="Scripts/bootstrap-datetimepicker-2.3.11.js"></script>
<script type="text/javascript">
$(window).load(function () {
if (Modernizr.inputtypes.date)
return;
$('input[type^=date]').livequery(function () {
var input = $(this);
var view = input.attr('type') === 'date' ? 'month' : 'hour';
var format = input.attr('type') === 'date' ? 'yyyy-mm-dd' : 'yyyy-mm-ddThh:ii:ss';
input.datetimepicker({ minView: view, format: format }).on('hide', function () {
input.trigger('change');
});
});
});
</script>
|
|
 |
注意:HTML5ビューワのDateTime型のパラメータの場合、日付ピッカーの書式文字列は「yyyy/mm/dd」または、時刻ピッカーの書式文字列は「--:--:-- --」で表されます。 |
詳細については、「パラメータ」を参照してください。
HTML5ビューワデスクトップの[検索]ペイン
[検索]ペインは、ツールバーの[検索]ボタンをクリックすると表示されます。このペインでは、レポート内の特定のテキストを検索することができます。
レポート内を検索するには
- 検索フィールドに語句を入力します。
- 検索フィールドの下で[大文字と小文字を区別する]オプション、[単語単位で検索]オプションを使用して、検索時に大文字と小文字を区別するか、単語単位で検索するかを指定できます。
- [検索]ボタンをクリックすると、検索結果が[検索]ボタンの下に表示されます。
- リストのいずれかの項目をクリックすると、レポート上のその項目にジャンプします。
HTML5ビューワのカスタムUI
HTML5ビューワのカスタムUIオプションを使用すると、ターゲットデバイス用にカスタマイズされたビューワを作成し、アプリケーション固有の要件を満たすことができます。
HTML5ビューワの外観は、パブリックAPIメソッドおよびプロパティを使用してカスタマイズできます。「JavaScriptでHTML5ビューワの操作」を参照してください。
 |
メモ:「input」タグがサポートされていないブラウザの場合、HTML5ビューワでdatetime-localの値は正しく表示されません。 |
関連トピック