Webbox
Webbox menyematkan halaman web eksternal di dalam survei sebagai iframe modal, memungkinkan enumerator melihat referensi atau berinteraksi dengan alat eksternal tanpa meninggalkan formulir.
Webbox menyematkan halaman web eksternal di dalam survei sebagai popup modal (iframe). Enumerator mengetuk tombol dalam teks label atau catatan, halaman terbuka dalam overlay layar penuh dalam formulir, dan ketika mereka menutupnya mereka kembali ke posisi tepat mereka berada. Ini memungkinkan Anda menampilkan materi referensi, peta, dasbor, atau alat kustom tanpa membuka tab browser terpisah.
Sintaks
Sisipkan tag HTML <webbox> langsung dalam kolom label label atau note:
<webbox src='https://example.com/reference' title='Panduan Referensi'>Buka Panduan Referensi</webbox>
| Atribut | Deskripsi |
|---|---|
src | URL yang dimuat dalam iframe. Mendukung tanda kutip tunggal dan ganda. |
title | Teks yang ditampilkan di bilah header modal. Mendukung teks biasa. |
| (konten) | Label tombol yang dapat diklik ditampilkan dalam bidang survei |
Contoh dasar
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Panduan Lapangan'>Buka Panduan Lapangan</webbox> |
Ini merender tombol berlabel “Buka Panduan Lapangan”. Saat diketuk, modal terbuka menampilkan situs web panduan lapangan.
Menyematkan peta
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Peta Area Survei'>Lihat Peta</webbox> |
Meneruskan nilai formulir ke halaman yang disematkan
Tambahkan nilai bidang formulir ke URL menggunakan concat() dalam kolom calculation dan referensikan hasilnya dalam label:
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Dasbor Rumah Tangga'>Buka Dasbor</webbox> |
Atribut src dalam tag <webbox> mendukung referensi ${fieldname} ketika label dihitung dari bidang calculate. Buat URL lengkap dalam bidang calculate dan referensikan.
Interaksi pengulangan: tombol hapus
Webbox juga mendukung tag aksi khusus untuk mengelola grup pengulangan di dalam label:
<delete-repeat-current>Hapus baris ini</delete-repeat-current>
<delete-repeat-last>Hapus baris terakhir</delete-repeat-last>
Ini dirender sebagai tombol yang menghapus instans pengulangan saat diketuk. Tempatkan dalam bidang note di dalam (atau tepat setelah) grup pengulangan:
| type | name | label |
|---|---|---|
| begin_repeat | items | Item |
| text | item_name | Nama item |
| note | delete_btn | <delete-repeat-current>Hapus item ini</delete-repeat-current> |
| end_repeat |
Komunikasi dengan halaman yang disematkan (postMessage)
Iframe webbox dan formulir induk dapat berkomunikasi menggunakan API postMessage browser. Induk mengirim pesan init ke iframe saat terbuka. Halaman yang disematkan dapat merespons dengan:
delete-repeat-current— memicu penghapusan instans pengulangan saat inidelete-repeat-last— memicu penghapusan instans pengulangan terakhir
Ini memungkinkan alat web kustom (misalnya, alat gambar, peta interaktif) untuk memicu tindakan formulir ketika pengguna mengkonfirmasi tindakan di dalam iframe.
Praktik Terbaik
- Gunakan webbox untuk materi referensi (panduan, tabel pencarian, peta) — bukan untuk mengumpulkan data yang seharusnya ada dalam formulir itu sendiri.
- Pastikan URL yang disematkan dapat diakses dari jaringan perangkat — webbox memerlukan konektivitas.
- Jaga halaman yang disematkan ramah mobile — modal memiliki lebar maksimum 800px dan 80% dari tinggi viewport.
- Gunakan teks tombol yang deskriptif (misalnya, “Lihat Peta Desa”) daripada label generik (“Klik di sini”).
- Informasikan enumerator bahwa menutup modal mengembalikan mereka ke survei — beberapa pengguna mungkin tidak tahu cara menutup overlay iframe.
Keterbatasan
- Webbox memerlukan konektivitas jaringan untuk memuat URL yang disematkan.
- Beberapa situs eksternal memblokir penyematan dalam iframe melalui header
X-Frame-OptionsatauContent-Security-Policy— situs-situs ini tidak dapat digunakan dengan webbox. - Modal menutup ketika enumerator menavigasi dari pertanyaan — status yang belum disimpan dalam iframe akan hilang.
- Webbox adalah ekstensi formulir web rtSurvey dan mungkin tidak berfungsi di klien lain yang kompatibel dengan ODK.