Power AppsのVisibleプロパティを使った活用方法

本記事ではPower Apps初心者の方に向けてVisibleプロパティを使ってPower Appsの画面をカスタマイズする方法を紹介します。

目次

1.画面をカスタマイズした一例
2.Visibleプロパティとは？
3.Visibleプロパティで出来ること(参考例)
4.選択肢によって入力項目を変える方法
5.切り替えボタンによって項目の表示/非表示を切り替える方法
6.ダイアログを実装する方法

1.画面をカスタマイズした一例

例えば、本記事で紹介する方法を使うと選択内容に応じてフォームの表示する入力項目を切り替えることができます。

特に何も設定しないとフォームにすべての入力項目を表示し、誰がどれに記入すべきか注釈等を一つ一つ加える必要がありますが、Visibleプロパティの設定を行えば画面を動的に切り替えることができます。

何も設定しない場合

Visibleプロパティの設定を行った場合

今回はVisibleプロパティってどう使うの？と考えている方向けにいくつか活用方法を紹介いたします。

2.Visibleプロパティとは？

Power AppsのコントロールのプロパティにVisibleというプロパティがあります。このVisibleプロパティを編集することでコントロールの表示を切り替えることが可能です。
trueの場合にはコントロールを表示、falseの場合にはコントロールを非表示にします。
※コントロール：ボタンや入力ボックスなどのパーツのこと
※プロパティ：見た目、データの情報、何らかの操作がされたときに実行される処理などの設定が出来る項目のこと

3.Visibleプロパティで出来ること(参考例)

表示、非表示の切り替えという単純に見えるVisibleプロパティですが、ひと工夫加えることによってPower Appsの画面をリッチにすることができます。
工夫の仕方は様々ですが、今回は「選択肢によって入力項目を変える方法」、「切り替えボタンによって項目の表示/非表示を切り替える方法」、「ダイアログを実装する方法」の3つを紹介します。

4.選択肢によって入力項目を変える方法

アンケートフォーム等の中で「回答の選択肢によって次の質問を変える(条件分岐)」仕組みをPower Appsで実装する方法を下記に記載します。

4-1．選択肢によって入力項目を変えたいフォームを準備します。
今回は編集フォームを使い、タイトル、本文、カテゴリの入力フィールドを使います。
また、カテゴリの選択肢には例として「お知らせ」、「秘密」の2つが設けられています。

4-2.選択肢の入力フィールドを選択し、名前を変更します。
今回は記事内での表現をわかりやすくするためにCategoryに変更していますが、任意の名前で構いません。

4-3.”タイトル”の入力フィールドを選択し、Visibleプロパティに「If(Category.Selected.Value = “お知らせ”, true, false)」と入力します。
入力した際に”タイトル”の入力フィールドが非表示となります。

4-4.”本文”の入力フィールドも同じ要領でVisibleプロパティに「If(Category.Selected.Value = “秘密” , true, false)」と入力します。

4-1～4-4の手順を行った結果として”お知らせ”を選択した場合はタイトルが表示され、”秘密”を選択した場合は本文の入力フィールドが表示されます。

5.切り替えボタンによって項目の表示/非表示を切り替える方法

5-1.入力フォームを用意し、加えて”切り替え”コントロールを追加します。

5-2. ”切り替え”コントロールを選択し、名前を変更します。
今回は記事内での表現をわかりやすくするためにToggleに変更していますが、任意の名前で構いません。

5-3. ”切り替え”コントロールのOnCheckプロパティに”true”を設定し、OnUncheckプロパティに”false”を設定します。
※OnCheckプロパティ、OnUncheckプロパティはトグルがオン/オフ状態になったときに実行するアクションやデータを定義する設定です。
今回は項目の表示/非表示を切り替える基準を定義しています。

5-4. ”タイトル”の入力フィールドを選択し、Visibleプロパティに「If(Toggle.Value,true,false)」と入力します。
入力した際に”タイトル”の入力フィールドが非表示となります。

5-5,”本文”の入力フィールドにもVisibleプロパティに「If(Toggle.Value,true,false)」と入力します。

1~4の手順を行った結果として”切り替え”コントロールをオンにした場合は、タイトルと本文が表示され、オフにした場合は、タイトルと本文が非表示になります。

6.ダイアログを実装する方法

6-1.ダイアログ用のパーツとボタンを用意します。下図では四角形とテキストラベルと”閉じる”ボタンをグループ化しており、”Dialog”グループと名前を設定しています。

6-2.”ダイアログ表示”ボタンを選択し、OnSelectプロパティに「Set(popup,true)」と入力します。Set関数は、Power Appsで変数を定義し、その変数に値を設定するための関数です。変数は、アプリ内でデータを一時的に保存し、後で再利用するために使います。

6-3.”閉じる”ボタンを選択し、OnSelectプロパティに「Set(popup,false)」と入力します。

6-4.Dialog”グループ(下図の赤枠)をクリックし、Visibleプロパティに「popup」と入力します。

1~4の手順を行った結果として”ダイアログ表示”ボタンをクリックするとダイアログが表示され、”閉じる”ボタンをクリックするとダイアログが非表示に切り替わります。

まとめ

Visibleプロパティを活用したPower Appsのカスタマイズの一例を紹介しました。
Power Appsで「表示/非表示をコントロールするような実装をしたい」と思ったらまずはVisibleプロパティの設定から考えることをおすすめします。

最後に

テンダでは、「こんなプロジェクトに挑戦したい」「こんなチームで働きたい」「理想のチームを創りたい」と願う仲間を求めています。 カジュアル面談も随時受付中です。ぜひ一度お話ししましょう。
募集職種一覧
カジュアル面談の申込
テンダで働く人や社風について