PowerApps│領収書を発行してメール送付するアプリの作り方

こんにちは、あんこ先生です。

事業を営んでいたり、副業に手を出したりしていると領収書の発行を求められることがあります。

手書きは手間がかかるし、物理的に発送しなければなりません。

ExcelやWordで作るのもよいですが、PDFにしてメール作ってとこれまた手間がかかります。

そんなとき、アプリで発行した領収書をそのまま相手にメールできたら楽ですよね。

PowerAppsなら一連の流れがアプリだけで完結します。

そこで、今回は領収書を発行してメール送付するアプリの作り方を紹介します。

コードはコピペできるので手慣れた人なら1時間くらいで作れますよ。

それでも作るのがめんどくさい！という方は、機能強化版を販売しています。
購入はこちらからどうぞ

Contents

1 領収書を発行してメール送付するアプリの作り方
2 領収書を発行してメール送付するアプリ│入力画面
3 領収書を発行してメール送付するアプリ│印刷画面
4 領収書を発行してメール送付するアプリ│送付画面
5 領収書を発行してメール送付するアプリの作り方のまとめ

領収書を発行してメール送付するアプリの作り方

作成するアプリは入力、印刷、送信の3画面で構成しています。

いきなり作り始めるとつまづくので、準備から始めましょう。

事前準備

準備するのは、領収書の情報を保存するためのSharePointリストとトレース用の領収書レイアウトです。

SharePointリストの内容と型は下記の通りです。

Excel経由でサクっと作ってしまいましょう。

SharePointリストの作り方がよくわからない人はこちらの記事をどうぞ。

2022.01.26

名前はtblReceiptとしましたが、なんでも構いません。

トレース用の領収書はなくても構いませんが、あった方が位置取りがかんたんなので楽になります。

領収書を発行してメール送付するアプリ│入力画面

はじめに入力画面から作ります。

過去ログを表示するギャラリー、領収書を入力するフォーム、ギャラリーで表現した簡易メニューがあります。

細かいところは端折ってますのであしからず。

①過去ログギャラリー

ここにSharePointリストの内容を表示します。

このギャラリーのレコードが選択された場合は、隣の入力フォームが編集モードになります。

また、印刷・送付時のデータはこのギャラリーで選択したレコードを参照します。

入力フォームでレコードを新規または更新した場合、その内容が選択状態になります。

主要プロパティのコードは次の通りです。

//Items
tblReceipt

データソースの指定です。

領収書のデータを格納するSharePointリストを指定しましょう。

//Default
frmInput.LastSubmit

ギャラリー選択の初期値です。

LastSubmitはフォームで最後に更新したレコードを格納しているので、それを指定します。

2022.03.07

Reset関数と組み合わせることで、更新の都度、そのレコードを選択状態にできます。

//OnSelect
EditForm(frmInput)

ギャラリーを押したときの動作です。

EditForm関数で入力フォームを編集モードに移行させます。

//TemplateFill
If(ThisItem.IsSelected && frmInput.Mode=FormMode.Edit,
    RGBA(196, 196, 196, 1),
    RGBA(196, 196, 196, 0)
)

ギャラリーテンプレートの背景色です。

どれが選択されているかわかりやすいよう色付けします。

入力フォームが新規モードの場合、まぎらわしいので色付けはしません。

これで①過去ログギャラリーは完成です。

②入力フォーム

レコードを作成したり追加したりするためのフォームです。

ここでは添付ファイルを格納しないため、そのカードは消すか非表示にしておきます。

簡易メニューから新規モード、過去ログギャラリーから編集モードに切り替えることができます。

主要プロパティのコードは次の通りです。

//DataSource
tblReceipt

データソースの指定です。

過去ログギャラリー同様、領収書のデータを格納するSharePointリストを指定しましょう。

//Item
galSelOrder.Selected

編集対象のレコードです。

過去ログギャラリーで選択したものを指定します。

//DataCardValuexx.Default
Int(Value(DataCardValuexx.Text)*10/110)

データカードに表示される、うち消費税額です。

Taxのデータカードの初期値を書き換えることで、金額入力と同時に表示されます。

これで②入力フォームは完成です。

③簡易メニューギャラリー

その名の通りメニューです。

ギャラリーで作る必要はほとんどありませんが、作ってみました。

難しいと感じたらアイコンを並べて対応してください。

機能は3つで、入力フォームを新規モードにする、入力フォームの更新を実行する、印刷画面委移動する、です。

右側にある削除アイコンは別枠ですが、組み込んでも構いません。

主要プロパティのコードは次の通りです。

//Items
Sequence(3)

ギャラリーのアイテム指定です。

今回3つでいいので、Sequence関数で3つ作っています。

中身はValue列のみで、1~3が格納されています。

//Labelxx.Text
Switch(ThisItem.Value,1,"新規",2,"保存",3,"印刷")

メニューの添え字です。

ギャラリーのValue値で表示内容をコントロールしています。

//Iconxx.Icon
Switch(ThisItem.Value,
    1,Icon.Edit,
    2,Icon.Save,
    3,Icon.Print
)

//Iconxx.OnSelect
Switch(ThisItem.Value,
    1,NewForm(frmInput),
    2,SubmitForm(frmInput);Reset(galSelOrder);,
    3,Navigate('Print Screen')
)

アイコンの見た目と押したときの動作です。

ギャラリーのValue値でアイコンの種類と押したときの動作をコントロールしています。

ひとつめのアイコンを押すと、入力フォームが新規モードに変わります。

ふたつめのアイコンを押すと、入力フォームの更新を実行し、過去ログギャラリーをリセットします。

これにより、過去ログギャラリーの選択が、入力フォームで最後に更新したレコードになります。

みっつめのアイコンを押すと、印刷画面に移動します。

領収書レコードが選択されていない（入力フォームが新規モード）と移動しないよう制御する場合は、次のコードに書き換えてください。

//Iconxx.OnSelect
Switch(ThisItem.Value,
    1,NewForm(frmInput),
    2,SubmitForm(frmInput);Reset(galSelOrder);,
    3,If(frmInput.Mode=FormMode.Edit,Navigate('Print Screen'))
)

データ削除用も必要なら別枠で作ってください。

//Iconxx.OnSelect
Remove(tblReceipt,galSelOrder.Selected)

これで③簡易メニューギャラリーは完成です。

領収書を発行してメール送付するアプリ│印刷画面

次は印刷画面です。

最背面にトレース用領収書イメージがあると作業が捗ります。

見ての通り、基本はひたすらラベルを置いていくだけです。

領収書のテンプレートを作成する

ひたすら、本当にひたすらラベルコントロールを配置していきます。

表になっている部分はBorderThickness（外枠の太さ）やFill（塗りつぶし）を使って表現しましょう。

宛名の下線だけは図形を使った方がかんたんですね。

ご参考

関連記事PowerApps│図解でわかる！コントロールごとの色設定

2022.04.15

レコードの値を表示する

大量に配置したラベルにひとつずつ数式を埋めていきます。

galSelOrder.Selected.ClientName

このように過去ログギャラリーで選択したレコードの値を指定していきます。

全体をひとつのギャラリーにしてしまえばすべてThisItemで指定することもできますよ。

ThisItem.ClientName

印刷する│PDFの作成

印刷ボタンに次のコードを記述します。

これで印刷が終わると送付画面に移動できます。

//PrintButton1.OnSelect
Print();
Navigate('Send Screen')

以上でこの画面は完成です。

領収書を発行してメール送付するアプリ│送付画面

最後は印刷時に作成したPDFをSharePointリストに保存して、メールする画面です。

領収書添付用のフォームと更新ボタン、あと最初の画面に戻るアイコンがあります。

PDFの添付方法

実際のアプリでは、印刷ボタンを押した後、プリンターをPDFとして保存と選べば好きな場所に保存できます。

それと同時に、Edgeであれば画面右上にダウンロードファイルが表示されるのでドラッグアンドドロップでフォームの添付ファイルカードに投げ込みます。

あとはこれを更新すれば、領収書のPDFはSharePointリストの添付ファイルとして保存されます。

ダウンロードファイルの画面が消えても、Ctrl+Jで再表示できるよ。

①添付用フォームと②更新ボタン

添付ファイルを追加するためのフォームです。

ここでは添付ファイルと確認用の番号とアドレス以外は不要なので、その他のカードは消すか非表示にしておきます。

DataSourceやItemは入力フォームと同じです。

主要プロパティのコードは次の通りです。

//OnSuccess
Office365Outlook.SendEmailV2(
    galSelOrder.Selected.Email,
    "領収書でーす！",
    "経費で落とせますよ",
    {Attachments:
        AddColumns(
            RenameColumns(galSelOrder.Selected.添付ファイル,"DisplayName","Name","Value","ContentBytes"),
        "@odata.type","")
    }
)

少し長いですよね。

OnSuccessは更新が成功したときに実行されます。

内容は領収書を添付してメールする処理です。

これをSubmit関数の後に付けた場合、更新が失敗しても実行されるのでオススメできません。

今回、Outlookコネクタを使用しているので接続を忘れないでくださいね。

SendEmailV2は、宛先・表題・本文・添付ファイルの順で指定しています。

前者3つはテキストそのままを与えれば動きます。

添付ファイルはやっかいなので別枠に分けます。

もうひとつ、更新ボタンはシンプルです。

単純にフォームを更新するだけですね。