この記事でわかること
Power Appsでアプリを作るとき、「一覧・詳細・編集」を別々の画面に分けるのが一般的です。しかし、グローバル変数を活用すると、1つの画面だけで表示状態を切り替える設計が実現できます。実装時につまずいた経験をもとに、この記事では以下をまとめます。
- グローバル変数を使った画面切り替え（シングルスクリーン設計）の考え方
- Navigateを使った複数画面設計との違い
- ギャラリー＋フォームの横並びレイアウトの作り方
- FillPortionsが効かないときの原因と対処法
どんな状況で詰まったか
入力フォームアプリをPower Appsで作っていました。要件は、「SharePointリストを一覧で表示し、詳細表示とレコードの編集ができる」というものです。
最初は複数画面＋Navigateで設計しようとしていましたが、一覧を表示したまま詳細表示やレコードの編集がしたかったので、グローバル変数を使用して一画面で完結させるアプローチに変更することにしました。
いざ実装しようとしたところ、「グローバル変数って何？」「FillPortionsを設定したのにギャラリーが全幅を占領する」「Visibleをオンにしても幅が変わらない」といった問題が出てきました。
なぜうまくいかなかったのか
Navigate設計との違いを知りませんでした。
Power Appsには大きく2つの画面切り替えパターンがあります。
| 設計パターン | 特徴 |
|---|---|
| Navigate（複数画面） | 画面ごとにUIを分けて遷移する。 |
| グローバル変数（シングルスクリーン） | 1画面でVisible制御により表示を切り替える。 |
グローバル変数（Global Variable）とは、アプリのどの画面・コントロールからでも参照できる変数のことです。Set(変数名, 値) で値を変更でき、アプリを通じて状態を保持できます。
MainContainerの方向とFillPortionsの関係を知らなかった
FillPortionsは、コンテナの方向に沿って幅や高さを配分するプロパティです。
コンテナがVertical（縦）のままだと縦方向に割り振られてしまうため、横並びにするにはHorizontal（横）に変更する必要があります。
また、DisplayFormのVisibleプロパティがfalseの状態だとFillPortionsの計算から除外されるため、画面上の幅の配分がくずれていました。
シングルスクリーンの実装手順
Step1｜グローバル変数で3つの表示状態を定義する
今回使うグローバル変数は、以下の3つの値を取る設計とします。変数名はアプリに合わせて自由に決めてOKです。（ここではgModeとしています）
| gModeの値 | 表示する状態 |
|---|---|
"list" | 一覧のみ表示（初期状態） |
"detail" | 詳細表示（ギャラリー＋詳細フォーム） |
"edit" | 編集表示（ギャラリー＋編集フォーム） |
変数名の先頭に g をつけるのはグローバル変数であることを示す命名慣習です。Power Appsの公式ルールではありませんが、可読性のために私はよく使っています。
Step2｜AppのOnStartで初期値をセットする
ツリービューからAppを選択し、OnStartプロパティに「Set(gMode, “list”)」を入力します。これでアプリ起動時に一覧表示からスタートします。
コメントアウト（//）を使うと、他の値に切り替えながらデバッグするのに便利です。
Step3｜各ボタン・アイコンのOnSelectでgModeを切り替える
表示を切り替えたいタイミングで各ボタンのOnSelectプロパティにSet()を使います。
ギャラリーでレコードをタップしたときにgModeを変えることで、表示が切り替わる仕組みです。
| 操作 | OnSelectに入れる式 |
|---|---|
| ギャラリーのレコードを押す | Set(gMode, “detail”) |
| 編集ボタンを押す | Set(gMode, “edit”) |
| 戻るボタンを押す | Set(gMode, “list”) |
Step4｜MainContainerを横（Horizontal）に設定する
ツリービューからMainContainerを選択し、プロパティパネルで方向を「横」に変更します。
デフォルトは「縦」なので、変更を忘れるとギャラリーとフォームが縦に並んでしまいます。横並びレイアウトを作る場合は必ずここを確認してください。
Step5｜GalleryとFormにFillPortionsを設定する
MainContainerを横にしたあと、各コントロールのFillPortionsプロパティを「フレキシブルな幅」を有効にした状態で設定します。（ここではGallery 3：Form 7にしています。）
| コントロール | FillPortions |
|---|---|
| Gallery（一覧） | 3 |
| DisplayForm / EditForm（詳細・編集） | 7 |
Step6｜DisplayFormとEditFormのVisibleをgModeで制御する
DisplayFormとEditFormのVisibleプロパティに以下の式を設定します。Galleryは常時表示のため、VisibleはtrueのままでOKです。これにより、gModeの値に応じてDisplayFormとEditFormが自動的に表示・非表示を切り替えます。
| コントロール | Visibleに入れる式 |
|---|---|
| Gallery | true（変更不要） |
| DisplayForm | gMode = "detail" |
| EditForm | gMode = "edit" |
まとめ
この記事では、グローバル変数を使ったシングルスクリーン設計と、ギャラリー＋フォームの左右レイアウトについて解説しました。
今回のポイント
- グローバル変数に “list” / “detail” / “edit” の3状態を持たせ、Set() で切り替える
- App の OnStart でアプリ起動時のグローバル変数の初期値をセットする
- MainContainer は Horizontal にしないと横並びレイアウトが機能しない
- FillPortions で左右の幅比率を指定する
- DisplayForm と EditForm の Visible をグローバル変数の値で制御する
Power Platformを触り始めたばかりの方に向けて、こういった詰まりポイントをこれからも発信していきます。よかったらブログをブックマークして、またのぞきに来てください。
あわせて読みたい
この記事の前に読むとスムーズです。編集フォームの基本設定はこちら。
次のステップはこちら。ギャラリーの絞り込み機能の作り方です。
コメント