Power Appsのキャンバスアプリで帳票を作成してみる

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はローコードツール「Power Apps」のキャンバスアプリを使用した帳票の作成方法についてご紹介します。

Power Appsのキャンバスアプリケーションは、コントロールを簡単にキャンバス上にドラッグ&ドロップして、アプリを自由自在に作成できるため、幅広いユーザーに愛用されています。さらに、入力画面やリスト表示画面などには、便利なテンプレートが揃っており、手軽にアプリを作成できます。

しかし、帳票機能については、テンプレートの種類が限られているため、日本のビジネスに必要な帳票を作成するのが難しい場合があります。そこで、今回の記事では、キャンバスアプリケーションで帳票機能を実現する方法を詳しく解説します。実務で頻繁に利用される「請求書」を例に、帳票のレイアウト設計や合計金額の計算方法などを分かりやすくご紹介します。

事前準備

今回は「Power Apps」の開発者向けプランを使用します。事前準備として開発者向けプランのアカウントの準備をしてください。また、こちらに今回の記事内で使用するサンプルデータを用意しています。ダウンロード後、解凍してご使用ください。

アプリの作成

今回作成するアプリでは、「Print関数」を利用します。この関数を実行すると、ブラウザーの印刷ダイアログが表示され、実行中のキャンバス画面をそのまま印刷することが可能です。複数ページの印刷やモバイルデバイスで動作しないなどの制約はありますが、この関数を利用することで手軽に帳票作成機能を追加できます。

今回はデータソースにExcelファイルを使用し、データを画面上に一覧表示をさせ、選択したリストを請求書の帳票として表示、印刷が行えるアプリを作成したいと思います。

キャンバスアプリを一から作成する

それでは、さっそくキャンバスアプリを作成していきたいと思います。アプリを作成するためにhttps://make.powerapps.comにアクセスし、事前に作成済のアカウントにてPower Apps にサインインします。

サインイン後、次のようにPower Appsのホーム画面が表示されますので、サイドバーより「作成」を選択します。

PowerAppsアプリ作成画面

続いて、「アプリを作成する」のメニューから、「空のアプリ」を選択します。

PowerAppsアプリ作成画面2

「作成ダイアログ」から、「空のキャンバスアプリ」を選択し、[作成]ボタンを押します。

PowerAppsアプリ作成画面3

アプリ名に「CanvasReportsApp」と入力し、[作成]ボタンを押します。

アプリ名の入力

次のようなアプリ作成画面(Power Apps Studio)が表示されると、アプリの作成が開始できます。

PowerAppsStudio

データソースの追加

アプリ作成の準備が整ったところで、今回帳票として表示するためのデータを準備します。次の図のように、サイドバーから「データアイコン」を選択し、データパネルを表示します。データパネルの「データの追加」をクリックすると、「データソースの選択」ダイアログが表示されますので、その中から「Excel Online (Business)」を選択します。

データソースの追加

右側のサイドバーに「Excel Online (Business)」の接続画面が表示されるので、[接続]ボタンを押します。

データソースの追加2

「Excel Online (Business)」へ接続した後、対象のxlsxファイルを選択するために、右側のサイドバーにウィザードが表示されます。それぞのステップを次のように選択していきます。

  1. 「OneDrive for Business」を選択

    データソースの追加ウィザード1
  1. 「OneDrive」を選択

    データソースの追加ウィザード2
  1. Excelファイルが保存されている、OneDrive上のフォルダを選択

    データソースの追加ウィザード3
  1. 対象のExcelファイルを選択

    データソースの追加ウィザード4
  1. 選択したExcelファイルから、データソースとするテーブルを選択

    データソースの追加ウィザード5
  1. テーブル上のレコードを一意に特定するために、「自動生成したIDをExcelテーブルに挿入する」、「Excelテーブルにある一意の列を使用する」どちらかを選択します。
    今回は「自動生成したIDをExcelテーブルに挿入する」を選択します。

    データソースの追加ウィザード6

左側のサイドバーにテーブル「invoice」が追加されていれば、データソースの追加は完了です。

データソースの追加完了

メイン画面へコントロールを配置

続けて、アプリの画面上にコントロールの配置を行っていきます。今回作成するアプリケーションでは、次のようにデータを一覧上に表示してくれる、「ギャラリー」を配置し、その上にアプリケーションのタイトル表示用に、「図形(四角形)」と「ラベル」を配置していきます。

コントロールの配置

それぞれのコントロールの配置するには次のように、「モダンコマンドバー」上の「挿入」から、コントロールを選択し配置していきます。

モダンコマンドバー

また、プロパティ値は、以下の図に記した「プロパティリスト」、「数式バー」、「プロパティペイン」を使用して設定を行います。

Power Apps Studioの機能説明

それでは実際に、「図形(四角形)」と「ラベル」のコントロールを配置していきます。上で示したコントロールの配置方法と、プロパティ値の設定方法を参考にしながら、コントロールの配置を行い、以下のプロパティ値を設定していきます。

「図形(四角形)」と「ラベル」のプロパティ設定について
コントロールプロパティ設定値
図形(四角形) コントロール名 Rectangle1
Height100
WidthParent.Width
FillRGBA(0, 162, 115, 1)
X0
Y0
ラベルコントロール名Label1
Height82
Width688
X39
Y9
Text“Canvas Reports App”
※ プロパティペインから入力する際は「”」は不要です。
FontWeightSemibold
Size50
ColorRGBA(255, 255, 255, 1)

続いて「ギャラリー」コントロールは、以下のプロパティ値を設定してください。

「ギャラリー」のプロパティ設定について
コントロールプロパティ設定値
ギャラリーコントロール名Gallery1
HeightParent.Height-Rectangle1.Height
WidthParent.Width
X0
YRectangle1.Height
ItemsGroupBy(invoice,“no”,“companyname”,“Detail”)
レイアウト選択肢:「タイトルとサブタイトル」を選択
※ プロパティペインから設定を行います。
ギャラリー図形(四角形)コントロール名Rectangle2
図形(四角形)コントロール名Separator1
図形(アイコン)コントロール名NextArrow1
ラベルコントロール名Title1
HeightSelf.Size * 1.8
WidthParent.TemplateWidth /2
X10
Y(Parent.TemplateHeight-(Self.Size * 1.8 )) / 2
TextThisItem.companyname
Size40
ラベルコントロール名Subtitle1
HeightTitle1.Height
WidthParent.Width/3
XTitle1.X+Title1.Width
YTitle1.Y
TextThisItem.no
Size32

今回の「ギャラリー」の一覧出力では、重複するデータを表示させたくないため、「Items」プロパティに対して、あらかじめ用意したデータソース(invoice)そのものではなく、重複する「no」と「companyname」のレコードを「GroupBy関数」を使用して1つのレコードにまとめた状態で設定しています。

帳票画面の追加

ここまでで、画面上に「ギャラリー」を配置し、データの一覧表示が行えるようになりました。続けて、ギャラリー上の「>」アイコンが押された際に、帳票が表示できるように画面を追加していきます。

次の図のように「ツリービュー」>「画面タブ」>「新しい画面」>「テンプレート」から「縦長で印刷」を選択すると、新たな画面「Screen2」が追加されます。こちらには予め[印刷]ボタンが配置済みでこのボタンには「Print関数」が設定されているので、ボタンを押すと画面の内容をそのまま印刷することが出来ます。

帳票画面の配置
帳票画面配置完了

帳票画面へコントロールの配置

では、さっそく作成した画面にコントロールを配置していきます。

元の画面へ戻るボタン

次の図のように、元の画面へ戻るためのボタンを配置します。初期状態のままだと印刷時にもボタンが表示されてしまい、帳票の邪魔になる可能性があるため、印刷時には表示しないように「Visible」プロパティを「Not(Parent.Printing)」と設定します。これにより、印刷時だけボタンが表示されないようになります。

戻るボタンの追加

その他のプロパティは次の表を参考に設定してください。

「元の画面へ戻るボタン」のプロパティ設定について
コントロールプロパティ設定値
ボタンコントロール名ButtonBackScreen
Height40
Width160
FillRGBA(0, 162, 115, 1)
X30
Y25
Text“前の画面へ戻る”
※ プロパティペインから入力する際は「”」は不要です。
VisibleNot(Parent.Printing)
OnSelectBack()

ヘッダ部

続いて、帳票のヘッダ部分を作成します。ヘッダ部分ではデータソースのフィールド「no」を表示する他、帳票タイトル、固定の会社名、担当者などを追加します。データソースの参照方法を前画面で選択された値「Gallery1.Selected.no」していますので、プロパティ値を設定し動作の確認をしてみてください。

ヘッダ部分の作成
「ヘッダ部」のプロパティ設定について
コントロールプロパティ設定値
ラベルコントロール名LabelInvoiceHeadings
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness0
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
Height62
Size32
Text“請求書”
※ プロパティペインから入力する際は「”」は不要です。
Underlinetrue
Width266
X255
Y78
ラベルコントロール名LabelHeadNo
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“伝票番号”
※ プロパティペインから入力する際は「”」は不要です。
Width96
X577
Y106
ラベルコントロール名LabelHeadPerson
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“担当”
※ プロパティペインから入力する際は「”」は不要です。
Width96
X673
Y106
ラベルコントロール名LabelNo
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(0, 0, 0, 0)
Height28
Size11
TextGallery1.Selected.no
Width96
X577
Y134
ラベルコントロール名LabelPerson
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(0, 0, 0, 0)
Height28
Size11
Text“葡萄 城太郎”
※ プロパティペインから入力する際は「”」は不要です。
Width96
X673
Y134
ラベルコントロール名LabelCompanyAddress
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness0
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
Height126
Size10
Text“キャンバス帳票開発 株式会社
〒 981-2222
M県S市紅葉区 杜王町2-6-11
電話:022-777-8210
むかでや銀行 杜王町支店
当座預金 123-45689″
※ プロパティペインから入力する際は「”」は不要です。
Width229
X540
Y176
ラベルコントロール名LabelHeadSkuName
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“商品番号・商品名”
※ プロパティペインから入力する際は「”」は不要です。
Width299
X63
Y302
ラベルコントロール名LabelHeadUnit
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“数量”
※ プロパティペインから入力する際は「”」は不要です。
Width73
X362
Y302
ラベルコントロール名LabelHeadPrice
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“単価”
※ プロパティペインから入力する際は「”」は不要です。
Width67
X435
Y302
ラベルコントロール名LabelHeadAmount
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“金額”
※ プロパティペインから入力する際は「”」は不要です。
Width96
X502
Y302
ラベルコントロール名LabelHeadRemark
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height28
Size11
Text“備考”
※ プロパティペインから入力する際は「”」は不要です。
Width154
X598
Y302

明細部

続いて、明細部分の配置を行います。明細部分には「ギャラリー」コントロールを使用し、前の画面と同様にリスト表示を行います。先ほどはレイアウトプロパティを「タイトルとサブタイトル」としましたが、今回は複数の項目を表示する必要があるため、レイアウトを「空白」とし、「ラベル」コントロールを手動で追加していきます。各プロパティ設定に関しては、表の値を参考に設定してください。

明細部の作成
「明細部」のプロパティ設定について
コントロールプロパティ設定値
ギャラリーコントロール名Gallery2
Width689
Height522
X63
Y330
ItemsGallery1.Selected.Detail
レイアウト選択肢:「空白」を選択
※ プロパティペインから設定を行います。
ギャラリー図形(四角形)コントロール名Rectangle5
WidthParent.Width
Height56
X0
Y0
BorderThickness2
BorderColorRGBA(0, 0, 0, 1)
ラベルコントロール名LabelSku
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadSkuName.Height
Size11
TextThisItem.sku
WidthLabelHeadSkuName.Width
X0
Y0
ラベルコントロール名LabelName
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadSkuName.Height
Size11
TextThisItem.name
WidthLabelHeadSkuName.Width
X0
YLabelHeadSkuName.Height
ラベルコントロール名LabelUnit
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadUnit.Height*2
Size11
TextThisItem.unit
WidthLabelHeadUnit.Width
XLabelSku.Width
Y0
ラベルコントロール名LabelPrice
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadPrice.Height*2
Size11
TextText(Value(ThisItem.price),”#,##0″)
WidthLabelHeadPrice.Width
XLabelUnit.X+LabelUnit.Width
Y0
ラベルコントロール名LabelAmount
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadAmount.Height*2
Size11
TextText(Value(ThisItem.unit) * Value(ThisItem.price),”#,##0″)
WidthLabelHeadAmount.Width
XLabelPrice.X+LabelPrice.Width
Y0
ラベルコントロール名LabelRemark
AlignLeft
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelHeadRemark.Height*2
Size11
TextThisItem.remark
WidthLabelHeadRemark.Width
XLabelAmount.X+LabelAmount.Width
Y0

フッタ部


帳票画面の最後に、フッタ部分の配置も次に示す図や表のプロパティ設定に従って行います。ここでは、「ラベル」を配置して明細の合計値を表示します。合計の計算には「ForAll関数」を使用して、レコードの値を集計する方法も考えられますが、今回は「Sum関数」を使用します。

フッタ部には「金額」の合計を表示しますが、元のデータには「数量」と「単価」しか含まれていないため、通常はレコード単位で計算した値を集計する必要があります。先ほどご紹介した「Sum関数」を使用し、「Sum(Gallery1.Selected.Detail, unit * price)」という式を記述することで、レコード単位で計算した値を簡単に集計することが可能です。

フッタ部の作成
「フッタ部」のプロパティ設定について
コントロールプロパティ設定値
ラベルコントロール名LabelSum
AlignCenter
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(255, 255, 255, 1)
FillRGBA(128, 128, 128, 1)
Height61
Size11
Text“合計”
※ プロパティペインから入力する際は「”」は不要です。
WidthLabelHeadSkuName.Width/2
XGallery2.X
YGallery2.Y+Gallery2.Height
ラベルコントロール名LabelSumAmount
AlignRight
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelSum.Height
Size11
TextText(Sum(Gallery1.Selected.Detail,unit*price),”#,##0″)
Width(LabelHeadSkuName.Width/2) + LabelHeadUnit.Width
XLabelHeadSkuName.X+(LabelHeadSkuName.Width/2)
YLabelSum.Y
ラベルコントロール名LabelSumTax
AlignRight
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelSum.Height
Size11
TextText(Sum(Gallery1.Selected.Detail,unit*price)*10%,”#,##0″)
WidthLabelHeadPrice.Width+LabelHeadAmount.Width
XLabelHeadPrice.X
YLabelSum.Y
ラベルコントロール名LabelSumTotalAmount
AlignRight
BorderColorRGBA(0, 0, 0, 1)
BorderThickness1
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
HeightLabelSum.Height
Size11
TextText(Sum(Gallery1.Selected.Detail,unit*price)+
Sum(Gallery1.Selected.Detail,unit*price)*10%,”#,##0″)
WidthLabelHeadRemark.Width
XLabelHeadRemark.X
YLabelSum.Y
ラベルコントロール名LabelFootAmount
AlignLeft
BorderThickness0
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
Height23
Size11
Text“税抜”
※ プロパティペインから入力する際は「”」は不要です。
Width80
X223
Y860
ラベルコントロール名LabelFootTax
AlignLeft
BorderThickness0
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
Height23
Size11
Text“消費税”
※ プロパティペインから入力する際は「”」は不要です。
Width80
X441
Y860
ラベルコントロール名LabelFootTotalAmount
AlignLeft
BorderThickness0
ColorRGBA(0, 0, 0, 1)
FillRGBA(0, 0, 0, 0)
Height23
Size11
Text“総額”
※ プロパティペインから入力する際は「”」は不要です。
Width80
X598
Y860

メイン画面から帳票画面へ画面遷移を実装

帳票画面の作成が終わりましたので、最後に「会社名」、「伝票番号」のリストが表示されているメイン画面から、選択した内容の帳票画面へ画面遷移するように、次のコントロールのプロパティ値を変更します。

画面コントロールコントロール名プロパティ設定値
Screen1図形(アイコン)NextArrow1OnSelectSelect(Parent);Navigate(Screen2);
※ 太字部分を追加します

動作確認

メイン画面、帳票画面それぞれの作成が完了しましたので、最後に動作確認を行ってみます。
次の動画のように、メイン画面で選択した「会社名」、「伝票番号」の帳票画面が表示され、[印刷]ボタンを押すと帳票ダイアログが表示され帳票の出力が可能となりました。

さいごに

今回の記事では、「Power Apps」のキャンバスアプリで「Print関数」を使用した帳票の作成方法についてご紹介しました。高度な帳票要件を持つアプリケーションを開発するには機能不足かもしれませんが、Excelのデータを元にした簡易的な帳票としては活用いただけるのではないでしょうか?本記事を参考にし、Power Appsで帳票作成を行う際にお役立ていただければ幸いです。

当社では、業務システムに必要な機能を備えた帳票ツールを提供しており、開発プラットフォームに応じて、.NET帳票コンポーネントの「ActiveReports for .NET(アクティブレポート)」、JavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」の2つの製品をご提供しています。高機能な帳票作成をお考えの方は、ぜひ是非Webサイトをご確認ください。

編集部ピックアップでは、「Power Apps」をはじめとした「Power Platform」関連の情報を公開しています。今後も継続して「Power Platform」関連情報をご紹介していきたいと思います。

\  この記事をシェアする  /