PowerApps：これは使えるToolbarモダンコントロール（ギャラリー内での編集機能を作る。IsSelected属性）

2025

03/11

Published

2025.03.11

/ Mike

　　

\ この記事を共有 /

B!

リンクをコピーする

PowerApps：これは使えるToolbarモダンコントロール（ギャラ...

Mike

B!

リンクをコピーする

PowerAppsの新しいモダンコントロールで、とっても便利なToolbarコントロールの実務での使い方を図解してます。

（動画時間：11:59）

Toolbarを使ったギャラリーの編集機能の完成した動き

こんにちは、リーンシグマブラックベルトのマイク根上です。
業務改善コンサルをしています。

前々回の動画で最近話題のモダンコントロールについて話しました。
⇒「PowerAppsのモダンコントロールは今使うべきか？日付の選択モダンコントロールは使うべき」

その中でToolbarコントロールをご紹介しましたが、
今日はそれの詳細とそれを使ったギャラリー内での
編集機能の作り方をご紹介します。
以前も「ギャラリー内での編集機能の作り方」という動画を作りました。
⇒「【Power Apps】ギャラリー内での編集機能の作り方（DisplayMode、Visible、Reset属性の使い方）」

このToolbarコントロールを使うともっと簡単にできるので、
ぜひ最後までご覧下さい。
まずは完成した動きを見てみましょう。

ここにギャラリーとその上に今回の主役のToolbarコントロールがあります。
これの良い所はこのコントロール一つで、
データの追加、編集、削除など複数の機能の実装ができる事です。

まずは「編集」ボタンを押して、
選択した行が水色でハイライトされて
編集モードになって値の編集ができ、
保存ボタンで保存ができます。
この方法だとユーザーは少ないクリック数で編集作業ができます。

そして、次の「編集解除」ボタンで
文字通り編集モードを解除します。

また、「追加」ボタンで、新しい行を追加して、
ユーザーは新しいデータを入力できるのです。

最後に削除したい行を選んで、
「削除」ボタンでそれを削除できます。

ユーザーに優しい入力値の初期化をする「Reset」属性の使い方

次にこの機能の作り方ですが、
ギャラリー内ではテキストラベルではなく
テキスト入力コントロールを使います。

これは旧コントロールですので、
「Default」属性に「ThisItem.列名」を入れて既定値を表示させます。
モダンコントロールでは「Value」属性を使います。

余談になりますが、
僕はまだ新コントロールのモダンコントロールをあまり使いません。
その理由はモダンコントロールには「Reset」属性がないからです。
その属性によって複数のコントロールをまとめて初期化ができるので、
それが無いと困るのです。

旧バージョンではその「Reset」属性に例えば「初期化」みたいな変数を入れ、
全ての初期化させたいコントロールにそうします。

するとユーザーが編集モードにして値を変えた後、
保存ボタンを押すのを忘れたとしましょう。
そして他の行を編集して保存ボタンを押したら
未保存のコントロールはその前の状態に初期化をさせ、
ユーザーに保存されていない事を気付かせる事ができます。

保存ボタンの「OnSelect」属性を見ると
その最後にUpdateContext関数でその変数「初期化」にtrueにする事で
それらのコントロールを初期化できます。
その直後にその変数をfalseに戻す事で、
次の初期化をする準備をしているのです。

Toolbarコントロールの見かけを制御する「Items」属性の使い方

次が今日のテーマのToolbarコントロールですが、
それを追加する時はメニューバーの「設定」、「更新」で
「モダンコントロールとモダンテーマ」が
「オン」になっている状態にします。

そして「挿入」、「入力」から「Toolbar」を追加できます。
右の「プロパティ」の「Alignment」属性を
縦という意味の「Vertical」にするとボタンを縦に並べる事もできます。
ここでは「Horizontal」に戻します。

また幅を変える事でボタンの見え方が変わってきますので、
例えば幅を狭めて「…」の状態にしてコピーし、
ギャラリー内にペーストして、場所の無い所で使うと有効です。

既定ではボタンの表示は英語ですが、
その「Items」属性で表示の仕方を変えられます。

その中ではテーブル構造になっていて名前や各種設定を変更できます。
既定では四つの行がありますが、各行が各ボタンに対応していて、
ボタンが５つほしければ、テーブルの一行を増やせばいいのです。

各列の意味を確認しましょう。
最初の「ItemKey」は自由に変えられるのですが、
これは主にどのボタンが押されたのかを
「OnSelect」属性で識別するのに使われます。

「ItemDisplayName」で表示する文字を設定し、
ここで日本語表示にできるのです。

「ItemIconName」で表示するアイコンを変えられます。
どう変えればいいかというと、親切ではないですが、
「挿入」からアイコンを一つ追加して
その「Icon」属性のピリオドの後の文字をコピペすると、
それが表示されます。
しかし、残念ながら表示できるアイコンには限りがあるみたいです。

次の「ItemAppearance」はボタンの外観で
「Primary」だと強調できて、「Subtle」で控えめになります。

その他の押さえた方がいいのは「ItemDisabled」で
「DisplayMode」属性みたいな働きで、
これをtrueにする事でボタンを使用不可にできます。
ここにtrue/falseの変数を入れる事で動的にこのボタンの制御ができます。

僕は「ItemDisplayName」を日本語に変えて、
「編集解除」ボタンを作りました。

Toolbarに機能を持たせる「OnSelect」属性

Toolbarの既定では各ボタンを押すと
通知メッセージが出てくるだけです。
これはその「OnSelect」属性内のNotify関数によるものです。
それを消してそこに自分が必要な機能の式を書いていきます。

下図が実際のコードの一部ですが、
そのSwitch関数でクリックされたボタンのItemKeyがどれかによって
処理を分岐しています。

まずは簡単な「編集」ボタンのコードから見ていきましょう。

UpdateContext関数で変数「編集ID」に
ギャラリー内で選択されている行のIDを入れて、
変数「編集モード」にtrueを入れています。

次に編集解除ボタンがクリックされた時は編集IDには空白を、
編集モードにはfalseが入ります。

プレモードにして動きを見てみましょう。
「編集」が押されたらテキスト入力が有効になって、
保存ボタンが出てきました。

そして行を変えたらそれらの編集モードも移動します。
そして「編集解除」が押されたらテキスト入力が
Viewモード（編集不可）になり保存ボタンが非表示になります。

編集モードには「DiplayMode」属性と「Visible」属性を上手に使う

さすがにさっきのUpdateContext関数だけではこの動きはできません。
テキスト入力の「DiplayMode」属性と
保存ボタンの「Visible」属性にも連携する数式があります。

下のコードがテキスト入力の「DiplayMode」属性の式ですが、
選択された行のIDが変数「編集ID」に入っているIDと同じであり、
かつ編集モードがtrueであれば編集モードになり、
そうでなければただの閲覧モードになるという式です。

これによって編集ボタンが押された時に
これらのテキスト入力が編集モードになります。

しかしこれだけだと編集モードが移動しません。
それは変数「編集ID」が編集ボタンが押された時のID番号のままだからです。

それがちゃんと移動するためにギャラリー内に一枚の大きなラベルを入れています。
その「OnSelect」属性に下のコードで
変数「編集ID」に選択された行のIDが毎回入る様にしてるのです。

しかしこれだけだと問題があります。
編集モードになった行にもこのラベルがあると
邪魔してテキスト入力にユーザーが何も入力できません。

そこで同じラベルの「Visible」属性に
各ID値が編集IDの値でない時だけこのラベルが表示されてる、
つまり、編集モードの行には非表示になる式にしているのです。

そして保存ボタンの「Visible」属性に
さっきの「DiplayMode」属性で使った数式の
If文の条件部分だけを入れます。
ここではIf文を使わなくてもいい事にご留意下さい。

もう一つアクティブ行の背景が水色になって見易いですね。
これはギャラリーの「TecmplateFill」属性を使っています。

ギャラリーのThisItemには「IsSelected」という便利な属性があり、
これで各行が選択された時に背景を水色にし、
そうでない時は白を表示としています。

これらのコードで編集モードの移動が上手くできるのです。

保存、追加と削除ボタンの機能の作成方法

編集モードの最後は保存ボタンの保存機能です。
その「OnSelect」属性の式でPatch関数を使って
その行の各テキスト入力の値をデータソースに保存します。

この保存ボタンの「Visible」属性は
さっきのラベルの逆の動きで
編集モードの行だけ表示させています。

またToolbarの「OnSelect」属性に戻って、
今度は「追加」機能の式を見ましょう。

新規の行を作る前にデータソースの
既存のID列の最大値に１を足した値を編集IDに入れています。
それが新しい行のID値になるのです。
そして変数「編集モード」にtrueを入れて編集モードにしています。

そしてここではデータソースがコレクションなので
Collect関数で新レコードを作っていますが、
外部のデータソースであればPatch関数を使います。

最後の「削除」ボタンではRemoveIf関数を使って
選択された行のID値と同じレコードが
データソースから削除される様にしています。

これでToolbarの全機能の完成です。

今までは複数のボタンコントロールを使って同じ事をしていました。
それがこれ一つでできるし、見栄えも良いと思います。

また、これは場所がない所でも使えるので、
僕はモダンコントロールでは唯一このToolbarはいつも使います。

「こちらの記事も読まれてます｡」

• PowerAppsのモダンコントロールは今使うべきか？日付の選択モダンコントロールは使うべき
• 【Power Apps】ギャラリー内での編集機能の作り方（DisplayMode、Visible、Reset属性の使い方）