このページでは問い合わせ管理アプリ構築の手順2「Power Appsの構築」を行います。
アプリは以下の手順で構築していきます。
- App.OnStart処理の設定
- 問い合わせ作成画面
- 問い合わせ履歴画面（ホーム画面）の構築
- 問い合わせ詳細画面
- 問い合わせ一覧画面（管理者）
- 回答入力画面
1. App.OnStart処理の設定
今回の問い合わせアプリではユーザーを示す一意値としてメールアドレスを使用します。
Power Appsアプリを作成したら、App.OnStartプロパティにて、グローバル変数にログインユーザーのメールアドレスを代入します。
2. 問い合わせ作成画面
「問い合わせ」を新しく作成する画面を構築します。
作成後は「問い合わせ履歴（ホーム）」画面へ自動で戻ります。
完成イメージ
画面には以下の要素を追加します。
- ヘッダ ：ラベル
- 「戻る」アイコン ：アイコン
- 新規作成フォーム ：編集フォーム
- 「登録」ボタン ：ボタン
各コントロール詳細
画面
この画面では、前の画面（ホーム画面）へ戻る際、新規作成フォームをリセットします。
画面のOnHiddenプロパティに新規作成フォームをリセットする処理を追加します。
ヘッダ
ラベルを使用し、ヘッダを作成します。
「戻る」アイコン
アイコンを使用し、選択時の処理に「前の画面に戻る」関数を指定します。
新規作成フォーム
編集フォームを使用し、問い合わせを新規作成するフォームを作成します。
まず、画面にフォームを追加し、既定モードプロパティにFormMode.Newを設定します。
また、登録が成功した際にホーム画面に遷移させるため、OnSuccessプロパティ内で「前の画面に戻る」関数を呼び出します。
以下各列の設定です。
カテゴリ
列「カテゴリ」は、SPOリスト「カテゴリ」から選択させるため、[フィールドの編集]から[カテゴリ]列を選択し、[許可値]を選択します。
「許可値」に変更すると、カテゴリDatacard内のテキストインプットがドロップダウンに変更されるので、ItemsプロパティにSPOリスト「カテゴリ」を選択します。
また、カテゴリDatacardのUpdateプロパティに、コンボボックスで選択しているカテゴリのIDを指定します。
完成イメージ
質問者
列「質問者」には常にログインユーザーのメールアドレスが入るよう設定します。
質問者DatacardのUpdateプロパティにグローバル変数に格納したログインユーザーのメールアドレスを設定し、質問者Datacardの表示を「非表示」に設定します。
質問日
列「質問日」は常に作成時点の日付が入るよう、カレンダーコントロールの「DefaultDate」プロパティに本日の値を取得する関数を設定します。
また、ユーザーが編集できないよう、カレンダーコントロールの編集モードをDisplayMode.Viewに変更します。
登録ボタン
ボタンを使用し、OnSelectプロパティで新規作成フォームの登録を行う関数を呼び出します。
以上で問い合わせ作成画面の構築は完了です。
3. 問い合わせ履歴画面（ホーム画面）の構築
すべてのユーザーが使用する「問い合わせ履歴画面」を構築します。
この画面では、自身が作成した「問い合わせ」履歴を一覧で表示します。
完成イメージ
画面には以下の要素を配置します。
- ヘッダー ：ラベル
- カテゴリフィルター ：コンボボックス
- 「未回答のみ表示」チェック ：チェックボックス
- 問い合わせ一覧 ：ギャラリー、ラベル
- 新規作成ボタン ：ボタン
各コントロール詳細
ヘッダー
ラベルを使用し、ヘッダーを作成します。
カテゴリフィルター
カテゴリで一覧をフィルターします。
データソースにSPOリスト「カテゴリ」を選択し、未選択時のテキストを「カテゴリでフィルタ」に変更します。
「未回答のみ表示」チェック
チェック時、未回答の問い合わせのみを表示します。
問い合わせ一覧
ログインユーザーが作成した問い合わせを、ギャラリーを使用して表示します。
※「カテゴリ」「質問日」「回答日」はラベルコントロールを使用します。
ギャラリーのItemsのフィルター式は以下の通り設定します。
- 質問者 = ユーザーのメールアドレス（グローバル変数）
- カテゴリ = カテゴリフィルターで選択中のカテゴリID
- 「未回答のみ表示」が未チェック or 回答日がBlank
カテゴリフィルター選択時
「未回答のみ表示」チェック時
「詳細へ」アイコン押下時の処理は、「問い合わせ詳細」画面への遷移処理を書きます。
遷移する際、引数として選択した「問い合わせ」リストアイテムのIDを渡します。
その他、ギャラリーの中の情報を表示するコントロールは任意で設定してください。
※サンプルではタイトル、カテゴリ、質問日、回答日、「詳細へ」アイコンを表示しています。
新規作成ボタン
「問い合わせ作成」画面へ移動するボタンです。
押下時の処理は、「問い合わせ作成」画面への遷移処理を書きます。
以上で問い合わせ履歴画面の作成は完了です。
4. 問い合わせ詳細画面
「問い合わせ」の詳細を表示する画面を構築します。
表示する「問い合わせ」は、画面遷移時の引数で指定します。
完成イメージ
画面には以下の要素を追加します。
- ヘッダ ： ラベル
- 「戻る」アイコン ： アイコン
- 問い合わせ詳細 ： 編集フォーム
各コントロール詳細
ヘッダー
ラベルを使用し、ヘッダーを作成します。
「戻る」アイコン
アイコンを使用し、選択時の処理に「前の画面に戻る」関数を指定します。
問い合わせ詳細
編集フォームを使用し、問い合わせの詳細を表示します。
※表示フォームを使用しても構いません。
フォームモードはDisplayMode.Viewを指定し、Itemプロパティには、画面遷移時の引数で渡されたIDが示す「問い合わせ」リストアイテムを設定します（LookUp関数を使用）。
列「カテゴリ」にはカテゴリのIDが保存されているため、LookUp関数を使用しSPOリスト「カテゴリ」よりカテゴリ名を取得して表示します。
その際、カテゴリを表示するテキストインプットの「書式」設定が「数値」のみになっていた場合は、「テキスト」に変更します。
※もし、列「カテゴリ」のDatacardのUpdateプロパティにてエラーが発生した場合、この画面ではSubmit関数を呼び出さない（更新は行わない）ため、Updateプロパティの内容はすべて削除してしまって問題ありません。
以上で問い合わせ詳細画面の構築は完了です。
5. 問い合わせ一覧画面（管理者）
管理者ユーザーがすべての問い合わせを一覧で表示する画面を構築します。
完成イメージ
画面には以下の要素を追加します。
- ヘッダ ： ラベル
- 「戻る」アイコン ： アイコン
- カテゴリフィルター ：コンボボックス
- 未回答のみ表示チェック：チェックボックス
- 問い合わせ一覧 ： ギャラリー
各コントロール詳細
ヘッダー
ラベルを使用し、ヘッダーを作成します。
「戻る」アイコン
アイコンを使用し、選択時の処理に「前の画面に戻る」関数を指定します。
カテゴリフィルター
カテゴリで一覧をフィルターします。
データソースにSPOリスト「カテゴリ」を選択し、未選択時のテキストを「カテゴリでフィルタ」に変更します。
「未回答のみ表示」チェック
チェック時、未回答の問い合わせのみを表示します。
管理者側（回答者側）の画面ではチェック状態を既定に設定します。
問い合わせ一覧
全ユーザーの問い合わせを、ギャラリーを使用して表示します。
※「カテゴリ」「質問者」「質問日」「回答日」はラベルコントロールを使用します。
ギャラリーのItemsのフィルター式は以下の通り設定します。
- カテゴリ = カテゴリフィルターで選択中のカテゴリID
- 「未回答のみ表示」が未チェック or 回答日がBlank
カテゴリフィルター選択時
「未回答のみ表示」未チェック時
各アイテムのアイコンと押下時の処理は、「回答が入力されているか？」によって変わるよう設定します。
- 回答あり：詳細アイコン →押下時の処理：問い合わせ詳細画面へ遷移
- 回答なし：編集アイコン →押下時の処理：回答作成画面（管理者用）へ遷移
いずれの遷移においても、引数として選択した「問い合わせ」リストアイテムのIDを渡します。
その他、ギャラリーの中の情報を表示するコントロールは任意で設定してください。
※サンプルではタイトル、カテゴリ、質問者、質問日、回答日、「編集／詳細」アイコンを表示しています。
問い合わせ一覧画面への遷移処理の作成
最後に、事前に作成した「問い合わせ履歴」画面に、「問い合わせ一覧」画面に遷移するためのアイコンを設置します。
このアイコンは管理者ユーザーがこのアプリを使用しているときのみ表示したいので、Visibleプロパティに「リスト「管理者」に登録されているユーザーがログインしている場合はtrue」となるよう式を入れます。
ヒント：LookUp関数で管理者リストを検索し、見つからなかった場合はfalseとなるよう式を作る。
ログインユーザーがリスト「管理者」に存在しない場合、アイコンを非表示にする。
以上で、問い合わせ一覧画面（管理者）の構築は完了です。
6. 回答入力画面
管理者が問い合わせに対し回答を入力する画面を構築します。
完成イメージ
画面には以下の要素を追加します。
- ヘッダ ： ラベル
- 「戻る」アイコン ： アイコン
- 回答登録フォーム ： 編集フォーム
- 回答ボタン ： ボタン
各コントロール詳細
回答登録フォーム
編集フォームを使用し、問い合わせの回答者、回答日、回答を登録します。
まず、回答者、回答日、回答以外のDatacardの表示モードすべてDisplayMode.Viewに変更し、ユーザーが編集できないように（回答者が質問内容などを変更できないように）します。
続いて、回答日Datacard内のカレンダーコントロールの表示モードをDisplayMode.Viewに変更し、DefaultDateにToday()を設定します。これにより回答日に自動で本日の日付が登録されるようになります。
また、回答者Datacard内のテキストインプットの表示モードも同様にDisplayMode.Viewに変更して、Defaultにグローバル変数「ユーザーアドレス」を設定します。これにより回答者にログインユーザーのメールアドレスが自動で入力されるようになります。
最後に回答DatacardのRequiredプロパティをtrueにし、必須入力項目に変更します。
回答ボタン
フォームに入力した回答を「問い合わせ」テーブルに登録するボタンです。
OnSelectプロパティには「回答登録フォーム」へのSubmit関数を入力します。
また、回答Datacard内のテキストインプットが空の場合は表示モードをDisplayMode.Disabledにし、回答を登録できないように修正します。
以上で回答登録画面の構築は完了です。
未実装機能・改善案
以上でPower Appsのアプリの構築は完了ですが、まだ以下のような未実装機能や改善案がありますので、自身で色々機能を改修してみましょう。
- 一般ユーザーの画面と管理者ユーザーの画面の違いがわかりにくい
- 質問者、回答者がメールアドレス表示で、ユーザーがわかりにくい
- 一度作成した問い合わせは取り下げできない
- 問い合わせの回答に対し、再質問ができない
