SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「ActiveReportsJS」ではじめるフロントエンド帳票開発(AD)

帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

フィルタでデータを絞り込み

 Tableレポートコントロールでは、特定の条件でデータをフィルタして表示できます。図14のサンプルでは、画面左のリストから選択したメーカーのデータをフィルタで絞り込んで表示できます。

図14 フィルタでデータを絞り込むサンプル(p004-filter)
図14 フィルタでデータを絞り込むサンプル(p004-filter)

 このサンプルの実装方法を説明します。まず、フィルタとして指定するメーカーのリストを、ActiveReportsJSの「パラメータ」機能で作成します。帳票デザイナの右側に「データ」を表示させて、「パラメータ」の「追加」をクリックします。追加したパラメータをクリックすると「パラメータの編集」が表示されます。

図15 帳票デザインにパラメータを追加して編集(p004-filter/p004-filter.rdlx-json)
図15 帳票デザインにパラメータを追加して編集(p004-filter/p004-filter.rdlx-json)

 パラメータ機能では、帳票のパラメータを設定する入力フォームを作成できます。このサンプルではメーカーのリストを入力フォームに表示するため、「パラメータの編集」に表4の通り設定します。この設定で、「paramVendor」という名前のパラメータが帳票デザインに設定されます。

表4 メーカーのリストを表示するパラメータの設定
No. 設定項目 設定内容 意味
1 名前 paramVendor パラメータを識別する名前
2 ダイアログの表示文字列 メーカー 入力フォームに表示される名前
3 データタイプ String パラメータのデータ型
4 複数の値を許可する はい 複数メーカーを選択できるようにする
5 使用できる値 クエリから値を取得 メーカーリストをデータから取得
6 データセットの名前 データセット1 データセットの指定
7 値フィールド vendor フィルタに設定するvendorの文字列
8 ラベルフィールド vendor 入力フォームに表示されるメーカーの文言

 次に、このパラメータをフィルタとして表に設定します。表をマウスで選択して、プロパティから「フィルタ」を選択して追加し、その右端に表示されるボタンをクリックして、フィルタの設定画面を表示させます。設定画面では、「式」にフィルタの対象とするデータ項目「vendor」、「演算子」は、複数項目のどれかに合致することを表す「in」を設定します。

図16 表にフィルタを追加して設定(p004-filter/p004-filter.rdlx-json)
図16 表にフィルタを追加して設定(p004-filter/p004-filter.rdlx-json)

 「フィルタする値」は、先ほど作成したパラメータを参照させるため、「項目の追加」をクリックして追加された項目の右側ボタンをクリックして式エディタを表示させ、「パラメータ」から「paramVendor」を追加します。

図17 フィルタする値を設定(p004-filter/p004-filter.rdlx-json)
図17 フィルタする値を設定(p004-filter/p004-filter.rdlx-json)

 以上の設定を行った後で帳票を表示すると、図14の通りフィルタ機能が利用できるようになります。

同一データのセルを結合して表示

 Tableレポートコントロールでは、縦方向に同じデータが連続した場合に、図18の通りセルを自動的に結合して表示できます。ここでは「メーカー」と「5G対応」の列にセルの結合を設定しています。

図18 セルを結合して表示させるサンプル(p005-merge1)
図18 セルを結合して表示させるサンプル(p005-merge1)

 セルの結合を設定するには、帳票デザイナで結合させたいセルを選択して「自動でマージ」プロパティを設定します。

図19 セルの結合を設定する操作(p005-merge1/p005-merge1.rdlx-json)
図19 セルの結合を設定する操作(p005-merge1/p005-merge1.rdlx-json)

 このプロパティは、表5の選択肢から設定できます。

表5 「自動でマージ」の設定内容
No. 設定 意味
1 Never 結合しない
2 Always 常に結合する
3 Restricted 左側のセルが結合されている場合のみ結合する

 図19のサンプルでは「メーカー」の「自動でマージ」に「Always」、「5G対応」には「Restricted」を設定しています。この場合、「5G対応」の列は、左側の「メーカー」列のセルが結合されている場合のみ結合されます。「5G対応」に「Always」を設定すると、左側の「メーカー」列が結合されているかどうかにかかわらず結合されるため、図20の通り表示が変わります。

図20 「5G対応」列の「自動でマージ」を「Always」に設定した場合(p006-merge2)
図20 「5G対応」列の「自動でマージ」を「Always」に設定した場合(p006-merge2)

[補足]データを並び替える設定

 セルを結合させるサンプル(p005-merge1、p006-merge2)では、同一データを連続させるために、メーカー(vendor)と5G対応(is5G)でデータを並び替えるように設定しています。

 データの並び替えを行うには、表を選択して表示されるプロパティの「データ」-「並び替えの式」で、並び替えるデータ項目を追加します。複数データ項目の適用順を調整したり、並び替えの昇順・降順を設定したりできます。

図21 データの並び替え設定(p005-merge1/p005-merge1.rdlx-json、p006-merge2/p006-merge2.rdlx-json)
図21 データの並び替え設定(p005-merge1/p005-merge1.rdlx-json、p006-merge2/p006-merge2.rdlx-json)

まとめ

 本記事では、グレープシティの帳票出力ライブラリ「ActiveReportsJS」で表を表示するTableレポートコントロールのさまざまな機能を説明しました。これらの機能を利用することで、元のデータを加工することなく、集計/グループ化/フィルタ/並び替えといったデータ処理を行えます。また、グループ化やセル結合の機能を活用して、データを分かりやすく帳票に表示できます。

 次回は、さらに複雑な表を柔軟に表示できる、Tablixレポートコントロールの利用法を説明していきます。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12632 2020/08/06 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング