キャンバスアプリ チェックボックス 一括変更 （モダンコントロール）

はじめに

今回はよくあるギャラリーのチェックボックスの一括選択の実装についてサンプルを載せています。
モダンコントロールのチェックボックスを使ったパターンですが、従来コントロールと特に違いはありません。
カスタムページの実装を例にしていますが、通常のキャンバスアプリの場合でも同じです。

サンプル動画

動きの部分を動画に取っています。動画ではすべてオン時はすべてオフにする、複数（2つ以上）チェックが入ったら一括操作用ボタンの活性化や非活性の動きも載せてます。

実装

簡単に実装をご紹介します。

ギャラリーにチェックボックスを追加

まずギャラリーに「チェックボックス」を入れます。
今回はモダンコントロールのチェックボックスを使っています。

TIPS★ポイント：ラベルはなしとして、タイトル部分に被さるように幅を伸ばしておきます。
位置はタイトルよりも上に来るようにしておきます。
そうするとタイトル部をクリックしたときもチェックが入る動作となるのでオススメです。

すべて選択ボタンの設定

すべてチェックをオン、オフにするためのボタンを用意します。
任意の名前で変数を用意して、TRUE/FALSEを切り替える処理を入れます。

Code//OnSelectプロパティ（!の否定形でTRUE/FALSE切替え）
Set(DefaultCheck,!DefaultCheck);

その他Textや背景色は変数の状態に合わせて切り替えてます。

チェックボックスのCheckedに変数を指定

チェックボックスのCheckedプロパティに変数を指定します。

動作を確認

これで出来ました。通常のチェックボックス操作も出来るはずです。通常操作ではそれぞれのCheckedプロパティのTrue/Falseが切り替わりますが、変数を指定していると、その変数が変更されるとその値で上書きされるというイメージです。
すべて選択をクリックで、ギャラリー内すべてチェックが入り、ボタンが選択解除に切り替わったと思います。
選択解除ですべてのチェックがオフになると思います。

チェックした対象に処理を行う

チェックが入ったものに対して何かを行いたいはずです。
サンプルではチェックの状況に応じて処理をするボタンを用意しています。

チェックしたレコードを取得する

サンプルでは一括ファイルダウンロードするようになっていますがサンプルなので特に実装してませんが、
2つ以上選択時にのみ活性化するようにしています。

Code//一括ダウンロードボタンのDisplayMode ※ギャラリー内のチェックされたレコードのみ取得しその件数鵜が1以上なら活性化する
If(CountRows(Filter(Gallery1.AllItems,CheckboxCanvas1.Checked)) > 1,DisplayMode.Edit,DisplayMode.Disabled)

TIPSチェックされているレコードは以下で取ってます。その件数を数えているという感じです。
Filter(Gallery1.AllItems,チェックボックス名.Checked)

実装例

サンプルなのでなにもしてないのですが、以下ボタンを押した際には、
上記のような実装でギャラリーのチェックがあるレコードをフィルターで取得して、
そのレコード情報を次の処理へ渡すなどのイメージです。

例）別のコレクションに入れるならそのままレコードデータを入れたり、
レコードのＩＤのみ取得してフローへ渡すなど。とにかく対象が取れれば次に進めますね。

おわりに

今回は基本的な実装テクニックな記事でした。難しいところは何もないのでシンプルに作れますね。
カスタムページでのモダンコントロールを使ったパターンでしたが、普通のキャンバスアプリの従来のチェックボックスでも同じでした。

次回は、チェックボックスに絡めて、選択範囲の複数一括選択のサンプルを作ってみたので、そちらをご紹介しようと思います。それでは！

関連記事

ギャラリー 選択範囲の一括選択サンプル（Index実装）

2024.03.17

キャンバスアプリ ギャラリー 選択範囲の一括選択サンプル（Index実装）

今回は、ギャラリー内でレコード選択時に複数した範囲を一気に追加するという実装のサンプルです。 1個目を選択し次に10個目を選択したらその間のレコードを一括で追加するイメージです。 こういった実装が出来ないかなーとご相談を受けて、面白そうだったので、やったみた感じです。...

ギャラリー関連