はじめに

※本記事は、こちらの記事の続きです。
経費申請モバイルアプリをつくってみた【構造・テンプレート準備編】

SharePoint、PowerAutomate、PowerAppsを使い、経費申請モバイルアプリを作成しました。
今回はPowerApps編です。

※追記：想像よりも長くなってしまったため、画像を取り扱う画面については別記事とします。

立ち位置と役割

PowerAppsを用いてキャンバスアプリを作成し、経費申請モバイルアプリの外側とします。

今回キャンバスアプリに持たせる役割は下記です。

情報の入力
画像の選択
画像の取り込み
PowerAutomateへ情報の引き渡し

画面構成

各画面と、その画面での入力情報イメージ図です。

情報入力画面

申請書に必要な情報を入力する画面です。
構成要素は下記です。

下記8項目の入力欄（テキスト入力コントロール）
① 申請日
② 部署
③ 社員番号
④ 氏名
⑤ 会計用途
⑥ 件名
⑦ 発生事象
⑧ 申請内容
上記8項目に対応したラベルコントロール
画面遷移（情報格納用）ボタン

情報確認画面

入力した情報を確認するための画面です。
構成要素は下記です。

入力した情報を表示するラベルコントロール（今回はテキスト入力コントロールを使います）
対応したラベルコントロール
画面遷移ボタン

画像メニュー画面

画像については、モバイル端末のフォトライブラリから選択するか、カメラで撮影したものをアプリ内で完結させるか、二択選べるようにします。
各画像選択画面への分岐用画面であり、申請に用いる画像の確認画面でもあります。
構成要素は下記。

画面遷移ボタン×3（画像撮影、画像選択、申請先選択）
画像プレビュー
画像切り替えラジオボタン
画像削除ボタン

画像撮影画面

PowerAppsにあるカメラ機能を使い、その場で画像を撮影する画面です。
構成要素は下記。

カメラコントロール
画像プレビュー
画像の名前入力欄
画面遷移（情報格納用）ボタン

画像選択画面

フォトライブラリから画像を選択できる画面です。
構成要素は下記。

画像選択コントロール
画像プレビュー
画像の名前入力欄
画面遷移（情報格納用）ボタン

申請先選択画面

申請先を決定し、申請時のコメントを記載する画面です。
申請先は総務か部長を選択できるようにします。
構成要素は下記。

申請先選択ラジオボタン
申請先コメント入力欄
申請ボタン

送信完了画面

申請が完了した後に遷移する画面です。
ユーザ的に、申請ボタンを押下したのに何も起きないのは違和感がある気がするので作成しておきます。
構成要素は何をおいても良いです。

情報入力画面の作成

完成イメージはこちら。

1.入力欄とラベルの配置

テキスト入力コントロール（赤枠）を配置し、それぞれが何を入力する欄なのかわかるよう要素に名前を付けておきます。
また、テキストラベル（青枠）も追加して名前がわかるようにおきましょう。
上記セットを必要数配置します。

2.画面遷移（情報格納）ボタンの配置

ボタンには、押した際に画面を遷移する処理と、入力欄に入っている値をグローバル変数に格納する処理を持たせます。
ボタンを配置し、OnSelectプロパティにに下記を入力します。

# 各変数に値を格納
Set(
    会計用途,
    会計用途text.Text
    
);
Set(
    部署,
    部署text.Text
);
Set(
    申請日,
    申請日text.Text
);
Set(
    氏名,
    氏名text.Text
);
Set(
    件名,
    件名text.Text
);
Set(
    発生事象,
    発生事象text.Text
);
Set(
    申請内容,
    申請内容text.Text
);
Set(
    社員番号,
    社員番号text.Text
);
# 次の画面に遷移
Navigate(情報確認画面)

情報確認画面の作成

完成イメージはこちら。

要素は情報入力画面とほぼ同じのため、画面自体コピーしても良いと思います。

編集する点は、以下の二点です。

①テキスト入力コントロールのDefaultプロパティに、前画面で作成したグローバル変数を当てはめる

※下図参照

②テキスト入力コントロールのDisplayModeプロパティを、Viewに変更する

ラベルコントロールではなくテキスト入力コントロールのため、そのままでは入力ができてしまいます。
DisplayModeをViewに切り替えることで、入力を防ぎます。

③ボタンのOnselectプロパティを修正

変数格納のためのSet等は削除し、Navigateのみにしておきます。

④戻るボタンの実装

入力内容に誤りがある等の理由から、前画面に戻りたいときのため、戻るボタンを実装します。
ボタンを配置し、OnSelectにNavigateを入れておきます。

PowerAppsで前画面遷移する処理を実装する際、引数なしback関数かNavigate関数で前画面を指定するかの方法がありますが、複数画面を作成するのであればNavigateの方が（想定外の挙動にならないため）おすすめです。

PowerApps（画像系）編へ

想定よりも長くなってしまったため、画像メニュー画面以降とは記事を分けました。
次記事へ続きます。