【Power Apps】ギャラリー内での編集機能の作り方（DisplayMode、Visible、Reset属性の使い方）
この記事ではPowerAppsのギャラリー内でテキスト入力コントロールを使った直接編集する機能の作り方をお見せします。そのカギの「Default」、「DisplayMode」、「Visible」属性の使い方もマスターできます。
（動画時間：11:04）
Udemyオンラインコースを運営しています。
マイクロソフトPowerApps 中級編【SharePointで、実務で使える業務アプリの作り方：勤怠管理アプリ編】
⇒ 半額になる「ディスカウントリンクページ」へ
まず、ギャラリー内での編集機能の完成形を見る。
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今日は久しぶりにマイクロソフトのPowerAppsの話です。
皆さん、データの一覧表示をするのにギャラリーコントロールをよく使いますね。
そのギャラリーの中で直接編集できたらいいなと思ったりしませんか？
既定ではギャラリーにその様な機能はありませんが、
テキスト入力コントロールと組み合わせる事で
それを実現する事ができます。
まずはその完成形をお見せしましょう。
これはテストアプリで、ギャラリーコントロールで顧客の一覧をしています。
これを閲覧モードとしましょう。
その中の鉛筆の編集アイコンをクリックすると、
その行のラベルが、テキスト入力コントロールに変わって
編集ができる様になります。これが編集モードです（下図参照、二行目）
その間は他の行の鉛筆アイコンは消えて、
その代わりにその行に保存ボタンとキャンセルボタンが表示されます。
この様にその時不必要なものは非表示にする事で
ユーザーの使い勝手が上がり、また、エラーの防止になります。
キャンセルボタンを押すと、初めに戻るし、テキストを編集して、
保存ボタンを押すとそれがデータソースに保存されます。
PowerAppsでは通常、行を選んで、編集画面に移動してそこで編集していましたが、
今回のやり方だと同じ画面で直ぐに編集ができるので、
使い勝手が上がると思います。どうでしょうか？
それではこの画面の作成をやってみましょう。
テキスト入力の「Default」属性でギャラリーの値を表示する。
メニューバーの「挿入」から、「ギャラリー」で「縦方向（空）」を選び、
そして表示をさせたい情報のデータソースを選びます。
ギャラリー内、上部のテンプレート部分を選んだ状態で、
「テキスト入力」を一つ追加して、
フォントの大きさなどの書式を完了しておきます。
そしてこれをコピペすると作業が速いです。
それらのコントロールを全て選択した状態で
「ホーム」の「配置」を使うときれいに並べられます。（下図参照）
次に各テキスト入力にデータソースの規定値を表示します。
「Default」属性で、「ThisItem.列名」で行えます。
「ThisItem.」とタイプすると対象のテーブルの列名が
サジェスチョンで出てきますので、
そこから選ぶと、その列の値を表示できます。
これを全てのテキスト入力で行います。
テキスト入力の「Default」属性
=ThisItem.Customer
データソースのID列を使って、選んだ行だけ違う動きをさせる。
次に編集ボタンを作りましょう。
また、ギャラリー内の上部を選んだ状態で、
「挿入」、「アイコン」から、「編集」アイコンを追加します。
テキスト入力は既定では全て編集モードです。
しかし、普段は閲覧モードで、編集ボタンを押した行だけ
編集モードになる様にしたいのです。
その時に便利なのが「ID」列を使う事です。
今回はSharePointリストをデータソースにしていて、
全てのレコードで重複無しの通し番号が自動で作られ、
それがID列なのです。
編集ボタンの「OnSelect」属性で、
UpdateContext関数で変数：「編集対象」に
その行のID列の値を代入します。
この変数を使う事で、この行だけ違う表示を行う事ができるのです。
編集ボタンの「OnSelect」属性
=UpdateContext({編集対象:ThisItem.ID})
テキスト入力の編集モードと閲覧モードに切り替える「DisplayMode」属性の使い方
テキスト入力の表示を編集モードと閲覧モードに切り替える制御を
「DisplayMode」属性で行えます。
既定では「Edit」で、編集モードです。
そこを「もし、この行のID列の値が変数：「編集対象」の値と同じなら、編集モードに、
違うなら、「View」で閲覧モードにする」という数式を入れます。
テキスト入力の「DisplayMode」属性
=If(編集対象=ThisItem.ID, DisplayMode.Edit, DisplayMode.View)
現在その変数の値は空白なので、全ての行が閲覧モードですが、
編集ボタンをクリックするとその行だけ編集モードになります。
この式をコピーして、他の全てのテキスト入力の
「DisplayMode」属性にペーストします。
必要な時に必要なボタンだけ表示してユーザーの使い勝手を上げる。
編集モードの時に保存ボタンとキャンセルボタンが欲しいですね。
まずそれらをギャラリー内に追加します。
追加直後のままだと全ての行に表示されます。
選択した行だけに表示させたい時に「Visible」属性が使えます。
その中でさっきの「DisplayMode」属性と同じ条件式の「編集対象=ThisItem.ID」が使えます。
ここではtrueとfalseの結果が欲しいので、If文なしでこのままで上手くいきます。
If文を使ってもできますが、If文無しで簡単な記述をしましょう。
保存ボタンの「Visible」属性
=編集対象=ThisItem.ID
もしくは
=If(編集対象=ThisItem.ID,true,false) ← これは無駄の多い記述法
一方、編集ボタンは全て消えてほしいですね。
その「Visible」属性に、「IsBlank(編集対象)」と入れます。
これは変数：編集対象の値が空白の時は「true」となり、
その全てのボタンが表示されます。
編集モードの時はその変数に必ずどれかのID列の値が入っていて、
その時は全ての編集ボタンが消えてその式で丁度いいのです。
一方、キャンセルボタンの「OnSelect」属性には
UpdateContext関数で変数：「編集対象」にBlank関数で空白を代入すれば、
それを押した時に編集モードを終え、全ての行を閲覧モードにできるのです。
これで表示の切替がうまくできる様になりました。
キャンセルボタンの「OnSelect」属性
=UpdateContext({編集対象:Blank()})
コントロールをリセットする「Reset」関数と「Reset」属性の違い
一つのコントロールをリセットする「Reset」関数
ここで一つ問題があります。
ある行で編集モードで編集をしている途中でキャンセルをした時、
その変更の状態で閲覧モードになってしまいます。
しかし、保存をしていないので、データソースは変わっていません。
そこでユーザーは変わったと勘違いしてしまうかもしれません。
ですからキャンセルをした時はその変更前の状態、
つまり、データソースの値に戻したいです。
それをするのが、「Reset」関数です。
キャンセルボタンの「OnSelect」属性内で、セミコロンを入れた後に、
Reset関数内にリセットしたいコントロール名を入れます。
するとキャンセルボタンを押すと、変更前に戻ります。
キャンセルボタンの「OnSelect」属性
=UpdateContext({編集対象:Blank()}); Reset(コントロール名)
複数をまとめてリセットをする「Reset」属性
今回は対象が３つだけなので、
Reset関数を三つ入れればいいですが、
対象が多数になると大変です。
そこで多数のコントロールを
まとめてリセットできる便利な方法もご紹介しましょう。
実は入力系のコントロールには全て「Reset」属性があります。
そこに新しい変数を一つ入れ、ここでは「リセット」とします。
他のテキスト入力も同じ様にします。
この時点ではこの変数をまだ定義していないのでエラーがでます。
まとめてリセットしたいコントロールの「Reset」属性
=リセット
そしてキャンセルアイコンにさっきのReset関数を消して、
その代わりにUpdateContext関数内で新たに変数：「リセット」に「true」を入れます。
キャンセルボタンの「OnSelect」属性
=UpdateContext({編集対象:Blank(), リセット:true})
プレビューモードにして、編集ボタンを押して
入力テキスト内のテキストを適当に変更します。
そしてキャンセルボタンを押すと、
全て変更前に戻るのが分かります。
この様にReset属性がtrueになるとそのコントロールをリセット、
つまり「Default」属性の値に戻すのです。
しかし、この変数にはすでにtrueが入っているので、このままだと次に使えません。
ですから、さっきのUpdateContext関数の直後に
今度は同じ変数に「false」を入れて次に使えるようにします。
キャンセルボタンの「OnSelect」属性
=UpdateContext({編集対象:Blank(), リセット:true}); UpdateContext({リセット:false})
Patch関数と「ThisItem」を使って簡単に保存する。
最後に保存機能を実装します。
その時に各テキスト入力を参照するので、
ツリービュー内の名前を分かり易いものに変更すると良いでしょう。
アイコンもよく使うのでこれらも変えた方が良いです。
保存ボタンの「OnSelect」属性にPatch関数で保存します。
Patchの後に対象のデータソース名、
そして、変更対象のレコードは「ThisItem」がレコード型で
これで大丈夫です。簡単ですね。
そして、波カッコの後に各列名と、対象のテキスト入力名、
そして、「.Text」と入れていきます。
保存ボタンの「OnSelect」属性
=Patch(Tbl_顧客リスト,ThisItem,
{Customer:TI_顧客名.Text,
Contact:TI_担当者.Text,
Email:TI_Eメール.Text}
);UpdateContext({編集対象:Blank()})
保存が終わったら、編集モードを終わらせ閲覧モードにするために
UpdateContext関数で変数：「編集対象」に空白を入れます。これで完成です。
（上記数式参照）
今回は難しい内容でしたが、応用が効くコツが沢山あったので
ぜひ一度真似をして練習をしてみて下さい。
「こちらの記事も読まれてます｡」
