PowerApps

PowerApps : 編集フォームのタブデザイン

  • 2018.05.14
  • Rie Okuda

PowerApps で入力フォームをタブ切り替えできるように設定する方法をご紹介します。

入力項目が多くある場合、タブで切り替えながらフォームをページングしながら入力したいことがあると思います。入力フォームを複数に分けて作成する方法は PowerApps ではいくつかあげられます。例えば、PowerApps 画面 (スクリーン) を複数用意することも方法のひとつです。画面を複数作成し、入力項目を複数画面に分けてデザインします。この場合入力された内容の保存には、複数画面に分かれて入力された内容を Patch 関数や Collect 関数でデータソースに保存することになるでしょう。
今回は簡単な方法として1つの画面 (1つの編集フォーム) でタブ切り替えデザインを行う Tips をご紹介します。この場合データソースへの反映は SubmitForm 関数で行えますし、新規登録/既存データ編集の切り替えも FormMode の切り替えで行えるため、複数の画面に入力フォームを分けるよりもデータ保存に対する設定が簡単です。

■ 設定方法

1.編集フォームを任意に設定します。

  • 画面ショットは SharePoint フォームのカスタマイズ画面です。
    タイトル、test1、test2、test3.test4、test5 と列があり、SharePoint リスト フォームカスタマイズ時の既定で用意される編集フォームに列の並べ替え設定を行った内容です。

 

2.ボタンを配置してタブデザインを作る

編集フォームの縦幅を調整し、ボタンを2点配置します。
画面では、さらにボタンと編集フォームの間に四角を配置しています。

  • ボタンの Text プロパティはそれぞれ、 “Step1” “Step2”
  • ボタンの Width プロパティは 120
  • 四角アイコンの Height プロパティは 2

 

3.ボタンのプロパティ設定

ボタンに次のプロパティ設定を行い、切り替え動作のベースを作る

ボタン プロパティ 数式
Step1 ボタン OnSelect UpdateContext( { step1: true, step2: false } )
Fill If( step1, Blue , Gray )
Step2 ボタン OnSelect UpdateContext( { step1: false, step2: true } )
Fill If( step2 , Blue , Gray )
  • ボタンクリックで、step1 コンテキスト変数および step2 コンテキスト変数の値の true/false を切り替え
  • step1 変数、step2 変数の値によって、ボタンの色を変更

 

4.入力項目の切り替え

編集フォーム内の各カード (列ごと) に表示/非表示切り替え設定として Visible プロパティを変更します。

  • Step1 ボタンクリック時に表示したい列
  • Step2 ボタンクリック時に表示したい列

 

5.画面の OnVisible プロパティ

画面を開いた際に、Step1 タブが開いているように見えるよう、OnVisible プロパティを設定します。

完成したら発行して内容確認してみてください。
奥田でした。

お問い合わせ

イルミネート・ジャパンが提供するトレーニングやサービスに関するご相談など、
お気軽にご連絡ください。

担当者に相談する