カードビュー (cardView) の設定

カードビュー は、施行情報・お客様・お問い合わせなど任意のレコード一覧をカード形式で並べる 汎用ウィジェット です。Lightning App Builder で配置し、14 個のプロパティで表示内容を細かく制御できます。

配置可能ターゲット: lightning__AppPage / lightning__RecordPage / lightning__HomePage

設定の場所

1. カードビューを配置する Lightning ページを App Builder で開く
2. 「コンポーネント」 → 「カスタム」 → cardView をドラッグ&ドロップ
3. 配置したコンポーネントを選択 → 右パネルに 14 のプロパティ が表示
4. 設定後、ページを保存 & 「有効化」

プロパティ一覧 (14 個)

基本設定 (8 個)

カード設定 (4 個)

表示項目 (1 個 / 複雑)

デフォルト値:

Name, Industry|Type, OwnerId, BillingState|BillingCity, BillingStreet, Phone|Fax

cardFields の記法

• カンマ (,) で行を区切る
• パイプ (|) で同じ行内の列を区切る (最大 4 列)

例:

Phone, Email, Department|Title, A|B|C|D

これを設定すると、カードに以下のように表示:

Phone:    090-xxxx-xxxx
Email:    foo@example.com
Department: 営業    Title: 主任
A: ... B: ... C: ... D: ...

設定例: ホーム画面「今日以降の施行情報」

オブジェクト名:    sou__Ceremony__c
タイトル:          今日以降の施行情報
アイコン:          standard:event
フィルタ条件:      sou__CeremonyDate__c >= TODAY()
並び替え項目:      sou__CeremonyDate__c
並び順:           昇順
表示件数:         10
カードタイトル:    Name
カードサブタイトル: sou__Account__c
表示密度:         コンパクト
フォントサイズ:    標準
表示項目:         sou__CeremonyDate__c, sou__Hall__c, sou__Moshu__c, sou__OwnerId__c|sou__Issuer__c

これで「家族名・葬儀日・式場・喪主・担当・支店」がカード形式でホームに並ぶ。

設定例: 施行情報詳細に「同じ家族の過去施行」

オブジェクト名:    sou__Ceremony__c
タイトル:          同じ家族の過去施行
アイコン:          standard:event
フィルタ条件:      sou__Account__c = '{!Record.sou__Account__c}'  (※)
並び替え項目:      sou__CeremonyDate__c
並び順:           降順
表示件数:         5
カードタイトル:    Name
カードサブタイトル: sou__CeremonyDate__c
表示項目:         sou__Moshu__c, sou__Hall__c

※ レコードページの動的バインディングは Lightning Page の動的フィルタ機能との組み合わせ。

設定例: 「未対応の事前相談」

オブジェクト名:    sou__Consultation__c
タイトル:          フォロー予定の事前相談
アイコン:          standard:contact_list
フィルタ条件:      sou__NextFollowDate__c <= NEXT_WEEK AND sou__Status__c != 'Completed'
並び替え項目:      sou__NextFollowDate__c
並び順:           昇順
表示件数:         10
カードタイトル:    Name
表示項目:         sou__Account__c, sou__NextFollowDate__c, sou__OwnerId__c

SOQL フィルタの書き方

filter プロパティは SOQL の WHERE 句の中身 を書きます。WHERE キーワード自体は不要。

演算子

日付関数

フィルタ例集

SLDS アイコンの探し方

iconName プロパティに指定する SLDS アイコンは以下の公式サイトで検索可能:

https://www.lightningdesignsystem.com/icons/

カテゴリ:

• standard: カードビューに最適 (standard:event、standard:contact、standard:account 等)
• custom: 単色のシンプルアイコン
• utility: 小さなアクションアイコン

こんなときは

カードが空欄

• フィルタ条件で対象データが 0 件になっている
• ユーザー権限で該当レコードが見えない
• オブジェクト名の API 参照名が誤っている

4 列を超えて表示したい

→ cardFields の | は最大 4 列まで。それを超えるなら 複数行に分ける か、別カードに分割。

動的フィルタ ({!Record.xxx}) が効かない

• レコードページ (lightning__RecordPage) でしか動的バインドできない
• App Page / Home Page では固定値のみ

Salesforce 標準オブジェクトを表示したい

objectName に Account / Contact などの 標準オブジェクト名 を指定。namespace 不要。

カスタムオブジェクトを表示したい (sou__ から始まる)

objectName に sou__Ceremony__c のように namespace 付き で指定。

複数のカードビューを 1 画面に並べる

• App Builder で複数の cardView コンポーネントを配置可能
• それぞれ別のフィルタ・タイトル・項目を設定

モバイル対応

cardView は lightning__HomePage / lightning__AppPage / lightning__RecordPage で利用可。 モバイル端末でも閲覧でき、画面幅に応じてカードレイアウトが自動調整されます。

次に進む

• 伝票エディタ (slipDetailEditor) の設定
• PDF 出力 (ceremonyPdfPrint) の設定
• 画面のカスタマイズ (Lightning App Builder)
• 一般: ホーム画面のカードビュー

📅 最終更新日: 2026-06-16