YouTube ChannelSchedule a CallSubscribe for Updates

条件に応じてデータテーブルのセルに色を付ける方法

このチュートリアルでは、Avonni Data Table 内のセルの見た目をカスタマイズする方法を説明します Avonni Dynamic Components。列全体に一貫したスタイルを適用する方法や、行のデータに基づいてセルの見た目（背景色など）が変化する強力な条件付きスタイリングを実装する方法を学びます。

コアコンセプト: SLDS セルクラス 属性

Avonni Data Table におけるすべてのセルスタイリングの要は SLDS セルクラス 属性です。これは各列の設定内にあります。

  1. キャンバス上の Avonni の データテーブル コンポーネントを選択します。

  2. プロパティパネルで、 最後に、データテーブルの セクションに進みます。

  3. スタイルを適用したい特定の列を選択します。

  4. その列の セル属性 設定に移動します。

  5. 次に、 SLDS セルクラス 入力フィールドを見つけます。

このフィールドには標準の SLDS（Salesforce Lightning Design System）クラス名を指定でき、文字色、背景色、フォントの太さなどを制御できます。

方法1: 静的スタイリングの適用（全行で同じスタイル）

特定の列のすべてのセルに、変わらない同一のスタイルを適用したい場合は、このシンプルな方法を使用します。

手順：

  1. その列の SLDS セルクラス 上記のとおり、目的の列の

  2. 直接 に適用したい SLDS クラス名を フィールドに入力します。複数のクラスは半角スペースで区切ります。

  • 例1: 列内のすべてのテキストを緑色かつ太字にするには、次を入力します: slds-text-color_success slds-font-weight_bold

  • 例2: すべてのセルに薄いグレーの背景を付け、テキストを大文字化するには、次を入力します: slds-theme_shade slds-text-title_caps

このスタイリングは、その列のすべての行に一貫して適用されます。

方法2: 条件付きスタイリング（行データに基づくスタイル）

これは、行内のデータに基づいてセルの見た目が動的に変化する、より強力な手法です。ステータス、優先度、リスクレベルなどを視覚的に示すのに最適です。

これを実現する最も簡単で保守しやすい方法は、 SLDS セルクラス 属性を直接 Salesforce の数式項目.

手順2.1: Salesforce の数式項目を作成

まず、データテーブルに表示される Salesforce オブジェクト（例: 商談、ケース、取引先）に数式項目を作成します。この数式は、レコード内の他の項目に基づいて使用する SLDS クラスを決定します。

  1. Salesforce で 設定、使用しているオブジェクト（例: 商談）に移動します。

  2. 新しい 数式項目.

  3. データに応じて 数式の戻り値の型 最小（Min） Text.

  4. 数式エディタで、（ CASE() や IF() などの）ロジックを用いて、目的の SLDS クラス文字列を出力します。

商談オブジェクトでの数式例（項目名: StageStyle):

CASE(
  StageName,
  "Closed Won", "slds-theme_shade slds-theme_success",
  "Closed Lost", "slds-theme_shade slds-theme_error slds-text-color_inverse",
  "Needs Analysis", "slds-theme_shade slds-theme_warning",
  "Prospecting", "slds-theme_shade",
  ""
)

この数式は StageName 項目をチェックし、各ステージに応じて異なる SLDS クラスのセットを返すことで、背景色/文字色を変化させます。

  1. 新しい数式項目を保存します。

手順2.2: データテーブルを設定

  1. クエリを更新: Dynamic コンポーネントで、 Avonni Query Data Source の Data Table に移動します。 重要: 新しい Salesforce の数式項目 （例: StageStyle__c）をクエリする項目のリストに追加してください。

  2. 列のマッピング: Data Table のプロパティで、 最後に、データテーブルの セクションに移動し、スタイルを適用したい列（例: StageName 列）を選択します。

  3. SLDS セルクラスをバインド:

    • その列の セル属性 その列の

    • を見つけます。 SLDS セルクラス プロパティに。

    • 項目名オプションを切り替えます。

    • 使用可能な項目のリストから新しい Salesforce の数式項目（例: StageStyle__c).

結果： コンポーネントの読み込み時に、Data Table は StageStyle__c 数式項目 を各行について評価します。次に、対応する SLDS クラスを適用し、商談のステージに基づいて各セルに自動的に色付けします。

セルスタイリングに役立つ実用的な SLDS クラス

以下は、数式内や静的スタイリングで使用できる標準的な SLDS クラスです（スペースで組み合わせます）：

  • 背景: slds-theme_success （グリーン）、 slds-theme_error （赤）、 slds-theme_warning （イエロー）、 slds-theme_info （ブルー）、 slds-theme_shade （薄いグレー — ベースとして有用）。

  • 文字色: slds-text-color_success （グリーン）、 slds-text-color_error （赤）、 slds-text-color_warning （濃い黄色）、 slds-text-color_inverse （白 — 暗い背景向け）。

  • 文字スタイル: slds-text-title_caps （全大文字）、 slds-font-weight_bold （太字）、 slds-font-style_italic （斜体）。

結論

The SLDS セルクラス 属性は、Avonni Data Table におけるデータ表現を強化する柔軟な方法を提供します。シンプルな静的スタイリングを適用することも、より強力に、Salesforce の数式項目を使用してデータ駆動の条件付き書式を実装し、ユーザーにとって重要な情報を効果的に強調表示できます

最終更新

役に立ちましたか？