今回はローコードツール「Power Apps」のキャンバスアプリを使用した帳票の作成方法についてご紹介します。
Power Appsのキャンバスアプリケーションは、コントロールを簡単にキャンバス上にドラッグ&ドロップして、アプリを自由自在に作成できるため、幅広いユーザーに愛用されています。さらに、入力画面やリスト表示画面などには、便利なテンプレートが揃っており、手軽にアプリを作成できます。
しかし、帳票機能については、テンプレートの種類が限られているため、日本のビジネスに必要な帳票を作成するのが難しい場合があります。そこで、今回の記事では、キャンバスアプリケーションで帳票機能を実現する方法を詳しく解説します。実務で頻繁に利用される「請求書」を例に、帳票のレイアウト設計や合計金額の計算方法などを分かりやすくご紹介します。
目次
事前準備
今回は「Power Apps」の開発者向けプランを使用します。事前準備として開発者向けプランのアカウントの準備をしてください。また、こちらに今回の記事内で使用するサンプルデータを用意しています。ダウンロード後、解凍してご使用ください。
アプリの作成
今回作成するアプリでは、「Print関数」を利用します。この関数を実行すると、ブラウザーの印刷ダイアログが表示され、実行中のキャンバス画面をそのまま印刷することが可能です。複数ページの印刷やモバイルデバイスで動作しないなどの制約はありますが、この関数を利用することで手軽に帳票作成機能を追加できます。
今回はデータソースにExcelファイルを使用し、データを画面上に一覧表示をさせ、選択したリストを請求書の帳票として表示、印刷が行えるアプリを作成したいと思います。
キャンバスアプリを一から作成する
それでは、さっそくキャンバスアプリを作成していきたいと思います。アプリを作成するためにhttps://make.powerapps.comにアクセスし、事前に作成済のアカウントにてPower Apps にサインインします。
サインイン後、次のようにPower Appsのホーム画面が表示されますので、サイドバーより「作成」を選択します。
続いて、「アプリを作成する」のメニューから、「空のアプリ」を選択します。
「作成ダイアログ」から、「空のキャンバスアプリ」を選択し、[作成]ボタンを押します。
アプリ名に「CanvasReportsApp」と入力し、[作成]ボタンを押します。
次のようなアプリ作成画面(Power Apps Studio)が表示されると、アプリの作成が開始できます。
データソースの追加
アプリ作成の準備が整ったところで、今回帳票として表示するためのデータを準備します。次の図のように、サイドバーから「データアイコン」を選択し、データパネルを表示します。データパネルの「データの追加」をクリックすると、「データソースの選択」ダイアログが表示されますので、その中から「Excel Online (Business)」を選択します。
右側のサイドバーに「Excel Online (Business)」の接続画面が表示されるので、[接続]ボタンを押します。
「Excel Online (Business)」へ接続した後、対象のxlsxファイルを選択するために、右側のサイドバーにウィザードが表示されます。それぞのステップを次のように選択していきます。
「OneDrive for Business」を選択
「OneDrive」を選択
Excelファイルが保存されている、OneDrive上のフォルダを選択
対象のExcelファイルを選択
選択したExcelファイルから、データソースとするテーブルを選択
テーブル上のレコードを一意に特定するために、「自動生成したIDをExcelテーブルに挿入する」、「Excelテーブルにある一意の列を使用する」どちらかを選択します。
今回は「自動生成したIDをExcelテーブルに挿入する」を選択します。
左側のサイドバーにテーブル「invoice」が追加されていれば、データソースの追加は完了です。
メイン画面へコントロールを配置
続けて、アプリの画面上にコントロールの配置を行っていきます。今回作成するアプリケーションでは、次のようにデータを一覧上に表示してくれる、「ギャラリー」を配置し、その上にアプリケーションのタイトル表示用に、「図形(四角形)」と「ラベル」を配置していきます。
それぞれのコントロールの配置するには次のように、「モダンコマンドバー」上の「挿入」から、コントロールを選択し配置していきます。
また、プロパティ値は、以下の図に記した「プロパティリスト」、「数式バー」、「プロパティペイン」を使用して設定を行います。
それでは実際に、「図形(四角形)」と「ラベル」のコントロールを配置していきます。上で示したコントロールの配置方法と、プロパティ値の設定方法を参考にしながら、コントロールの配置を行い、以下のプロパティ値を設定していきます。
「図形(四角形)」と「ラベル」のプロパティ設定について
コントロール | プロパティ | 設定値 |
---|---|---|
図形(四角形) | コントロール名 | Rectangle1 |
Height | 100 | |
Width | Parent.Width | |
Fill | RGBA(0, 162, 115, 1) | |
X | 0 | |
Y | 0 | |
ラベル | コントロール名 | Label1 |
Height | 82 | |
Width | 688 | |
X | 39 | |
Y | 9 | |
Text | “Canvas Reports App” ※ プロパティペインから入力する際は「”」は不要です。 | |
FontWeight | Semibold | |
Size | 50 | |
Color | RGBA(255, 255, 255, 1) |
続いて「ギャラリー」コントロールは、以下のプロパティ値を設定してください。
「ギャラリー」のプロパティ設定について
コントロール | プロパティ | 設定値 | |
---|---|---|---|
ギャラリー | コントロール名 | Gallery1 | |
Height | Parent.Height-Rectangle1.Height | ||
Width | Parent.Width | ||
X | 0 | ||
Y | Rectangle1.Height | ||
Items | GroupBy(invoice,“no”,“companyname”,“Detail”) | ||
レイアウト | 選択肢:「タイトルとサブタイトル」を選択 ※ プロパティペインから設定を行います。 | ||
ギャラリー | 図形(四角形) | コントロール名 | Rectangle2 |
図形(四角形) | コントロール名 | Separator1 | |
図形(アイコン) | コントロール名 | NextArrow1 | |
ラベル | コントロール名 | Title1 | |
Height | Self.Size * 1.8 | ||
Width | Parent.TemplateWidth /2 | ||
X | 10 | ||
Y | (Parent.TemplateHeight-(Self.Size * 1.8 )) / 2 | ||
Text | ThisItem.companyname | ||
Size | 40 | ||
ラベル | コントロール名 | Subtitle1 | |
Height | Title1.Height | ||
Width | Parent.Width/3 | ||
X | Title1.X+Title1.Width | ||
Y | Title1.Y | ||
Text | ThisItem.no | ||
Size | 32 |
今回の「ギャラリー」の一覧出力では、重複するデータを表示させたくないため、「Items」プロパティに対して、あらかじめ用意したデータソース(invoice)そのものではなく、重複する「no」と「companyname」のレコードを「GroupBy関数」を使用して1つのレコードにまとめた状態で設定しています。
帳票画面の追加
ここまでで、画面上に「ギャラリー」を配置し、データの一覧表示が行えるようになりました。続けて、ギャラリー上の「>」アイコンが押された際に、帳票が表示できるように画面を追加していきます。
次の図のように「ツリービュー」>「画面タブ」>「新しい画面」>「テンプレート」から「縦長で印刷」を選択すると、新たな画面「Screen2」が追加されます。こちらには予め[印刷]ボタンが配置済みでこのボタンには「Print関数」が設定されているので、ボタンを押すと画面の内容をそのまま印刷することが出来ます。
帳票画面へコントロールの配置
では、さっそく作成した画面にコントロールを配置していきます。
元の画面へ戻るボタン
次の図のように、元の画面へ戻るためのボタンを配置します。初期状態のままだと印刷時にもボタンが表示されてしまい、帳票の邪魔になる可能性があるため、印刷時には表示しないように「Visible」プロパティを「Not(Parent.Printing)」と設定します。これにより、印刷時だけボタンが表示されないようになります。
その他のプロパティは次の表を参考に設定してください。
「元の画面へ戻るボタン」のプロパティ設定について
コントロール | プロパティ | 設定値 |
---|---|---|
ボタン | コントロール名 | ButtonBackScreen |
Height | 40 | |
Width | 160 | |
Fill | RGBA(0, 162, 115, 1) | |
X | 30 | |
Y | 25 | |
Text | “前の画面へ戻る” ※ プロパティペインから入力する際は「”」は不要です。 | |
Visible | Not(Parent.Printing) | |
OnSelect | Back() |
ヘッダ部
続いて、帳票のヘッダ部分を作成します。ヘッダ部分ではデータソースのフィールド「no」を表示する他、帳票タイトル、固定の会社名、担当者などを追加します。データソースの参照方法を前画面で選択された値「Gallery1.Selected.no」していますので、プロパティ値を設定し動作の確認をしてみてください。
「ヘッダ部」のプロパティ設定について
コントロール | プロパティ | 設定値 |
---|---|---|
ラベル | コントロール名 | LabelInvoiceHeadings |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 0 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 62 | |
Size | 32 | |
Text | “請求書” ※ プロパティペインから入力する際は「”」は不要です。 | |
Underline | true | |
Width | 266 | |
X | 255 | |
Y | 78 | |
ラベル | コントロール名 | LabelHeadNo |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “伝票番号” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 96 | |
X | 577 | |
Y | 106 | |
ラベル | コントロール名 | LabelHeadPerson |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “担当” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 96 | |
X | 673 | |
Y | 106 | |
ラベル | コントロール名 | LabelNo |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 28 | |
Size | 11 | |
Text | Gallery1.Selected.no | |
Width | 96 | |
X | 577 | |
Y | 134 | |
ラベル | コントロール名 | LabelPerson |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 28 | |
Size | 11 | |
Text | “葡萄 城太郎” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 96 | |
X | 673 | |
Y | 134 | |
ラベル | コントロール名 | LabelCompanyAddress |
Align | Left | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 0 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 126 | |
Size | 10 | |
Text | “キャンバス帳票開発 株式会社 〒 981-2222 M県S市紅葉区 杜王町2-6-11 電話:022-777-8210 むかでや銀行 杜王町支店 当座預金 123-45689″ ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 229 | |
X | 540 | |
Y | 176 | |
ラベル | コントロール名 | LabelHeadSkuName |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “商品番号・商品名” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 299 | |
X | 63 | |
Y | 302 | |
ラベル | コントロール名 | LabelHeadUnit |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “数量” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 73 | |
X | 362 | |
Y | 302 | |
ラベル | コントロール名 | LabelHeadPrice |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “単価” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 67 | |
X | 435 | |
Y | 302 | |
ラベル | コントロール名 | LabelHeadAmount |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “金額” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 96 | |
X | 502 | |
Y | 302 | |
ラベル | コントロール名 | LabelHeadRemark |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 28 | |
Size | 11 | |
Text | “備考” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 154 | |
X | 598 | |
Y | 302 |
明細部
続いて、明細部分の配置を行います。明細部分には「ギャラリー」コントロールを使用し、前の画面と同様にリスト表示を行います。先ほどはレイアウトプロパティを「タイトルとサブタイトル」としましたが、今回は複数の項目を表示する必要があるため、レイアウトを「空白」とし、「ラベル」コントロールを手動で追加していきます。各プロパティ設定に関しては、表の値を参考に設定してください。
「明細部」のプロパティ設定について
コントロール | プロパティ | 設定値 | |
---|---|---|---|
ギャラリー | コントロール名 | Gallery2 | |
Width | 689 | ||
Height | 522 | ||
X | 63 | ||
Y | 330 | ||
Items | Gallery1.Selected.Detail | ||
レイアウト | 選択肢:「空白」を選択 ※ プロパティペインから設定を行います。 | ||
ギャラリー | 図形(四角形) | コントロール名 | Rectangle5 |
Width | Parent.Width | ||
Height | 56 | ||
X | 0 | ||
Y | 0 | ||
BorderThickness | 2 | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
ラベル | コントロール名 | LabelSku | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadSkuName.Height | ||
Size | 11 | ||
Text | ThisItem.sku | ||
Width | LabelHeadSkuName.Width | ||
X | 0 | ||
Y | 0 | ||
ラベル | コントロール名 | LabelName | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadSkuName.Height | ||
Size | 11 | ||
Text | ThisItem.name | ||
Width | LabelHeadSkuName.Width | ||
X | 0 | ||
Y | LabelHeadSkuName.Height | ||
ラベル | コントロール名 | LabelUnit | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadUnit.Height*2 | ||
Size | 11 | ||
Text | ThisItem.unit | ||
Width | LabelHeadUnit.Width | ||
X | LabelSku.Width | ||
Y | 0 | ||
ラベル | コントロール名 | LabelPrice | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadPrice.Height*2 | ||
Size | 11 | ||
Text | Text(Value(ThisItem.price),”#,##0″) | ||
Width | LabelHeadPrice.Width | ||
X | LabelUnit.X+LabelUnit.Width | ||
Y | 0 | ||
ラベル | コントロール名 | LabelAmount | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadAmount.Height*2 | ||
Size | 11 | ||
Text | Text(Value(ThisItem.unit) * Value(ThisItem.price),”#,##0″) | ||
Width | LabelHeadAmount.Width | ||
X | LabelPrice.X+LabelPrice.Width | ||
Y | 0 | ||
ラベル | コントロール名 | LabelRemark | |
Align | Left | ||
BorderColor | RGBA(0, 0, 0, 1) | ||
BorderThickness | 1 | ||
Color | RGBA(0, 0, 0, 1) | ||
Fill | RGBA(0, 0, 0, 0) | ||
Height | LabelHeadRemark.Height*2 | ||
Size | 11 | ||
Text | ThisItem.remark | ||
Width | LabelHeadRemark.Width | ||
X | LabelAmount.X+LabelAmount.Width | ||
Y | 0 |
フッタ部
帳票画面の最後に、フッタ部分の配置も次に示す図や表のプロパティ設定に従って行います。ここでは、「ラベル」を配置して明細の合計値を表示します。合計の計算には「ForAll関数」を使用して、レコードの値を集計する方法も考えられますが、今回は「Sum関数」を使用します。
フッタ部には「金額」の合計を表示しますが、元のデータには「数量」と「単価」しか含まれていないため、通常はレコード単位で計算した値を集計する必要があります。先ほどご紹介した「Sum関数」を使用し、「Sum(Gallery1.Selected.Detail, unit * price)」という式を記述することで、レコード単位で計算した値を簡単に集計することが可能です。
「フッタ部」のプロパティ設定について
コントロール | プロパティ | 設定値 |
---|---|---|
ラベル | コントロール名 | LabelSum |
Align | Center | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(255, 255, 255, 1) | |
Fill | RGBA(128, 128, 128, 1) | |
Height | 61 | |
Size | 11 | |
Text | “合計” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | LabelHeadSkuName.Width/2 | |
X | Gallery2.X | |
Y | Gallery2.Y+Gallery2.Height | |
ラベル | コントロール名 | LabelSumAmount |
Align | Right | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | LabelSum.Height | |
Size | 11 | |
Text | Text(Sum(Gallery1.Selected.Detail,unit*price),”#,##0″) | |
Width | (LabelHeadSkuName.Width/2) + LabelHeadUnit.Width | |
X | LabelHeadSkuName.X+(LabelHeadSkuName.Width/2) | |
Y | LabelSum.Y | |
ラベル | コントロール名 | LabelSumTax |
Align | Right | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | LabelSum.Height | |
Size | 11 | |
Text | Text(Sum(Gallery1.Selected.Detail,unit*price)*10%,”#,##0″) | |
Width | LabelHeadPrice.Width+LabelHeadAmount.Width | |
X | LabelHeadPrice.X | |
Y | LabelSum.Y | |
ラベル | コントロール名 | LabelSumTotalAmount |
Align | Right | |
BorderColor | RGBA(0, 0, 0, 1) | |
BorderThickness | 1 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | LabelSum.Height | |
Size | 11 | |
Text | Text(Sum(Gallery1.Selected.Detail,unit*price)+ Sum(Gallery1.Selected.Detail,unit*price)*10%,”#,##0″) | |
Width | LabelHeadRemark.Width | |
X | LabelHeadRemark.X | |
Y | LabelSum.Y | |
ラベル | コントロール名 | LabelFootAmount |
Align | Left | |
BorderThickness | 0 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 23 | |
Size | 11 | |
Text | “税抜” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 80 | |
X | 223 | |
Y | 860 | |
ラベル | コントロール名 | LabelFootTax |
Align | Left | |
BorderThickness | 0 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 23 | |
Size | 11 | |
Text | “消費税” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 80 | |
X | 441 | |
Y | 860 | |
ラベル | コントロール名 | LabelFootTotalAmount |
Align | Left | |
BorderThickness | 0 | |
Color | RGBA(0, 0, 0, 1) | |
Fill | RGBA(0, 0, 0, 0) | |
Height | 23 | |
Size | 11 | |
Text | “総額” ※ プロパティペインから入力する際は「”」は不要です。 | |
Width | 80 | |
X | 598 | |
Y | 860 |
メイン画面から帳票画面へ画面遷移を実装
帳票画面の作成が終わりましたので、最後に「会社名」、「伝票番号」のリストが表示されているメイン画面から、選択した内容の帳票画面へ画面遷移するように、次のコントロールのプロパティ値を変更します。
画面 | コントロール | コントロール名 | プロパティ | 設定値 |
---|---|---|---|---|
Screen1 | 図形(アイコン) | NextArrow1 | OnSelect | Select(Parent);Navigate(Screen2); ※ 太字部分を追加します |
動作確認
メイン画面、帳票画面それぞれの作成が完了しましたので、最後に動作確認を行ってみます。
次の動画のように、メイン画面で選択した「会社名」、「伝票番号」の帳票画面が表示され、[印刷]ボタンを押すと帳票ダイアログが表示され帳票の出力が可能となりました。
さいごに
今回の記事では、「Power Apps」のキャンバスアプリで「Print関数」を使用した帳票の作成方法についてご紹介しました。高度な帳票要件を持つアプリケーションを開発するには機能不足かもしれませんが、Excelのデータを元にした簡易的な帳票としては活用いただけるのではないでしょうか?本記事を参考にし、Power Appsで帳票作成を行う際にお役立ていただければ幸いです。
当社では、業務システムに必要な機能を備えた帳票ツールを提供しており、開発プラットフォームに応じて、.NET帳票コンポーネントの「ActiveReports for .NET(アクティブレポート)」、JavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」の2つの製品をご提供しています。高機能な帳票作成をお考えの方は、ぜひ是非Webサイトをご確認ください。
編集部ピックアップでは、「Power Apps」をはじめとした「Power Platform」関連の情報を公開しています。今後も継続して「Power Platform」関連情報をご紹介していきたいと思います。