[power apps]テニスコート申請画面を作成する Part4 フォームの画面遷移の実装(レスポンシブ対応/全手順公開)

eh657883

やること

  • Power AppsからSPOリスト「テニス会場レンタル申請データ」をフォームの要素として追加する。
  • フォームを4つに分割する。
  • 「戻る」「次へ」ボタンのクリックで各フォームの表示／非表示を切り替える。

手順

１．SPOリストの参照追加

  1. 画面上部の「データの追加」を選択
  2. 検索条件に「SharePoint」と入力し、SharePointのアイコンを選択
  3. SPOリストの格納されるShare Point Site (今回はテニス会場管理)を選択
  4. 一覧からSPOリスト「テニス会場レンタル申請データ」にチェックを入れる
  5. 「接続」ボタンをクリック

 

２．編集フォームの追加

    1. MainContainer直下にフォームを追加するため、MainContainerをクリックしフォーカス状態にする
    2. 編集フォームを追加 (「+挿入」 > 編集フォーム)、テニス会場レンタル申請データを選択
    3. ＭainＣontainer内に項目一覧が追加されたことを確認
    4. 各フォームに共通する以下のプロパティを設定

      /** プロパティ名: 設定値 */

// 新規モードを設定
DefaultMode: FormMode.New

// ディスプレイからのみ設定できる
列へのスナップ: オフ

Width: Parent.Width
Height: Parent.Height

      編集フォームには、新規モードと編集モードがある。
      編集モードでは既存のデータに対して更新を行うが、今回は新規登録であるため、新規モードを設定する。

    5. Form1直下のオブジェクトをShift + 左クリックで全て選択 > Delete ですべて削除する。
      多くのオブジェクトを含むフォームを複製すると非常に時間がかかるため（場合によっては数分）先に削除してから必要なオブジェクトを追加していく。
    6. Form1を選択し、Ctrl + C > Ctrl + Vで複製
      それぞれのフォーム名を以下の通り設定
    7. Formを選択し、プロパティ > フィールド > フィールドの編集を選択
    8.  「+フィールドの追加」を選択
    9. 必要分チェックを入れ、追加ボタンをクリック
      追加するオブジェクトについては次の手順11.を参照
    10. 画面上に選択したオブジェクトが表示されることを確認
    11. 4つのフォームに以下のようにオブジェクトを追加できたことを確認

３．画面遷移の実装

今の状態では、4つのフォームが重なっていて、ユーザーが利用できる状態ではない
そのため、各フォームの表示・非表示を切り替える処理を実装する

Power Appsに「ステップID」の情報を与えて、IDが1であれば会場選択Formを、IDが2であれば日程選択Formを表示させる

  1. Appオブジェクトを選択

  2. AppのOnStartプロパティにStepIDの情報を定義 
    OnStart:
/** 各フォームに固定の番号を割り振る */
Set (glb会場選択_STEP_ID, 1);
Set (glb日程選択_STEP_ID, 2);
Set (glb備品選択_STEP_ID, 3);
Set (glb代表者入力_STEP_ID, 4);

/**
   現在画面に表示したいフォームの番号を保持
   初期値は会場選択フォームの番号を設定
*/
Set (glbCurrentStepId, glb会場選択_STEP_ID);
  3. Appオブジェクトを右クリックし、「OnStartを実行します」を選択
    そうすると、上記Set関数が呼ばれ、「glb会場選択_STEP_ID」という定数がPower Apps内に保持される。
  4. 続いて、フォームの表示・非表示設定のため各フォームのVisibleプロパティを編集 
    Visible: If (glbCurrentStepId = glb会場選択_STEP_ID, true, false)
    Visible: If (glbCurrentStepId = glb日程選択_STEP_ID, true, false)
    Visible: If (glbCurrentStepId = glb備品選択_STEP_ID, true, false)
    Visible: If (glbCurrentStepId = glb代表者入力_STEP_ID, true, false)

    Visibleは初期値では「true：常に表示」であるが、If文を使うことで、現在のステップIDが自分のフォームのStepIDと一致するときだけtrueになる。

    1. 「次へ」ボタンでステップIDを切り替える 
      OnSelect: 
　　If (glbCurrentStepId <> glb代表者入力_STEP_ID
    　　,
    　　Set (glbCurrentStepId, glbCurrentStepId + 1)
　　)

      Set関数でステップIDを1ずつ増やしている。
      ただし、今回用意するフォーム数(ステップID)は1 ~ 4であるため、ステップIDが4の場合はSet関数を呼ばないようにする。

    2. 「戻る」ボタンでステップIDを切り替える 
      OnSelect: 　
　　Set (glbCurrentStepId, glbCurrentStepId - 1)
Visible:
  　If (glbCurrentStepId = glb会場選択_STEP_ID, false, true)

      考え方は次へボタンと同じで、クリックされたらステップIDを1減らしているだけである。
      ただ、一番初めのフォームから戻るボタンが表示されるのは不自然なので2番目以降のフォームから表示させるようにする。
      表示と非表示の切り替えが必要になるので手順4と同じように「Visible」プロパティを編集する。

    3. 最後に進捗ステータスを表す画像もステップIDの値で切り替える。 
      Switch(glbCurrentStepId
  , glb会場選択_STEP_ID , 'ナビゲーションメニューStep1'
  , glb日程選択_STEP_ID , 'ナビゲーションメニューStep2'
  , glb備品選択_STEP_ID , 'ナビゲーションメニューStep3'
  , glb代表者入力_STEP_ID, 'ナビゲーションメニューStep4'
)

４．動作確認

Power Appsの上部メニューに再生マークがあるのでクリックすると、アプリのプレビュー画面が表示される
「戻る」ボタンと「次へ」ボタンを押して

  • 4つのフォームが切り替わること
  • ナビゲーションメニューが4段階で切り替わること
  • 会場選択フォームには「戻る」ボタンがないこと
  • 代表者入力フォームで「次へ」ボタンを押しても反応しないこと

が確認できればよい。

プレビュー画面を終了するにはEscキーを押す。

 

記事一覧