Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Komponen filter Looker menyediakan fungsi filter lengkap Looker untuk aplikasi data kustom yang dibuat di atas Looker.
Komponen Looker
Komponen Looker adalah bagian aplikasi Looker bawaan berbasis React. Developer aplikasi dapat menggunakan komponen dalam aplikasi data dan ekstensi yang dibuat di atas Looker.
Komponen filter menyediakan fungsi filter lengkap Looker untuk aplikasi data buatan kustom dan dasbor Looker tersemat yang disesuaikan. Dengan menggunakan Looker API (melalui SDK atau Ekstensi) untuk mengambil JSON untuk dasbor tertentu, developer dapat menyertakan komponen filter dalam aplikasi mereka dan meneruskan properti setiap filter di dasbor. Komponen kemudian akan merender setiap filter sesuai dengan kolom dan konfigurasi UI yang disimpan.
Komponen filter dikirim melalui dua paket yang bekerja sama: @looker/filter-components dan @looker/filter-expressions. Paket @looker/filter-components merender komponen filter menggunakan kolom, jenis filter, dan ekspresi filter saat ini, yang tersedia dari filter dasbor mana pun. Paket @looker/filter-expressions mengubah ekspresi filter menjadi struktur data yang dapat digunakan oleh @looker/filter-components.
Mengapa menggunakan komponen filter?
Komponen filter menghemat waktu developer dan memungkinkan analis yang bekerja di Looker untuk membuat dan mempertahankan pengalaman pengguna yang andal dan dapat disesuaikan. Komponen filter Looker memberikan manfaat berikut:
Pengalaman filter berkualitas tinggi — Komponen filter menyediakan logika filter yang kaya dari Looker dan berbagai kontrol filter untuk menyesuaikan jenis filter yang Anda butuhkan.
Mempercepat pengembangan — Komponen filter memberikan akses "siap pakai" ke filter, sehingga developer dapat berfokus pada tugas lain dan mempercepat pengembangan secara keseluruhan.
Penyesuaian — Kontrol filter dapat disesuaikan dengan tampilan dan nuansa aplikasi, ekstensi, atau dasbor tersemat Anda. Developer dapat menggunakan komponen filter untuk memberikan lebih banyak penyesuaian daripada sebelumnya.
Ditautkan ke dasbor Looker — Komponen filter dapat dihubungkan langsung ke filter di dasbor Looker, dan versi filter tersebut akan dirender di aplikasi, ekstensi, atau penyematan Looker yang menggunakan komponen. Setiap pengguna yang memiliki akses edit ke dasbor Looker yang terhubung ke komponen filter dapat mengedit filter di dasbor Looker, yang akan memperbarui filter di aplikasi, ekstensi, atau penyematan. Hal ini akan menghemat waktu developer karena developer tidak diperlukan setiap kali ada alasan bisnis untuk menyesuaikan filter.
Terikat dengan model Looker — Komponen filter mengetahui perubahan pada model Looker tempat komponen tersebut dibuat, yang berarti kolom filter dan opsi lainnya bersifat dinamis dan akan diperbarui bersama dengan pembaruan pada model pokok.
Informasi tentang cara menginstal dan menggunakan paket komponen filter dapat ditemukan dalam dokumen README untuk setiap paket, yang tersedia di NPM atau GitHub.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Sulit dipahami","hardToUnderstand","thumb-down"],["Informasi atau kode contoh salah","incorrectInformationOrSampleCode","thumb-down"],["Informasi/contoh yang saya butuhkan tidak ada","missingTheInformationSamplesINeed","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-31 UTC."],[],[],null,["# Looker filter components\n\n\u003e Looker filter components provide Looker's rich filter functionality for custom data applications that are built on top of Looker.\n\nLooker components\n-----------------\n\n[Looker components](/looker/docs/components-getting-started) are React-based, prebuilt pieces of Looker's application. Application developers can use components in data applications and extensions that are built on top of Looker.\n\nComponents can be used with the [Looker extension framework](/looker/docs/extension-framework) and [Looker's Embed SDK](/looker/docs/embed-sdk).\n\nLooker filter components\n------------------------\n\nFilter components provide Looker's rich filter functionality for custom-built data applications and customized embedded Looker dashboards. Using the Looker API (through an [SDK](/looker/docs/embed-sdk) or [Extension](/looker/docs/extension-framework)) to fetch JSON for a given dashboard, developers can include the filter component in their application and pass in the properties of each filter in the dashboard. The component will then render each filter according to its field and stored UI configuration.\n\nThe filter components package offers 12 types of filter controls, similar to the controls [available for Looker's own dashboards](/looker/docs/filters-user-defined-dashboards#dashboard_filter_controls): \n- Button group\n- Checkbox\n- Tag list\n- Range slider\n- Button toggle\n- Radio button \n- Drop-down menu\n- Slider\n- Single day\n- Date range\n- Timeframe\n- Advanced\n\nFilter components are delivered through two packages that work together: [`@looker/filter-components`](https://github.com/looker-open-source/components/tree/main/packages/filter-components#readme) and [`@looker/filter-expressions`](https://github.com/looker-open-source/components/tree/main/packages/filter-expressions#readme). The `@looker/filter-components` package renders a filter component by using [a field, a filter type, and current filter expressions](https://github.com/looker-open-source/components/blob/main/packages/filter-components/USAGE.md#filter), which are available from any dashboard filter. The `@looker/filter-expressions` package transforms filter expressions into data structures that can be used by `@looker/filter-components`.\n\nWhy use filter components?\n--------------------------\n\nFilter components free up developer time and allow analysts who are working in Looker to build and maintain robust, customizable user experiences. Looker filter components provide the following benefits:\n\n- **High-quality filter experiences** --- Filter components provide Looker's rich filter logic and a wide range of filter controls to best fit the types of filters you need.\n- **Speed development** --- Filter components provide \"out-of-the-box\" access to filters, allowing developers to focus on other tasks and speeding overall development.\n- **Customization** --- Filter controls can be customized to the look and feel of your application, extension, or embedded dashboard. Developers can use filter components to provide more customization than ever before.\n- **Linked to Looker dashboards** --- A filter component can be connected directly to a filter on a Looker dashboard, and a version of that filter will be rendered in the Looker application, extension, or embed that is using the component. Any user who has edit access to the Looker dashboard that is connected to the filter component can edit the filter on the Looker dashboard, which updates the filter in the application, extension, or embed. This frees up developer time because a developer is not required every time there is a business reason to adjust a filter.\n- **Tied to the Looker model** --- Filter components are aware of changes to the Looker model on which they are built, which means filter fields and other options are dynamic and will update along with updates to the underlying model.\n\nInstalling and using filter components\n--------------------------------------\n\nDownload the [`@looker/filter-components`](https://www.npmjs.com/package/@looker/filter-components) and [`@looker/filter-expressions`](https://www.npmjs.com/package/@looker/filter-expressions) packages from the `@looker/components` NPM repository.\n\nInformation on installing and using the filter components packages can be found in the README document for each package, available in NPM or [GitHub](https://github.com/looker-open-source/components/tree/main/packages/filter-components).\n\nA [filter components demo application](https://github.com/looker-open-source/components/tree/%40looker/components%403.0.8/apps/filter-demo) is available on GitHub. Instructions for using the demo appear in its README document."]]
