> For the complete documentation index, see [llms.txt](https://hychen39.gitbook.io/apex-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hychen39.gitbook.io/apex-notes/reports/cards-region.md).

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

使用 Cards 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)