YouTube ChannelSchedule a CallSubscribe for Updates

バッジを色分けする方法

概要

このチュートリアルでは、 StageName フィールドの表示を Avonni データテーブルでカスタマイズします。 StageName 値の背景色を変更して視覚的に区別しやすくし、可読性とデータの視覚化を向上させます。

ガイド付きチュートリアル

。 1. 式（フォーミュラ）項目を作成する

  • Salesforce の設定でオブジェクトマネージャに移動します。

  • 式を作成したいオブジェクト（例：商談）を検索して選択します。

  • 「項目とリレーション」をクリックし、次に「新規項目」を選択します。

  • データ型として「数式（Formula）」を選び、続行します。

次の式を入力します：

コピー

IF(ISPICKVAL(StageName,'Closed Won'), 'success',
   IF(ISPICKVAL(StageName,'Closed Lost'), 'error', 'base'))

式の説明：

この式は「StageName」項目をチェックします。値が「Closed Won」の場合は「success」（緑のバッジ）を返します。値が「Closed Lost」の場合は「error」（赤のバッジ）を返します。それ以外のステージには「base」（灰色のバッジ）を返します。

Lightning Design System はバッジの色を事前定義しており、カスタマイズすることはできません。利用可能なオプションは次のとおりです：

  • base： 灰色（デフォルト）

  • brand： 青

  • inverse： 白

  • alt-inverse： 濃い境界線のある透明

  • success： 緑

  • info： 濃い灰色

  • error： 赤

  • warning： 黄

  • offline： 黒

2. Avonni データテーブルコンポーネントを追加する

  • Avonni データテーブルコンポーネントを追加したい画面要素を開きます。

3. データテーブルをカスタマイズする

  • Avonni データテーブルコンポーネントを選択したら、コンポーネントビルダーを開きます。

  • これにより、要件に応じてデータテーブルを視覚的にカスタマイズできます。

4. データソースを設定する

  • コンポーネントビルダーで「データソース」セクションに移動します。

  • データソースを、先ほど作成した式項目を含むオブジェクト（例：商談）を参照するように設定します。

変数データソースを使用する場合は、まず「レコード取得（Get Records）」要素を設定してください。この手順は、Salesforce がオブジェクトから必要な情報をすべて取得することを保証するために重要です。

  • 必要なレコードを取得するようにデータソースが正しく設定されていることを確認してください。

5. バッジ列を追加する

  • 「列」セクションにアクセスし、左側のパネルから目的の列をクリックしてドラッグし、Avonni データテーブル領域に配置します。バッジを表示する列を必ず含めてください。

  • バッジを表示する必要がある列をクリックします。

  • タイプには、 バッジ.

  • タイプ属性のセクションについて

    • フィールド名トグルをオンにします

    • ステップ 1 で作成した式項目を選択します ステップ 1.

これで完了です！データテーブルに各商談のステージに応じた色付きバッジが表示されます。

まとめ

これで、Avonni データテーブルは式項目で指定した条件に基づいて StageName ステータスを色付きバッジで表示するはずです。「Closed Won」ステージは緑のバッジ、「Closed Lost」ステージは赤のバッジ、その他のステージは中立的なバッジが表示されます。このカスタマイズにより、データの視覚的に直感的な表現が可能になります。

これらの手順は、Salesforce のデータテーブルに色付きバッジを追加する方法を示しています。まず、商談のステージ（「Closed Won」や「Closed Lost」など）に基づいて異なる色を割り当てる式を作成します。次に、Salesforce の画面にデータテーブルを追加し、商談データを表示するように構成します。最後に、式を含む列に対してバッジオプションを選択すると、テーブルに色付きバッジが表示されます。

1

式（フォーミュラ）項目を作成する

  • Salesforce の設定でオブジェクトマネージャに移動します。

  • 式を作成したいオブジェクト（例：商談）を検索して選択します。

  • 「項目とリレーション」をクリックし、次に「新規項目」を選択します。

  • データ型として「数式（Formula）」を選び、続行します。

  • 次のような式を入力します（特定のニーズに合わせて式を調整してください）

IF(ISPICKVAL(StageName,'Closed Won'), 'success',
   IF(ISPICKVAL(StageName,'Closed Lost'), 'error', 'base'))
2

Avonni データテーブルコンポーネントを追加する

Avonni をドラッグして データテーブル 動的コンポーネントのレイアウトに配置します。選択してから、その データソース を設定するために Avonni クエリ を使用して必要な Salesforce レコードと項目を取得します。クエリを設定したら、プロパティパネルの 最後に、データテーブルの セクションに移動して列を追加し、クエリの正しい ソース項目 にマッピングして設定を調整します。

3

バッジ列を追加する

  • 「列を追加」ボタンをクリックし、表示したい項目を選択します。

  • バッジを表示する必要がある列をクリックします。

  • タイプには、 バッジ.

  • タイプ属性のセクションについて

    • フィールド名トグルをオンにします

    • ステップ 1 で作成した式項目を選択します ステップ 1.

これで完了です！データテーブルに各商談のステージに応じた色付きバッジが表示されます。

まとめ

これで、Avonni データテーブルは式項目で指定した条件に基づいて StageName ステータスを色付きバッジで表示するはずです。「Closed Won」ステージは緑のバッジ、「Closed Lost」ステージは赤のバッジ、その他のステージは中立的なバッジが表示されます。このカスタマイズにより、データの視覚的に直感的な表現が可能になります。

最終更新

役に立ちましたか？