儀表板上的自訂點擊目的地

Metabase 提供一些簡單的建構區塊，讓您自訂使用者點擊儀表板上的圖表時會發生的情況。您可以結合這些基本元素來建立報表路徑，讓儀表板更新後續儀表板，甚至將使用者導向外部網站。

在本文中，我們將重點介紹自訂點擊行為的其中一個選項：前往自訂目的地。我們將逐步說明使用 Metabase 的範例資料庫的案例，向您展示自訂目的地如何運作，並向您展示一些建立互動式體驗的巧妙技巧。

我們將建立兩個快速儀表板 — 「訂單概覽」儀表板和「產品詳細資訊」儀表板。以下是我們想要建立的使用者體驗：當使用者檢視我們的「訂單概覽」儀表板時，他們應該能夠點擊產品，並讓 Metabase 將他們帶到「產品詳細資訊」儀表板，該儀表板會根據使用者點擊的產品進行更新。一旦使用者到達「產品詳細資訊」儀表板，Metabase 應該能夠根據使用者點擊的產品類別，將使用者導向不同的外部 URL。

之後，我們也將逐步說明另一個使用 SQL 問題的範例，以展示自訂目的地如何成為在儀表板上 SQL 問題新增互動式元素的絕佳方式。

如果您已經有自己的儀表板可以使用，您可以跳到我們開始自訂目的地的部分。

建立「訂單概覽」和「產品詳細資訊」儀表板

讓我們先從建立「訂單概覽」儀表板並在其中新增兩個問題開始。我們將快速瀏覽這部分 — 如果您正在尋找更詳細的資訊，請查看我們關於提問和建立儀表板的文件

請繼續建立新的儀表板，將其命名為「訂單概覽」，並將其儲存在有意義的位置。

我們將詢問兩個關於我們訂單的問題

1. 我們的訂單表格看起來像什麼？：從瀏覽 Orders 表格開始，然後按一下「儲存」。
2. 訂單如何依州劃分？：選取 Orders 表格開始，然後依側邊欄中「使用者」下的「州」欄位進行摘要。由於我們依州進行摘要，因此 Metabase 為我們產生了區域地圖。務必也儲存此問題。

接下來，我們可以將這些已儲存的問題新增至我們的新儀表板。在查看空白儀表板時，按一下鉛筆圖示以進入編輯模式，然後選取 + 新增已儲存的問題。新增這些問題並儲存儀表板後，結果應如下所示

接下來，我們需要製作「產品詳細資訊」儀表板，我們最終會將其連結到「訂單概覽」。產品詳細資訊將更仔細地查看我們庫存中的個別項目，因此我們也會連線儀表板篩選器，讓我們先根據想要檢查的產品輸入 ID 值。

建立此儀表板，將其命名為「產品詳細資訊」，然後儲存。

讓我們詢問兩個新問題，我們將其新增至此儀表板

1. 產品名稱是什麼？：從 Products 表格開始，按一下「視覺化」，然後選取「數字」，在「要顯示的欄位」下拉式選單中選擇 Title。儲存此問題。
2. 有多少訂單包含此產品？：從 Orders 表格開始，然後依 Orders 清單下「Product ID」的計數進行摘要。也依「數字」視覺化此內容，在「要顯示的欄位」下拉式選單中選取「Count」，然後儲存問題。

返回「產品詳細資訊」儀表板。在編輯模式中，新增我們新的已儲存問題，別忘了我們也需要儀表板篩選器。若要新增一個篩選器，請按一下右上角的「新增篩選器」圖示，然後選取「ID」。為每個卡片選取要篩選的適當欄位 — 我們的產品名稱卡片將篩選 Product.ID，而我們的訂單計數應篩選 Order.Product ID。我們將這些問題的視覺化設定為「數字」，以便它們像變數文字卡片一樣運作，根據篩選器中的值變更其文字。

以下是儀表板篩選器設定的外觀

按一下「完成」並儲存您的儀表板。

現在，我們將展示如何連結到外部網站。僅作為範例，我們將使用Metabase 文件搜尋結果頁面，並搜尋使用者點擊的產品。

以下是完整的點擊路徑

訂單概覽儀表板 → 產品詳細資訊儀表板 → 外部網站

此 GIF 動畫顯示實際運作的點擊路徑

自訂點擊行為：「訂單概覽」儀表板

讓我們回到「訂單概覽」儀表板。我們可以為此儀表板上的每個問題卡片新增自訂點擊行為，但讓我們重點僅將自訂目的地新增至一個卡片。假設我們想要設定 Orders 卡片 (包含訂單表格的卡片)，以便當使用者點擊 Product ID 欄時，Metabase 會將他們傳送到「產品詳細資訊」頁面，並在「產品詳細資訊」儀表板上插入篩選器，並使用使用者點擊的產品的 Product ID。

從「訂單概覽」頁面開始，我們將按一下鉛筆圖示以進入儀表板編輯模式。接下來，我們將滑鼠游標停留在我們想要自訂的卡片上。選單將顯示在右上角。按一下點擊行為圖示選單 (它是卡片上具有滑鼠指標的圖示)。

Metabase 將滑出側邊欄，供您設定當使用者點擊此表格時會發生的情況。

讓我們了解一下情況

• 卡片網格：由於我們為 Orders 卡片選取了「點擊行為」，Metabase 會以藍色醒目提示其 On click 標籤。我們可以透過按一下該卡片的標籤來選取另一個卡片的點擊時行為。
• 右上角：主要編輯選單，具有新增問題、文字方塊或篩選器的選項。
• 右側邊欄：用於自訂目前卡片的點擊時行為的選項。

由於我們使用查詢產生器來撰寫 Orders 問題，Metabase 將預設點擊行為設定為「開啟鑽取選單」，讓使用者可以鑽取資料。

讓我們變更點擊行為，將使用者傳送到我們的「產品詳細資訊」儀表板。

表格和自訂目的地是特別棒的組合，因為我們可以為表格中的每個欄設定不同的自訂目的地。在此範例中，我們將僅設定單一欄的點擊行為。我們將在 Orders 問題卡片上設定自訂目的地，以便當使用者點擊 Product ID 欄中的值時，Metabase 將 1) 將他們傳送到「產品詳細資訊」儀表板，以及 2) 依點擊的 Product ID 篩選該儀表板。

我們的選項為

• 開啟動作選單 (使用查詢產生器撰寫的問題的預設值)。
• 前往自訂目的地。
• 更新儀表板篩選器。

我們將選取「前往自訂目的地」。

Metabase 將顯示三個自訂目的地的選項

• 儀表板
• 已儲存問題
• 網址

若要將使用者傳送到「產品詳細資訊」儀表板，我們將選取「儀表板」選項，然後選取我們的「產品詳細資訊」儀表板。

以下是檢查點

將值傳遞至目的地

到目前為止，我們已將 Product ID 欄設定為「前往自訂目的地」，我們已設定連結到「產品詳細資訊」儀表板，但我們尚未完全設定此連結。接下來，我們想要將值傳遞至此儀表板的篩選器。您會注意到儀表板上提供可用篩選器的清單。在此情況下，我們的「產品詳細資訊」儀表板只有一個篩選器可以傳遞值：「ID」。

按一下「ID」，您會注意到您可以從表格中的任何欄位傳遞值，而不僅僅是 Product ID 欄位。但在我們的案例中，我們將從 Product ID 欄位傳遞值。

Metabase 將提供摘要

在這裡，Metabase 正在確認我們已將 Product ID 欄的點擊行為設定為

• 前往自訂目的地。
• 連結到「產品詳細資訊」儀表板。
• 將 Product ID 欄的值傳遞至「產品詳細資訊」儀表板上的 ID 篩選器。

讓我們試用看看：從「訂單概覽」，我們將點擊 Product ID 欄，而 Metabase 會將我們帶到「產品詳細資訊」儀表板，並將值 14 插入 ID 篩選器。

自訂目的地：網址

接下來，我們將設定「產品詳細資訊」儀表板，以便當使用者點擊「產品名稱」卡片時，Metabase 會將他們傳送到外部網站，並使用卡片中的值參數化 URL。我們可以將他們傳送到任何外部網站，但在此範例中，我們將將他們傳送到 Metabase 文件搜尋頁面，只是為了讓您看到參數化在運作 (而且因為閱讀我們的文件會讓您成為更好的人)。

這是該儀表板再次顯示

與之前一樣，我們將進入儀表板編輯模式，將滑鼠游標停留在「產品名稱」卡片上，然後選取「點擊行為」。

我們將看到與先前相同的選單

• 開啟動作選單。
• 前往自訂目的地。
• 更新儀表板篩選器。

我們將選取「前往自訂目的地」和「網址」。接下來，我們將輸入我們的 URL，並透過將參數括在雙大括號中 (例如：{{parameter}}) 來包含參數。在此案例中，我們將使用 Title 作為 URL 中的參數

https://metabase.dev.org.tw/search?query={{Title}}

您可以檢視「您可以參考的值」下拉式選單，以查看您可以用作 URL 中參數的完整值清單。您可以使用 URL 中的任何 (或所有) 值，包括重複使用相同的值。

使用文字方塊新增導覽

除了為您的儀表板新增背景資訊外，您還可以使用文字卡片為儀表板新增實用的導覽連結，例如新增一個文字卡片，將您帶回我們開始的「訂單概覽」儀表板。您可以建立文字卡片、將文字置中，並使用 Markdown 建立「訂單概覽」儀表板的連結，這只是為了方便讀者輕鬆瀏覽您的點擊路徑。以下是具有該連結的儀表板外觀

使用 SQL 問題的自訂目的地

我們在上面使用的範例儀表板僅包含使用 Metabase 的查詢產生器提出的問題，但您也可能有原生查詢，您想要在儀表板上設為互動式。

讓我們先詢問一個 SQL 問題並將其新增至我們的「產品詳細資訊」儀表板，這次是關於產品類別。在導覽至原生查詢產生器後，我們將輸入以下 SQL 問題

select CATEGORY
from PRODUCTS
where
    {{TITLE}} and
    {{ID}}

Metabase 滑出側邊欄，您會在其中看到兩個變數：TITLE 和 ID。我們希望此問題在我們在 ID 或標題欄位中輸入值時，向我們顯示產品類別。從下拉式選單中，將兩者的「變數類型」設定為「欄位篩選器」。繼續將 TITLE 變數對應至 Product.Title 欄位，並將 ID 對應至 Product.ID。

您可以透過將範例 ID 新增至欄位篩選器來確認問題是否執行；在這裡，我們正在使用產品 ID 編號 34 進行測試，並執行查詢。由於我們的視覺化是「數字」，因此我們看到此產品的類別 (Gadget) 以文字形式呈現在問題下方

現在儲存問題並將其新增至我們的「產品詳細資訊」儀表板。在編輯模式中，請務必將我們現有的儀表板篩選器連結到我們的新卡片，該卡片應篩選我們新「產品類別」卡片的 ID 欄。

接下來，在我們的新卡片上選取點擊行為圖示，您會在其中看到與先前稍有不同的選單

• 不執行任何動作
• 前往自訂問題
• 更新儀表板篩選器

存在「不執行任何動作」選項的原因是，我們在 SQL 中撰寫了 Product category 問題，而 SQL 問題不包含「動作選單」。

現在，我們在這裡向您展示一個巧妙的技巧。如果我們返回 Product category 問題，我們可以使用 concat 建立根據篩選器值更新的字串。

select concat('Category is ', CATEGORY)
from PRODUCTS
where
    {{TITLE}} and
    {{ID}}

為了完成，我們可以將自訂目的地設定為特定的參數化 URL，就像我們之前所做的那樣，或將此卡片連結到另一個包含依產品類別劃分的訂單統計資訊的儀表板。

重點回顧

我們已經向您展示了如何設定簡單的點擊路徑，以及如何為原生查詢和使用 Metabase 查詢建構器建立的查詢設定自訂目的地。但這些範例僅顯示一個點擊路徑。您可以自訂儀表板上每個問題卡的行為！例如，您可以建立一個州詳細資訊儀表板，並自訂美國地圖上的點擊行為，以便 Metabase 將人員傳送到州詳細資訊儀表板，並依點擊的州進行篩選。

使用 Metabase 查詢建構器建立的問題預設會使用動作選單，讓使用者可以鑽取資料，但對於 SQL 問題，我們建議自訂目的地（在有意義的情況下）。請查看我們的文件以瞭解更多關於互動式儀表板的資訊。

您也可以將使用者屬性傳遞到 URL 或目的地篩選器中，讓您可以為特定使用者量身打造體驗。

因此，盡情發揮創意來設定資料的點擊路徑，並在我們的論壇上分享您想到的任何技巧。