Widget input

Gunakan widget input untuk menangani input pengguna seperti klik dan entri teks.

Widget Tombol Tombol

Pengguna mengklik tombol untuk melakukan tindakan, seperti mengirimkan formulir atau mengirim email.

Penggunaan

Seret tombol ke halaman dan gunakan Editor Properti untuk mengonfigurasi teks, tampilan, dan fungsinya.

Alur kerja umum

  • Di editor Properti, tetapkan tindakan untuk merespons peristiwa, seperti pengguna aplikasi mengklik tombol (peristiwa onClick).
  • Ikat teks label dengan sumber data atau skrip.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan tombol.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Contoh

Berbagai sampel dan template yang menggunakan tombol.

Widget Label Label

Gunakan widget label untuk menambahkan label teks ke objek di halaman.

Penggunaan

Seret label ke halaman dan gunakan Editor Properti untuk mengonfigurasi teks dan tampilannya.

Alur kerja umum

  • Berikan teks pada gambar.
  • Ikat properti teks label dengan sumber data.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan label. Anda dapat menyesuaikan lebih lanjut jenis typeface dan ukuran font.

Informasi tambahan

Widgets API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa widget ini.

Contoh

Berbagai sampel dan template yang menggunakan label.

Widget Kotak Teks Kotak Teks

Gunakan widget kotak teks untuk menyediakan tempat bagi pengguna untuk memasukkan dan mengedit teks.

Penggunaan

Seret kotak teks ke halaman dan gunakan Editor Properti untuk mengonfigurasi label, tampilan, dan nilai awalnya.

Alur kerja umum

  • Sediakan tempat bagi pengguna untuk memasukkan teks.
  • Tampilkan nilai teks default, tetapi dapat diedit, kepada pengguna.
  • Ikat nilai awal dengan sumber data.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk memilih dari beberapa tampilan yang berbeda, termasuk beberapa tampilan yang disertai dengan ikon penelusuran.

Contoh

Template Galeri Material yang memiliki beberapa kotak teks.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Area Teks Area Teks

Gunakan widget area teks untuk menyediakan kolom bergulir dengan ukuran besar bagi pengguna untuk memasukkan teks.

Penggunaan

Seret area teks ke halaman dan gunakan Editor Properti untuk mengonfigurasi teks dan tampilannya.

Alur kerja umum

  • Biarkan pengguna memasukkan nilai teks bergulir dengan ukuran panjang.
  • Ikat properti teks label dengan sumber data.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan area teks.

Contoh

Template Galeri Material yang memiliki beberapa area teks.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Kotak Centang Kotak centang

Gunakan widget kotak centang untuk memberikan dua pilihan kepada pengguna, yaitu aktif atau nonaktif.

Penggunaan

Seret kotak centang ke halaman dan gunakan Editor Properti untuk mengonfigurasi label dan nilai awalnya.

Alur kerja umum

  • Biarkan pengguna mengaktifkan atau menonaktifkan setelan.
  • Ikat nilai untuk menampilkan status fitur aktif/nonaktif tertentu.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk menampilkan widget sebagai kotak centang atau penggeser.

Contoh

Template Galeri Material yang memiliki beberapa kotak centang.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Gunakan widget drop-down agar pengguna dapat memilih dari daftar opsi. Widget ini berguna dalam menetapkan nilai dari satu set nilai yang memungkinkan atau dalam menetapkan satu tepi relasi.

Penggunaan

Seret widget drop-down ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Alur kerja umum

  • Biarkan pengguna memilih salah satu dari beberapa opsi.
  • Isi menu drop-down dengan item dari model data

Berikut ini adalah properti yang penting untuk widget Drop-down:

Properti Deskripsi
value Nilai yang ditetapkan ke properti data terikat, berdasarkan pada pilihan drop-down pengguna
options Array representasi string dari opsi yang menyusun konten drop-down
names Array string yang akan ditampilkan sebagai ganti string default options. Panjang array harus sama dengan options.
allowNull Kotak centang yang, jika dicentang, akan menetapkan value awal drop-down ke null
nullItemName String yang ditampilkan untuk nilai null drop-down, yang biasanya digunakan sebagai permintaan atas pilihan pengguna

Berikut ini adalah beberapa contoh binding drop-down:

Contoh langsung ini memungkinkan pengguna memilih FavoriteColor dari daftar Colors yang diwakili oleh proyeksi properti ColorNames pada daftar.

  • nilai: @datasource.item.FavoriteColor
  • opsi: @datasources.Color.items
  • nama: @datasources.Color.items..ColorNames

Contoh ini memungkinkan pengguna menetapkan kolom Currency ke salah satu mata uang yang tercantum dalam properti possibleValues.

  • nilai: @datasource.item.Currency
  • opsi: @datasource.model.fields.Currency.possibleValues

Contoh ini memungkinkan pengguna mengikat InternetSpeed ke ekspresi JavaScript yang terdiri dari literal array.

  • nilai: @datasource.item.InternetSpeed
  • opsi: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan drop-down.

Contoh

Template Galeri Material yang menggunakan widget drop-down.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Kotak Tanggal Kotak Tanggal

Gunakan widget kotak tanggal agar pengguna dapat memasukkan tanggal. Pengguna dapat mengetikkan tanggal secara manual atau mengklik ikon kalender untuk menampilkan pemilih tanggal.

Penggunaan

Seret widget kotak tanggal ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya, termasuk format tanggal dan zona waktu.

Alur kerja umum

  • Biarkan pengguna memasukkan tanggal dalam tabel, formulir, dan area teks.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan kotak tanggal.

Contoh

Template Persetujuan Perjalanan yang mencakup beberapa kotak tanggal.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Grup Radio Grup Radio

Gunakan widget grup radio untuk memungkinkan pengguna memilih salah satu dari beberapa opsi yang telah dikonfigurasi sebelumnya.

Penggunaan

Seret widget grup radio ke halaman dan gunakan Editor Properti untuk mengonfigurasi nilai dan opsinya.

Alur kerja umum

Grup radio memungkinkan pengguna memilih satu value dari array options.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol apakah widget ditampilkan secara horizontal atau vertikal.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Rating Bintang Rating Bintang

Gunakan widget rating bintang untuk memungkinkan pengguna menerapkan rating ke objek lain di halaman.

Penggunaan

Seret widget rating bintang ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya, termasuk jumlah total bintang dan berapa banyak yang dipilih ketika widget dimuat.

Alur kerja umum

  • Tetapkan jumlah bintang dan ikat nilainya dengan sumber data.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk memilih apakah widget menggunakan ikon bintang atau hati.

Contoh

Template Rating Vendor yang menggunakan rating bintang.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Penggeser Penggeser

Gunakan widget penggeser untuk memungkinkan pengguna memilih dari serangkaian nilai.

Penggunaan

Seret widget penggeser ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya, termasuk rentang nilainya.

Alur kerja umum

  • Tetapkan rentang nilai dan ikat dengan sumber data.

Pengaturan gaya

Tidak ada opsi pengaturan gaya untuk widget ini.

Contoh

Template Galeri Material yang memiliki widget penggeser

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Kotak Saran Kotak Saran

Gunakan widget kotak saran untuk membantu pengguna mengisi kolom teks dengan nilai yang telah Anda konfigurasikan sebelumnya.

Penggunaan

Seret widget kotak saran ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Alur kerja umum

  • Gunakan properti value untuk menentukan nilai, dan options untuk memberikan nilai yang disarankan. Jenis item dalam options harus cocok dengan jenis item dalam value.
  • Anda dapat mengonfigurasi Kotak Saran untuk menarik sarannya dari kolom dengan nilai yang memungkinkan atau relasi, atau ke record dari model yang ada. Saat ini tindakan tersebut hanya dapat dilakukan menggunakan UI yang disediakan di kolom teks saran.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan kotak saran.

Contoh

Template Rating Vendor yang menggunakan widget kotak saran.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Editor Teks Editor Teks

Gunakan widget editor teks untuk menyediakan editor teks agar pengguna dapat menulis dan memformat entri teks yang lebih panjang.

Penggunaan

Seret widget editor teks ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Alur kerja umum

  • Biarkan pengguna memasukkan nilai teks bergulir dengan ukuran panjang.
  • Ikat properti teks label dengan sumber data.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan editor teks.

Contoh

Template Rating Vendor yang menggunakan widget editor teks.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Banyak Pilihan Banyak Pilihan

Memungkinkan pengguna memilih beberapa item dari array opsi dengan widget banyak pilihan.

Penggunaan

Tambahkan widget banyak pilihan ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Untuk menetapkan opsi yang dapat dipilih pengguna aplikasi, tetapkan properti opsi. Klik opsi lalu, masukkan salah satu opsi berikut pada editor kode binding:

  • array opsi, seperti ["east", "north", "south", "west"]
  • binding ke items pada kolom sumber data dengan sintaks berikut:

    @datasource.items..field-name

    .. adalah operator proyeksi yang memungkinkan Anda mengakses daftar nilai yang dikompilasi untuk suatu kolom. Misalnya, jika model memiliki kolom bernama Region, Anda dapat menetapkan opsi banyak pilihan untuk semua nilai Region dari semua record dengan mengikat @datasource.items..Region. Jika Region bernilai "east" untuk satu record, dan "north, south" untuk record lainnya, pengguna dapat memilih "east", "north", dan "south" sebagai opsi pada aplikasi.

Untuk menyimpan nilai yang dipilih pengguna, tetapkan properti nilai dengan binding data. Jika pengguna memilih beberapa string, Anda harus mengubahnya menjadi sebuah array. Salah satu cara untuk membuat array adalah dengan menggunakan transformator binding strToArray:

@datasource.item.field-name#strToArray()

Jenis item dalam opsi harus cocok dengan jenis item dalam nilai.

Alur kerja umum

  • Gunakan untuk menetapkan nilai pada kolom berulang atau menetapkan banyak tepi relasi.

Pengaturan gaya

Untuk mengontrol tampilan widget banyak pilihan, gunakan pemilih tema di Panel Tindakan.

Contoh

Tutorial memilih opsi berisi cara menyiapkan widget banyak pilihan. Template Peringkat Vendor yang menggunakan widget banyak pilihan.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Pemilih Drive Pemilih Drive

Gunakan widget Pemilih Drive agar pengguna dapat menemukan file di Drive-nya dan mengupload file tersebut ke aplikasi Anda.

Penggunaan

  1. Konfigurasikan aplikasi Anda untuk dijalankan sebagai pengguna
  2. Seret widget Pemilih Drive ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Alur kerja umum

Widget ini menampilkan:

  • Nama file
  • URL file, yang dapat Anda gunakan untuk menautkan ke file
  • ID file, yang dapat Anda gunakan untuk mendapatkan objek file. ID ini memungkinkan Anda memanggil operasi, seperti:
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

Anda harus mengonfigurasi aplikasi agar dijalankan sebagai pengguna untuk menggunakan widget ini.

Secara default, widget Pemilih Drive memungkinkan pengguna untuk memilih file di Google Drive-nya, atau file di komputernya untuk diupload ke Google Drive. Pemilih Drive menyertakan properti views pada grup properti Pemilih Drive, yang berfungsi untuk menambahkan tab tambahan ke tampilan. Misalnya, tambahkan FOLDERS ke properti views untuk menyertakan tab pada Pemilih Drive yang menampilkan folder Google Drive pengguna; tambahkan IMAGE_SEARCH untuk menambahkan tab Google Penelusuran Gambar; tambahkan SPREADSHEETS untuk menampilkan tab yang hanya menampilkan spreadsheet dari Google Drive pengguna. Untuk mengetahui informasi selengkapnya tentang tampilan di widget Pemilih Drive, lihat Referensi Class Pemilih.

Anda dapat menggunakan properti features di grup properti Pemilih Drive untuk mengubah perilaku tampilan. Misalnya, tambahkan MULTISELECT_ENABLED untuk memungkinkan pengguna memilih lebih dari satu item sekaligus. Untuk mengetahui informasi selengkapnya tentang fitur dalam widget Pemilih Drive, lihat Referensi Class Pemilih.

Jika Anda menambahkan tampilan Folder, Pemilih Drive akan mengingat folder terakhir yang dilihat pengguna dan menampilkannya ketika pengguna mengklik tombol Pemilih Drive lagi. Pengguna dapat langsung membuka folder dengan mengklik nama folder apa pun yang muncul di lokasi navigasi di bagian atas widget.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan Pemilih Drive.

Contoh

Template Rating Vendor yang menggunakan widget Pemilih Drive.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.

Widget Pemilih Pengguna Pemilih Pengguna

Widget Pemilih Pengguna memungkinkan pengguna untuk menemukan orang lain di organisasi Anda. Saat pengguna mengetikkan sesuatu, widget memberikan saran pelengkapan otomatis, lengkap dengan foto, nama, dan alamat email.

Penggunaan

  1. Tambahkan model Direktori ke aplikasi Anda.
  2. Seret widget Pemilih Pengguna ke halaman dan gunakan Editor Properti untuk mengonfigurasi opsinya.

Alur kerja umum

  • Ikat alamat email orang yang dipilih dengan kolom pada model.

Pengaturan gaya

Gunakan pemilih tema di Panel Tindakan untuk mengontrol tampilan Pemilih Pengguna.

Contoh

Template Persetujuan Dokumen yang menggunakan widget Pemilih Pengguna.

Informasi tambahan

Widget API memiliki informasi selengkapnya tentang gaya, properti, metode, dan peristiwa.