フィルターおよびツールバーのサブパターン

この記事では、フィルターおよびツールバーのサブパターンについて説明します。 これらのワークスペース固有のサブパターンは、リストやグラフをホストする、パノラマ セクション内のフィルターやアクションを表示するために開発されました。

用途

フィルターおよびツール バー サブパターンは、リストやグラフをホストする、パノラマ セクション内のフィルターやアクションを表示するために開発されたワークスペース固有のサブパターンです。 これらのサブパターンのフィルタ処理の一部のフィールドは、次のフィールド タイプに限定される必要があります。 これらすべてのフィールド タイプは入力の制約を持ちクエリに適用できます。

  • Lookups を使用した StringEdits
  • 日付フィールド
  • ReferenceGroup
  • Comboboxes
  • チェック ボックス
  • クイック フィルター

この記事では、2 つのサブパターンについて説明します。

  • フィルターおよびツールバー - インライン – このサブパターンでは、フィルタ フィールドと同じ行に定義されたアクションが表示されます。
  • フィルターおよびツールバー (積み上げ) – このサブパターンでは、フィルタ フィールドの下の別の行に定義されたアクションが表示されます。

ワイヤーフレーム

フィルターおよびツールバー - インライン

フィルターとツール バーのワイヤーフレーム -- インライン。

フィルターおよびツールバー - 積み上げ

フィルターとツール バーのワイヤーフレーム -- 積み上げ。

モデル

フィルターおよびツールバー - インライン: 高度なレベル構造

  • グループ (ArrangeMethod=HorizontalLeft)

    • FilterGroup (グループ) [オプション]

      • QuickFilter (QuickFilter) [オプション]
      • FilterFIelds ($Field) [0..N]
    • ツール バー (ActionPane) [オプション]

フィルターおよびツールバー - 積み上げ: 高度なレベル構造

  • グループ (ArrangeMethod=Vertical)

    • FilterGroup (グループ) [オプション]

      • QuickFilter (QuickFilter) [オプション]
      • FilterField1 ($Field) [オプション]
      • FilterField2 ($Field) [オプション]
    • ツール バー (ActionPane) [オプション]

コア コンポーネント

正しいフィルターおよびツール バーのサブパターンをコンテナー コントロールに適用します。

UX ガイドライン

検証チェックリストには、フォームが UX ガイドラインに準拠しているかどうかを手動で確認する手順が示されています。 このチェックリストには、開発環境を通じて自動的に実施されるガイドラインは含まれていません。 ブラウザーでフォームを開いて、これらの手順を確認します。

  • フィルターおよびツールバーのガイドライン
    • 積み上げ バリアントは、狭いリストおよびグラフで使用する必要があります。
    • インライン バリアントは、より広いリストおよびグラフで使用する必要があります。
  • フィルター
    • 2 つ以下のフィルター フィールドをフィルター グループで使用する必要があります。 2 つ以上のフィルター フィールドが必要な場合、ツールバーのアクションを使用して、より多くのフィルター フィールドがあるドロップ ダイアログを開くことができます。
    • フィルター フィールドにはラベルを使用しないでください。 コンテキストは、フィールド値から明白でなければなりません。
    • フィルター フィールドの幅を合わせて、セクションがセクション内のグリッドまたはグラフよりも大きくならないようにする必要があります。また、フィルターに余分なスクロールバーが発生しないようにする必要があります。
  • 操作
    • ワークスペースでユーザーのタスク完了を支援する使用頻度の高いコマンドのみを含めます。
    • 3 つ以下のアクションをツール バーに表示する必要があります。 ツールバーの 1 つのアクションは、最大 3 つの追加アクションのドロップダウン リストとして使用できます。

フィルターおよびツールバー - インライン

フォーム: HcmWorkforceManagement>HcmOpenPositionsPart (すべてのワークスペース>要員管理)

フィルターとツール バーの例 -- インライン。

フィルターおよびツールバー - 積み上げ

フォーム: HcmWorkforceManagement>HcmWorkerOnLeaveListPart (すべてのワークスペース>要員管理)

フィルターとツール バーの例 -- 積み上げ。

付録

よく寄せられる質問

このセクションには、このガイドライン/パターンに関連するよくある質問への回答があります。

未処理の問題

なぜインライン バリアントはフィルター フィールドの任意の数を許可するのに、積み上げバリアントは最大 3 つまで許可するのでしょうか (QuickFilter および 2 つのカスタム フィルター)?

この不一致には 2 つの要因が関係します。

  • UX のガイドラインは、これらのセクションに最大 2 つのフィルターを指定しています (それらのフィルターの一つは QuickFilter となる場合があります)。 したがって、Stacked バリアントは、ガイドラインにより一層準拠しています。
  • 積み上げバリアントのフィールド数は、審美的な理由から制限されています。 このバリアントのフィルター フィールドは、それらの下に表示されるリスト/チャートの全幅を占めることを意図しているため、その幅は SizeToAvailable です。 このバリアントを限られたリストを超えて使用すると、その使用の目的にしたがって、2 つを超えるフィルター フィールドが使用された場合には、その設定によって非常に限られたフィルター フィールドが発生する可能性があります。 インライン バリアントは、幅広いグラフ/リストの上で使用するためのものです。 したがって、元のパターン定義では、任意の数のフィールドが許可されていました。 ただし、今後 2 つのバリエーション間で許可されているフィルター フィールドの数におけるこの不一致に対応する予定です。