Webbox
Webbox incorpora una pagina web esterna nel sondaggio come iframe modale, consentendo agli intervistatori di visualizzare riferimenti o interagire con strumenti esterni senza lasciare il modulo.
Webbox incorpora una pagina web esterna nel sondaggio come popup modale (iframe). L’intervistatore tocca un pulsante nell’etichetta o nel testo della nota, la pagina si apre in una sovrapposizione a schermo intero all’interno del modulo, e quando la chiude torna esattamente dove si trovava. Questo ti permette di mostrare materiale di riferimento, mappe, dashboard o strumenti personalizzati senza aprire una scheda browser separata.
Sintassi
Inserisci un tag HTML <webbox> direttamente nella colonna label di un campo label o note:
<webbox src='https://example.com/reference' title='Guida di riferimento'>Apri guida di riferimento</webbox>
| Attributo | Descrizione |
|---|---|
src | L’URL da caricare nell’iframe. Supporta sia virgolette singole che doppie. |
title | Testo mostrato nella barra dell’intestazione modale. Supporta testo normale. |
| (contenuto) | L’etichetta del pulsante cliccabile mostrata nel campo del sondaggio |
Esempio di base
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Guida sul campo'>📖 Apri guida sul campo</webbox> |
Questo renderizza un pulsante con l’etichetta “📖 Apri guida sul campo”. Quando viene toccato, si apre un modale che mostra il sito web della guida sul campo.
Incorporare una mappa
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Mappa area sondaggio'>🗺 Visualizza mappa</webbox> |
Passare valori del modulo alla pagina incorporata
Aggiungi i valori dei campi del modulo all’URL usando concat() nella colonna calculation e fai riferimento al risultato nell’etichetta:
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Dashboard nucleo familiare'>Apri dashboard</webbox> |
L’attributo src nel tag <webbox> supporta i riferimenti ${fieldname} quando l’etichetta è calcolata da un campo calculate. Costruisci l’URL completo in un campo calculate e fai riferimento ad esso.
Interazione con la ripetizione: pulsanti di eliminazione
Webbox supporta anche tag di azione speciali per gestire i gruppi di ripetizione nelle etichette:
<delete-repeat-current>Rimuovi questa riga</delete-repeat-current>
<delete-repeat-last>Rimuovi l'ultima riga</delete-repeat-last>
Questi vengono renderizzati come pulsanti che eliminano le istanze di ripetizione quando vengono toccati. Posizionali in un campo note all’interno di (o subito dopo) il gruppo di ripetizione:
| type | name | label |
|---|---|---|
| begin_repeat | items | Elemento |
| text | item_name | Nome elemento |
| note | delete_btn | <delete-repeat-current>✕ Rimuovi questo elemento</delete-repeat-current> |
| end_repeat |
Comunicazione con la pagina incorporata (postMessage)
L’iframe webbox e il modulo padre possono comunicare usando l’API postMessage del browser. Il padre invia un messaggio init all’iframe quando si apre. La pagina incorporata può rispondere con:
delete-repeat-current— attiva l’eliminazione dell’istanza di ripetizione correntedelete-repeat-last— attiva l’eliminazione dell’ultima istanza di ripetizione
Questo abilita strumenti web personalizzati (es. strumenti di disegno, mappe interattive) a triggerare azioni del modulo quando l’utente conferma un’azione all’interno dell’iframe.
Best practice
- Usa webbox per il materiale di riferimento (linee guida, tabelle di ricerca, mappe) — non per raccogliere dati che dovrebbero essere nel modulo stesso.
- Assicurati che l’URL incorporato sia accessibile dalla rete del dispositivo — webbox richiede connettività.
- Mantieni la pagina incorporata ottimizzata per mobile — il modale ha una larghezza massima di 800px e l'80% dell’altezza del viewport.
- Usa testo del pulsante descrittivo (es. “Visualizza mappa del villaggio”) piuttosto che etichette generiche (“Clicca qui”).
- Informa gli intervistatori che chiudere il modale li riporta al sondaggio — alcuni utenti potrebbero non sapere come chiudere una sovrapposizione iframe.
Limitazioni
- Webbox richiede connettività di rete per caricare l’URL incorporato.
- Alcuni siti esterni bloccano l’incorporazione negli iframe tramite le intestazioni
X-Frame-OptionsoContent-Security-Policy— questi siti non possono essere usati con webbox. - Il modale si chiude quando l’intervistatore naviga via dalla domanda — qualsiasi stato non salvato nell’iframe viene perso.
- Webbox è un’estensione del modulo web di rtSurvey e potrebbe non funzionare in altri client compatibili con ODK.