> For the complete documentation index, see [llms.txt](https://support.bridge-funeral.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.bridge-funeral.com/lwc-puropati-app-builder/50-lwc-card-view-config.md).

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

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

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

## 設定の場所

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

## プロパティ一覧 (14 個)

### 基本設定 (8 個)

| プロパティ                        | データ型    | 必須 | デフォルト           | 説明                                                                            |
| ---------------------------- | ------- | -- | --------------- | ----------------------------------------------------------------------------- |
| **オブジェクト名** (`objectName`)   | String  | ✓  | `Account`       | 表示する Salesforce オブジェクトの API 名 (例: `Account` / `Contact` / `sou__Ceremony__c`) |
| **タイトル** (`title`)           | String  |    | `カードビュー`        | カードビュー上部に表示されるタイトル                                                            |
| **サブタイトル** (`subTitle`)      | String  |    | -               | タイトル下のサブタイトル                                                                  |
| **ラベル** (`label`)            | String  |    | -               | ヘッダー右側に表示されるバッジ (件数・状態など)                                                     |
| **アイコン** (`iconName`)        | String  |    | `standard:apps` | SLDS アイコン名 (例: `standard:account` / `standard:contact`)                       |
| **フィルタ条件** (`filter`)        | String  |    | -               | SOQL の WHERE 句 (例: `StartDate__c >= TODAY()`)                                 |
| **並び替え項目** (`orderBy`)       | String  |    | `CreatedDate`   | 並び替え対象の項目 API 名                                                               |
| **並び順** (`orderByDirection`) | String  |    | `降順`            | 昇順 / 降順                                                                       |
| **表示件数** (`recordLimit`)     | Integer |    | `50`            | 表示件数の最大値                                                                      |

### カード設定 (4 個)

| プロパティ                          | データ型   | 必須 | デフォルト     | 説明                                          |
| ------------------------------ | ------ | -- | --------- | ------------------------------------------- |
| **カードタイトル** (`cardTitle`)      | String | ✓  | `Name`    | 各カードのタイトル項目。`Name` の場合はレコード詳細へのリンク化         |
| **カードサブタイトル** (`cardSubTitle`) | String |    | -         | カードタイトル下のサブタイトル項目                           |
| **表示密度** (`displayDensity`)    | String |    | `カンファタブル` | `コンパクト`(ラベルと値を横並び) / `カンファタブル`(縦並び)         |
| **フォントサイズ** (`fieldFontSize`)  | String |    | `標準`      | `小`(10/11px) / `標準`(11/12px) / `大`(12/14px) |

### 表示項目 (1 個 / 複雑)

| プロパティ                   | 説明                               |
| ----------------------- | -------------------------------- |
| **表示項目** (`cardFields`) | カードに表示する項目を **特殊記法** で指定 (詳細は下記) |

**デフォルト値**:

```
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` キーワード自体は不要。

### 演算子

| 演算子                        | 例                                  |
| -------------------------- | ---------------------------------- |
| `=` `!=` `>` `<` `>=` `<=` | `Amount__c > 100000`               |
| `LIKE`                     | `Name LIKE '山田%'` (% はワイルドカード)     |
| `IN`                       | `Status__c IN ('Open', 'Working')` |
| `AND` `OR` `NOT`           | 条件の組み合わせ                           |

### 日付関数

| 関数                    | 意味      |
| --------------------- | ------- |
| `TODAY()`             | 今日      |
| `THIS_MONTH`          | 今月      |
| `NEXT_MONTH`          | 来月      |
| `LAST_N_DAYS:30`      | 過去 30 日 |
| `NEXT_N_DAYS:7`       | 来週      |
| `THIS_FISCAL_QUARTER` | 今会計四半期  |

### フィルタ例集

| やりたいこと     | フィルタ条件                                         |
| ---------- | ---------------------------------------------- |
| 今日以降の施行    | `sou__CeremonyDate__c >= TODAY()`              |
| 過去 30 日の施行 | `sou__CeremonyDate__c = LAST_N_DAYS:30`        |
| 自分担当       | `OwnerId = '{!CurrentUser.Id}'` (※動的バインドに条件あり) |
| 完済済み       | `sou__RemainingAmount__c <= 0`                 |
| キャンセル以外    | `sou__Status__c != 'Cancelled'`                |
| 高額案件       | `sou__TotalAmount__c > 500000`                 |

## 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) の設定](/lwc-puropati-app-builder/51-lwc-slip-editor-config.md)
* [PDF 出力 (ceremonyPdfPrint) の設定](/lwc-puropati-app-builder/52-lwc-pdf-output-config.md)
* [画面のカスタマイズ (Lightning App Builder)](/settoappu/05-app-builder.md)
* 一般: [ホーム画面のカードビュー](/nori/15-home-card-view.md)

***

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.bridge-funeral.com/lwc-puropati-app-builder/50-lwc-card-view-config.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.