Looker 篩選器元件可為以 Looker 為基礎的自訂資料應用程式提供 Looker 的豐富篩選器功能。
Looker 元件
Looker 元件是 Looker 應用程式中以 React 為基礎的預先建構部分。應用程式開發人員可以在以 Looker 為基礎建構的資料應用程式和擴充功能中使用元件。
元件可搭配 Looker 擴充功能架構和 Looker 的嵌入 SDK 使用。
Looker 篩選器元件
篩選器元件可為自訂資料應用程式和自訂嵌入式 Looker 資訊主頁提供 Looker 的豐富篩選器功能。開發人員可以使用 Looker API (透過 SDK 或 擴充功能) 擷取特定資訊主頁的 JSON，在應用程式中加入篩選器元件，並傳入資訊主頁中每個篩選器的屬性。元件會根據欄位和儲存的 UI 設定，將每個篩選器算繪出來。
篩選器元件套件提供 12 種篩選器控制項，類似於 Looker 本身資訊主頁可用的控制項：
- 按鈕群組
- 核取方塊
- 標記清單
- 範圍滑桿
- 按鈕切換鈕
- 圓形按鈕
- 下拉式選單
- 滑桿
- 單日
- 日期範圍
- 時間範圍
- 進階
篩選器元件會透過兩個搭配運作的套件提供：@looker/filter-components 和 @looker/filter-expressions。@looker/filter-components 套件會使用欄位、篩選器類型和目前的篩選器運算式來算繪篩選器元件，這些項目可從任何資訊主頁篩選器取得。@looker/filter-expressions 套件會將篩選器運算式轉換為可供 @looker/filter-components 使用的資料結構。
為何要使用篩選器元件？
篩選元件可讓開發人員騰出時間，讓在 Looker 中工作的分析師建立及維護可自訂的完善使用者體驗。Looker 篩選器元件提供下列優點：
- 高品質篩選器體驗：Looker 的篩選器元件提供豐富的篩選器邏輯和多種篩選器控制項，可滿足您所需的篩選器類型。
- 加快開發速度：篩選器元件可提供「即用型」篩選器存取權，讓開發人員專注於其他工作，加快整體開發速度。
- 自訂：您可以根據應用程式、擴充功能或嵌入式資訊主頁的外觀和風格，自訂篩選器控制項。開發人員可以使用篩選器元件，提供比以往更豐富的自訂選項。
- 連結至 Looker 資訊主頁：篩選器元件可直接連結至 Looker 資訊主頁上的篩選器，並在使用該元件的 Looker 應用程式、擴充功能或嵌入內容中呈現該篩選器的版本。凡是具有 Looker 資訊主頁編輯權限，且已連結至篩選器元件的使用者，都可以在 Looker 資訊主頁上編輯篩選器，這麼做會更新應用程式、擴充功能或嵌入內容中的篩選器。這麼做可節省開發人員的時間，因為開發人員不必每次因業務需求調整篩選器。
- 與 Looker 模型相關聯：篩選器元件會瞭解建構時所採用的 Looker 模型有無變更，也就是說，篩選器欄位和其他選項會隨底層模型的更新而更新。
安裝及使用篩選器元件
從 @looker/components NPM 存放區下載 @looker/filter-components 和 @looker/filter-expressions 套件。
如要瞭解如何安裝及使用濾鏡元件套件，請參閱各套件的 README 文件，可在 NPM 或 GitHub 中找到。
您可以在 GitHub 上找到篩選器元件示範應用程式。操作說明會顯示在 README 文件中。