LoginSignup
0
0

More than 1 year has passed since last update.

PowerAppsで、遷移先のスクリーンをドロップダウンで選択する

Posted at

概要

PowerAppsで、Navigate関数でスクリーンを遷移する際、Dropdownコントロールで選択したスクリーンに遷移する方法です。
Dropdownコントロールのソースに、Screenコントロールをぶち込んで、

準備

こんな感じで、メインスクリーンのほか、遷移先となるスクリーンを3つほど作成します。(もっとたくさん作っても構いません)
2022-08-11_08h56_23.png

メインスクリーン

メインスクリーンは、遷移先を選択するDropdownと、Navigate関数を実行するButtonコントロールを配置。
2022-08-11_08h57_03.png

画面A・B・C

画面Aには、画面Aであることが分かるようにするLabelと、戻るアイコンを配置。
戻るアイコンには、OnSelectに、Back()関数を記述
2022-08-11_08h58_34.png
画面Bと画面Cも同様。

失敗

ここから、ロジックを記述していきます。

App の OnStart

OnStart に、以下を記述します。
2022-08-11_09h05_30.png

Clear(SelectScreen);
ForAll([画面A,画面B,画面C],Collect(SelectScreen,ThisRecord))

注意は、ForAllの最初の引数で画面Aから画面Cの配列を渡していますが、この要素は引用符で囲まないことです。
それによって、Screenコントロールの名前ではなく、Screenコントロール自体を配列の要素として指定します。

Dropdownコントロール

続いて、Dropdownコントロールのソースを指定します。
DropdownコントロールのItemsプロパティにSelectScreenコレクションを指定
2022-08-11_09h09_55.png
「別のコレクション レコードの構造体が必要です。」と怒られました。
SelectScreen.Valueを渡しても、・・・
2022-08-11_09h10_15.png
やっぱりダメ。

Comboboxコントロールならどうだ?

新たにCombobox コントロールを配置して、ItemsプロパティにSelectScreen.Valueを設定。
エラーにはならないが、・・・
2022-08-11_09h17_13.png
ドロップダウンに表示されない、・・・。
2022-08-11_09h17_57.png
3個あるので、何やら3つは入っているらしい。
Labelコントロールで確認すると、
2022-08-11_09h21_32.png
確かにScreenコントロールが入っている。
ちなみにButtonコントロールにNavigate関数を書くと、動作します。
2022-08-11_09h24_25.png
Animation.gif

修正

Comboboxを使ったやり方で動作はするものの、DisplayFieldを弄ったりしてもどうにも表示が見えないので、少しやり方を変えます。

App の OnStart を修正

OnStart の動作を修正し、SelectScreenコレクションに、NameとControlという2つのプロパティを持つレコードを格納してやるようにします。
2022-08-11_09h42_47.png

Clear(SelectScreen);
ForAll([画面A,画面B,画面C],Collect(SelectScreen,{Name:ThisRecord.Value.Name,Control:ThisRecord.Value}))

DropdownやComboboxのソース(Itemsプロパティ)は、SelectScreen.Valueではなく、SelectScreenを設定
2022-08-11_09h50_07.png
Dropdownのソースを修正すると、何やら表示されました。
ComboboxもソースをSelectScreen.ValueからSelectScreenに修正すると項目名が正しく表示されるようになります。
下図で [object Object]とか表示されているのは、修正前に選択した状態が残っているためです。
プレビューで、[object Object] を×で選択解除すると、これ以降は出てきません。
2022-08-11_09h52_01.png

ほかの場所も修正して完成

DropdownでもComboboxでも(あるいはほかのコントロールでも)、スクリーンを選択できるようになります。
いちいち選択して、ボタンをクリックするのは面倒なので、それぞれのコントロールのOnChangeプロパティに、Navigate関数を記述していきます。
先ほどボタンのOnSelectに記述したのは、[Control名].Selected.Valueでしたが、[Control名.Selected.Controlになります。
ソース(Itemsプロパティ)は、SelectScreenコレクションになります。
2022-08-11_10h09_47.png

動作確認

ついでにRadioボタンもつけてみました。
いづれの方法でも、選択した画面に遷移できることが確認できると思います。
Animation1.gif

まとめ

ポイントは以下の通りです。

  1. OnStartで、NameとControlの2つのプロパティを持ったScreenコントロールのコレクションを作成する
  2. 遷移先の選択用コントロールのItemsプロパティに、Screenのコレクションを指定する
  3. 選択用コントロールのValueやDisplayNameに、ScreenコレクションのNameプロパティを指定する
  4. 選択用コントロールのOnChangeに、Navigate関数を記述して、第一引数に"Self.Selected.Control"を指定する。(別にボタンを用意しても可)

このようなやり方をしなくても、Switch関数とかで場合分けして遷移先を選んでやれば、これと同じ動作をさせることはなんぼでもできます。
ただ、画面が今後も増えていったり、遷移する方法を変えたりといったことがあるたびに、Itemsプロパティを修正したり、Navigate関数を修正したりするのは、修正漏れが出てきたりしてメンテナンス性がかなり悪くなります。
このやり方だと、スクリーンの追加をした場合でもコレクションに追加するだけで、Dropdown等のコントロールを修正する必要はなくなります。
なので、画面の追加や修正がかなり楽になるのではないでしょうか。
(迷路ゲームとか脱出ゲームに使えそうな気がします。作りませんが...)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0