# 圖卡顯示搜㝷結果 \[Card Region]

## 什麼是 Cards Region?

* Cards Region 是一種顯示區域，它可以讓使用者以圖卡的方式來瀏覽搜尋結果。
  * 一個圖卡代表一個區塊(block)

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-a06a75b1b000e80a6a2022e279244f4732fd75b8%2F24-03-09-21-45-23.png?alt=media)

* 圖卡內包含的元素:
  * 主標(title)及次標(sub-title)
  * 主文(body)及次文(secondary body)
  * Icon 或 Badge (徽章)
  * 圖片
  * 動作按鈕

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-3d468ed4d826aa1cefa445c5ff75aa9b19c2feda%2F24-03-09-21-45-36.png?alt=media)

## 如何設定 Cards Region 中各 Block 內容元素？

* 一個 Block 對應到 Query 中的一筆資料。
* Block 內的各元素對應到資料中的各欄位。
* 在 Card Regions 的 Attributes 中設定 block 元素與資料來源的欄位間的對應關係。

## Cards 的 Layout 方式

Cards Region 提供了三種 Layout 方式: 網格(Grid)、浮動(Float)及水平(Horizontal)。

* 網格(Grid)：設定網格的欄位數，由左至右排列。每個 block 的大小皆相同。

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-3b11436484e48e01eebf7f85f1ea1c99f0823ae5%2F24-03-09-21-53-12.png?alt=media)

* 浮動(Float)：每個 block 依據內容的大小，由左至右流動。每個 block 的大小不一定相同。

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-5de5e5bc7bfc85eeb0a2fa8e2ad9cad4dea6be8e%2F24-03-09-21-53-21.png?alt=media)

* 水平(Horizontal)：每個 block 一個列，由上至下排列。

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-b7a98181a20669c46aaba80ffda9ad92ca678891%2F24-03-09-21-53-32.png?alt=media)

## 手動設定 Cards Region

使用 EBA\_PROJECTS 表格來示範。

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-f227f1d671fcdb05672146b87df7ca12adacb2ec%2F24-03-09-21-59-28.png?alt=media)

### Step 1. 新增 一個 blank page. 接著在 page 的 body 中加入一個 Cards Region。

Region property:

* Identification
  * Title： Projects
  * Type： Cards

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-c86a325847e89406c692fded7d283321453ad414%2F24-03-09-21-58-07.png?alt=media)

### Step 2. 設定資料來源

Region Property:

* Source
  * Type: Table/View (default)
  * Table Name: EBA\_PROJECTS

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-57069ee45077d905ae318f712fb3a162e4dd1899%2F24-03-09-22-02-15.png?alt=media)

### Step 3. 設定 block 的元素與資料來源的欄位間的對應關係。

Region Attributes:

* Appearance
  * Layout: Grid
  * Grid Columns: Auto
* Card
  * Primary Key Column 1: ID (對 Table PK)
* Title
  * Column: Name (顯示專案名稱)
* Subtitle
  * Column: Project\_Lead

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-d80d4e2f1c00d3af55317cb049dda7f8b0264d32%2F24-03-09-22-17-11.png?alt=media)

* Body (使用 Advanced Formatting, 組合不同的欄位資料，以 html 格式顯示)
  * Advanced Formatting: Enabled
  * HTML Expression:

```html
<p> <b> &BUDGET. </b> </p>
<p> &DESCRIPTION. </p>
```

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-00ac6daff89da2597e373028cc4d86e3dee3affa%2F24-03-09-22-16-00.png?alt=media)

* Icon 及 Badge 的設定

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-7fdbf3efaeb9905f2d3529ca8b31374825ae6bcb%2F24-03-09-22-13-54.png?alt=media)

### Step 4. 儲存頁面，並執行。即可完成

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-8aaa26e4c4089ef1a1a9ad5004cb53796c0f4272%2F24-03-09-22-17-52.png?alt=media)

## 練習

請使用 Page Wizard 來建立一個 Faceted Search 頁面，並使用 Cards Region 來顯示搜尋結果。

改使用 Cards Region 來顯示搜尋結果。 ![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-c2d0a2fd1b95212ad7c894e3a218fa01adef4162%2F24-03-09-22-20-57.png?alt=media)

在 Wizard 中初步設定 Layout 及一些欄位的顯示設定。之後到 Page Designer 進一步設定 Cards Region 的屬性。 ![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-247bbcf36fe60f3f2ab757b832259041364dd21d%2F24-03-09-22-21-49.png?alt=media)

在 Page Designer 中進一步設定 Cards Region 的其他屬性。 ![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fgit-blob-103afb982c2a02f73cf9ecb335281a0b73d0e460%2F24-03-09-22-24-01.png?alt=media)


---

# Agent Instructions: 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://hychen39.gitbook.io/apex-notes/reports/cards-region.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.