テーブル内の一括操作
よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。
構成
「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。
テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。
- 一括選択するチェックボックス(必須)
- 個別選択するチェックボックス(必須)
- テーブル内の一括操作エリア
1. 一括選択するチェックボックス
テーブル内の要素をすべて選択できるチェックボックスです。
デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。 表示しているページ外のオブジェクト(他のページのオブジェクト)は選択状態にしません。
「一括選択するチェックボックス」が未選択状態のときに、テーブル内のオブジェクトが1つ以上選択された場合(選択状態と未選択状態が混ざっている場合)は、「一括選択 するチェックボックス」を混在選択状態(mixed=true
)にします。
「一括選択するチェックボックス」の選択状態を解除すると、「わくわくチェック」の選択解除と同様にテーブルのページ送り上も含めたすべての選択状態を解除します。
混在選択状態(mixed=true
)で「一括選択するチェックボックス」をクリックした場合も同様に、すべての選択状態を解除します。
2. 個別選択するチェックボックス
テーブル内のオブジェクトを個別選択できるチェックボックスです。
ページ送りによって他のページに遷移された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除します。
3. テーブル内の一括操作エリア
テーブル内で選択されたオブジェクトに対して一括操作を配置するエリアです。
SmartHR UIではこのエリアをBulkActionRow
と呼んでいます。
原則として、「一括選択するチェックボックス」または「個別選択するチェックボックス」が1つ以上選択されている場合に表示します。
オブジェクト選択状態の表示
テーブル内でオブジェクトの選択状態を示すテキストです。
選択状態のライティングパターン
オブジェクトの選択状態にあわせたライティングパターンは以下のとおりです。
- 句点を省略しないでください。
- 件数の単位は、オブジェクトの意味にあわせて「件」「名」「人」などを使用してください。
オブジェクトの選択状態 | テキストに表示する文言 |
---|---|
未選択 | {オブジェクト名}が選択されていません。 |
複数選択されている | {件数}件の{オブジェクト名}が選択されています。 |
表示されているものすべてが選択されている | このページの{オブジェクト名}{件数}件すべてが選択されています。 |
テーブルのページ送り上のすべてが選択されている | 一覧の{オブジェクト名}{件数}件すべてが選択されています。 |
わくわくチェック
複数のページに分けてオブジェクトを表示する際に、ページの枠を超えてオブジェクトを選択できるUIを「わくわくチェック」と呼んでいます。
具体的な動作については、わくわくチェックの動作を参照してください。
一括操作ボタン
データの削除・一括変更など、選択したオブジェクトを一括で操作するためのボタンです。
BulkActionRow
内の要素として配置します。
- Buttonや、類似する操作をまとめたDropdownButtonを配置できます。
- ユーザーが迷わないよう、配置するボタンは多くても4つ程度とします。多数の操作ができる場合には、アクションの優先度を検討し、優先度が低いアクションは減らしたり、ドロップダウンボタンとしてまとめて配置するなどを検討しましょう。
一括操作ボタンの例
ここに配置される典型的な一括操作ボタンの例は以下のとおりです。
以下に限らず、データの追加・一括変更など、扱う機能やユースケースによって配置できます。
操作名 | ボタンのラベル例 | 役割・動作 |
---|---|---|
オブジェクトへの一括操作 | 一括削除 ,一括ダウンロード | |
オブジェクトに関する通知 | 通知を一括送信 ,依頼を一括送信 | |
タスクとしての一括操作 | 一括承認 ,一括確定 ,一括取り消し |
レイアウト
基本的に余白の取り方に従って配置します。
テーブル内の一括操作エリアの要素間の余白は以下のとおりです。
わくわくチェックの動作
わくわくチェック
の動作パターンは次のとおりです。
- すべてのオブジェクトを選択
- すべてのオブジェクトを選択解除
すべてのオブジェクトを選択
オブジェクトが1つ以上選択されたときに 一覧のすべてのオブジェクトを選択
というテキストリンクを表示し、ユーザーがテーブルのページ送り上のすべてのオブジェクトを選択できるようにします。
すべてのオブジェクトを選択解除
わくわくチェック
のオブジェクト選択中は、ユーザー自身で元の状態に戻せるように 一覧のすべてのオブジェクトを選択
のテキストリンクを 選択解除
に置き換え、(ページ送りも含めた)すべてのオブジェクトの選択状態を解除できるようにします。
また、わくわくチェック
のオブジェクト選択中に、ページ送りによって他のページに遷移された場合は、選択状態は 維持せずにすべてのオブジェクトの選択状態を解除する動作に統一します。