[便利] 出番の多いPower Appsのスクリーンテンプレート
アプリ開発する中で使うシーンの多いテンプレートを紹介します。
Microsoftの公式リファレンスにも紹介されているテンプレートです。
テンプレート「承認要求」
テンプレート「承認要求」は、承認フローをアプリ化する時に使います。
承認フロー自体は、TeamsとPower Automateを組み合わせれば実現できます。
Power Appsにすることのメリットは、承認ステータスの可視化をはじめ、システムとして承認を管理したい時にあります。
スマートフォンで見ると、承認要求の画面だけが表示されます（入力欄はサンプル）。
このテンプレートの作りは、ヘッダーの下に、承認要求の入力エリアとレビューアのエリアがあります。
承認要求画面には、すでに編集フォームが用意されているので、データソースを指定すれば入力欄が自動作成されます。
このテンプレートで使われているヘッダーは、コンテナではなく、コントロールの「ヘッダー」 です。
ヘッダーコントロールを使うと、ロゴとユーザープロファイル情報を使うことが可能です。
ロゴは任意の画像を設置でき、ユーザープロファイル情報はUser().FullNameなどのUser関数が使えます。
右側のレビューアは、詳細設定 > Itemに下記の式があります。
※使い方は公式リファレンスを参照
[
{
Step: 1,
Name: "Name",
Title: "Title",
Status: "Approved",
Current: true
},
{
Step: 2,
Name: "Name",
Title: "Title",
Status: "Pending"
},
{
Step: 3,
Name: "Name",
Title: "Title",
Status: "Not Started"
},
{
Step: 4,
Name: "Name",
Title: "Title",
Status: "Not Started"
}
]
かいつまんで説明すると、Stepは承認順番、Nameは承認者、Titleは承認名（一次承認など）、Statusは承認ステータス、Current: trueが現在の申請位置を表します。
この画面では、Power Automateと連携させ、承認段階に応じてCurrent: trueを付け替えることになります。
上記を分かりやすく書き直したのが下記です。
[
{
Step: 1,
Name: "ここに一次承認者の名前",
Title: "一次承認",
Status: "Approved",
Current: false
},
{
Step: 2,
Name: "ここに二次承認者の名前",
Title: "二次承認",
Status: "Pending",
Current: true
},
{
Step: 3,
Name: "ここに最終承認者の名前",
Title: "三次承認",
Status: "Not Started",
Current: false
},
{
Step: 4,
Name: "申請者",
Title: "申請完了",
Status: "Not Started",
Current: false
}
]
Current: trueは現在の状態を表すので、Status: "Pending"のみが正しく、Status: "Approved"は承認済みとなります。
例えば、全てCurrent: falseであれば、それは申請前を意味します。
また、申請完了は全てStatus: "Approved"とCurrent: falseの状態になります。
いずれにしても、この部分はPower Automateでの制御事項になります。
Tips: テンプレート「承認要求」はPower Apps + Power Automate + データソースの合わせ技。
テンプレート「ようこそ画面」
テンプレート「ようこそ画面」は、画像と簡単なテキストを一覧表示する時に使います。
例えば、製品や部署の紹介アプリを作る場合、コンテンツを大別し、一覧にして見せます。
Webサイトのカードのような見せ方が可能で、スマートフォンで見ても違和感がありません。
このテンプレートの作りは、ヘッダー用とコンテンツ用の二つのコンテナが用意され、ヘッダー用にはヘッダーコントロールがあり、コンテンツ用には6つの垂直コンテナがあります。
さらに、コンテンツ用の6つのコンテナ内には画像用とテキスト用のコンテナが配置されています。
※垂直コンテナ > 水平コンテナ > 垂直コンテナ > 垂直コンテナ の構成
なお、コンテンツ用のコンテナは6つに限らず、追加すればスクロールが使えます
ステップ2でも記載しましたが、コンテナを階層化することで、レイアウトが決めやすくなっています。
テンプレート「ヘッダーとギャラリー」
テンプレート「ヘッダーとギャラリー」は、テンプレート「ようこそ画面」と似ていますが、こちらはギャラリーコントロールを使っています。
テンプレート「ようこそ画面」は一つ一つのカードに画像やテキストを設定できるのに対し、テンプレート「ヘッダーとギャラリー」はデータソースのデータをそのまま使って一覧にします。
デザイン自体はテンプレート「ようこそ画面」と変わらないので、同じくスマートフォン向けには見栄えが良いです。
このテンプレートの作りは、ギャラリーコントロールが核になっています。
テンプレート「ようこそ画面」が一覧表示の紹介アプリに対し、テンプレート「ヘッダーとギャラリー」はコンテンツの入口としての役割を持たせられます。
ギャラリーコントロールの構成が、画像、テキスト、ボタンのため、ボタンを押下することでユーザーは任意のスクリーンに遷移可能です。
テンプレート「ヘッダーとフォーム」
テンプレート「ヘッダーとフォーム」は、データ送信を行うアプリに使います。
例えば、報告アプリや申請アプリはこのテンプレートを使うと楽です。
スマートフォン向けにサイズ変更しても、フォームの形が崩れないため、出先の申請でも使用に耐えます。
このテンプレートの作りは、ヘッダーのコンテナと、フォーム用のコンテナで構成されています。
最下部のボタンは、メインコンテナ（水平コンテナ）内にボタン用の水平コンテナがあり、その中でキャンセルボタンと送信ボタンが並べられているだけです。
すでに編集フォームが用意してあるので、任意のデータソースを設定するだけで、入力フォームが完成します。
入力項目はデータソース（例えば、SharePointリスト）で用意するだけなので、開発の負担もありません。
ヘッダーの色味を変えていくだけで、様々な申請系アプリができます。
テンプレート「ヘッダーとテーブル」
テンプレート「ヘッダーとテーブル」は、ヘッダーのコンテナと、テーブル用のコンテナで構成されています。
テーブルに使用するデータはコネクタから選択でき、Excelの場合はあらかじめ対象範囲をテーブル化しておく必要があります。
※データソース > Excelコネクタ > 場所（SharePointサイトなど） > ドキュメントライブラリ > ファイル選択 > テーブル選択
データソース側で一意列（No.列など）を用意していない場合、自動で付すことが可能です。
また、データソースを設定後、テーブルコントロールで表示するフィールドを選択します。
スマートフォン向けは、下図のようになります。
このテンプレートの作りは、メインコンテナのテーブルが核です。
テーブルコントロールでは、対象行を選択しても画面遷移しません（遷移する画面は自動生成されない）。
あくまで、テーブル形式の表示アプリとなっています。
一覧表示して見せるデータある場合、SharePointリストで見せると、アクセス権限の設定などに考慮する必要があります。
ですが、このようなアプリにしておけば、見ることしかできないため、有効です。
テンプレート「テーブルとフォーム」
テンプレート「テーブルとフォーム」は、ヘッダーのコンテナと、テーブルとフォームを持ったメインコンテナの構成です。
テンプレート「ヘッダーとテーブル」が一覧表示用なのに対し、このテンプレートはテーブルデータを編集可能です。
データソースをテーブルにすると、メインコンテナは選択用のサイドメニューと編集用のフォームエリアに変わります。
※二か所とも同じデータソースを設定する必要があります
スマートフォン向けの画面で見ると、まずは既存データの一覧と検索、新規作成の画面が出ます。
既存データを選択すると、編集と消去ができる画面に遷移します。
このテンプレートの作りは、テンプレート「ヘッダーとテーブル」と同じように、メインコンテナのテーブルが核です。
サイドメニューは一見ギャラリーコントロールを使っているように見えますが、これはテーブルコントロールです。
テーブルデータをデータソースとして使い、編集も許可させる場合、このテンプレートが有効です。
広告