データリストに合計行を複数行表示する

例えば、インボイス制度では税率ごとの税抜金額と消費税額を表示しなければならないため、合計行を複数表示する必要があります。

このページでは、データリストの最後に複数の合計行を表示する方法を説明します。
2種類の設定方法がありますので、用途に応じて参照してください。

 
また、明細を複数行に表示するなど複雑なリストを再現することも可能です。
こちらの方法については、以下を参照してください。


 

設定方法1:データリストの合計行設定

データリストの合計行設定を行うことで、リストに複数の合計行を表示させることができます。

出力イメージ

リストの最下部に複数の合計行が表示されています。
この例ではデータリストの最低表示行数を10行にしているため、空行が2行表示されています。
最低行数は合計行を含めて適用されます。

 

設定手順

データリストエレメントを配置

  1. データリストエレメントを配置する。
  2. データリストエレメントの設定を行う。
    • 行の高さ、列の幅、表示する項目、罫線などを設定する。
       

合計行の設定

  1. 「プロパティパネル」で [合計行 >表示する] を「ON」にする。
  2. [表示項目 > 項目設定] を押下する。
  3. 「合計行の項目設定」ダイアログが表示される。
  4. 合計行の設定を行う。
    • 「列の合計値」だけではなく、「カスタム項目」を利用して任意の値を表示することが可能。
    • [データ種別] を「集計値」にするとデータリストの任意の項目の値を集計することが可能。
      例:[データ項目] に『金額』を設定し、金額の合計値を表示させる
  5. 「一行目」のヘッダー右端にある「+」ボタンを押下する。
  6. 合計行が追加される。
  7. 6〜8を繰り返し、表示したい合計行分の設定を行う。

 
設定イメージ

  • レイアウト
  • 合計行の項目設定

例:『単価』の列に『金額』の集計値を表示。


 

設定方法2:データリストの直後にテーブルを配置

データリストエレメントのすぐ直後に合計行を表示するためのテーブルエレメントを配置することで、複数の合計行をもつデータリストのように見せることが可能です。
この方法を利用すると、データリストとは異なる幅や高さの合計行を表現できます。

出力イメージ

リストの最下部に複数の合計行が表示されています。
この例ではデータリストの最低表示行数を7行にしているため、空行が2行表示されています。

 

設定手順

データリストエレメントを配置

  1. 繰り返し領域(※)内にデータリストエレメントを配置する。
    ※繰り返し領域=ページのヘッダーとフッター以外の領域。
  2. データリストエレメントの設定を行う。
    • 行の高さ、列の幅、表示する項目、罫線などを設定する。
       

テーブルエレメントを配置

  1. データリストエレメントに接するようにテーブルエレメントを配置する。
  2. テーブルエレメントの設定を行う。
    • 行の高さ、列の幅、表示する項目、罫線などを設定する。
    • データリスト上の金額の集計値を表示することも可能。
      合計金額に合致する項目が存在しないなど、テーブルエレメントにデータリストの値の集計値を表示したい場合は、以下のページを参考に集計値が出力できる。

 
設定イメージ

 

なお、繰り返し領域に配置されたデータリストは、データバインドした明細の行数が多い場合、繰り返し領域内を下方向に伸びていき、後続のエレメントの座標も自動的にスライドします。
そのため、明細数が多い場合でも自動でデータリストの直後に合計行が表示されます。

明細数が多い場合の出力イメージ

 

ここまでで基本的な複数の合計行を表示する方法を説明してきました。
さらに複雑なレイアウトを設定したい場合は、以下を参照してください。


 

高度な設定:背景画像の利用

基本的な設定方法は「解決方法2」と同様ですが、背景画像を利用することで、次のような複雑なレイアウトのリストを表現することが可能になります。

出力イメージ

一つの明細行が2行に渡って表示されています。
合計行はそれぞれ1行ずつで複数行表示されています。
なお、この例ではデータリストの最低表示行数を1行にしているため、空行はありません。

 

背景の設定

あらかじめ値が空のPDFを用意し、これを背景画像として登録することで複雑なレイアウトを表現できます。

  1. 画面右側の「プロパティパネル」で [レイアウト設定] タブを開く
  2. [背景] 欄の [画像] 横にある [編集] ボタンを押下
  3. [アップロード] ボタンを押下し、背景に利用したい画像を選択する
  4. エラーがなければ [OK] ボタンを押下
  5. 背景画像を用紙サイズに合わせる場合は [サイズの自動調整] をONにする
     

設定イメージ
設定画面に以下のように背景画像が表示されます。

背景画像のより具体的な設定方法は以下を参照してください。

 

リストの設定

データリストエレメントを配置

  1. 「解決方法2」と同様に繰り返し領域内にデータリストエレメントを配置する。
  2. データリストエレメントの設定を行う。
    • 背景の罫線に合うように行の高さ、列の幅を調整する。

Tips

  • 罫線は不要です。
  • [アイテムの文字 > 行間隔] を調整することで二行表示した時の上下位置のバランスを取ることができます。
  • [アイテムの文字 > 文字の位置] を「上寄せ」にすることで『数量』『単価』など1項目のみのセルを上に寄せることができます。

 
テーブルエレメントを配置

  1. 「解決方法2」と同様に、データリストエレメントに接するようにテーブルエレメントを配置する。
  2. テーブルエレメントの設定を行う。
    • 背景の罫線に合うように行の高さ、列の幅を調整する。

Tips

  • [外観 > 列の背景色] に手動で「#FFFFFF」と入力し、設定するとセルの背景が透過されなくなります。
  • 背景を利用する場合は罫線は不要ですが、背景画像と異なる罫線を引きたい場合は適宜設定してください。

 
設定イメージ

  • 設定後
  • 背景なしの状態

このように、背景画像を利用することでより複雑なレイアウトのリストにも合計行を表示することが可能です。

TOP