Webbox
Webbox intègre une page web externe dans l’enquête sous forme d’iframe modale, permettant aux enquêteurs de consulter des références ou d’interagir avec des outils externes sans quitter le formulaire.
Webbox intègre une page web externe dans l’enquête sous forme de fenêtre modale (iframe). L’enquêteur appuie sur un bouton dans le texte de l’étiquette ou de la note, la page s’ouvre dans une superposition plein écran dans le formulaire, et lorsqu’il la ferme il revient exactement où il était. Cela vous permet d’afficher du matériel de référence, des cartes, des tableaux de bord ou des outils personnalisés sans ouvrir un onglet de navigateur séparé.
Syntaxe
Insérez une balise HTML <webbox> directement dans une colonne d’étiquette label ou note :
<webbox src='https://example.com/reference' title='Guide de référence'>Ouvrir le guide de référence</webbox>
| Attribut | Description |
|---|---|
src | L’URL à charger dans l’iframe. Prend en charge les guillemets simples et doubles. |
title | Texte affiché dans la barre d’en-tête de la modale. Prend en charge le texte brut. |
| (contenu) | L’étiquette du bouton cliquable affichée dans le champ de l’enquête |
Exemple de base
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Guide de terrain'>📖 Ouvrir le guide de terrain</webbox> |
Ceci affiche un bouton intitulé “📖 Ouvrir le guide de terrain”. Lorsqu’il est tapé, une modale s’ouvre affichant le site web du guide de terrain.
Intégrer une carte
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Carte de la zone d\'enquête'>🗺 Voir la carte</webbox> |
Passer des valeurs de formulaire à la page intégrée
Ajoutez des valeurs de champs du formulaire à l’URL en utilisant concat() dans la colonne calculation et référencez le résultat dans l’étiquette :
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Tableau de bord du ménage'>Ouvrir le tableau de bord</webbox> |
L’attribut src dans la balise <webbox> prend en charge les références ${fieldname} lorsque l’étiquette est calculée depuis un champ calculate. Construisez l’URL complète dans un champ calculate et référencez-la.
Interaction avec les répétitions : boutons de suppression
Webbox prend également en charge des balises d’action spéciales pour gérer les groupes de répétition dans les étiquettes :
<delete-repeat-current>Supprimer cette ligne</delete-repeat-current>
<delete-repeat-last>Supprimer la dernière ligne</delete-repeat-last>
Ceux-ci s’affichent sous forme de boutons qui suppriment les instances de répétition lorsqu’ils sont tapés. Placez-les dans un champ note à l’intérieur (ou juste après) le groupe de répétition :
| type | name | label |
|---|---|---|
| begin_repeat | items | Élément |
| text | item_name | Nom de l’élément |
| note | delete_btn | <delete-repeat-current>✕ Supprimer cet élément</delete-repeat-current> |
| end_repeat |
Communication avec la page intégrée (postMessage)
L’iframe webbox et le formulaire parent peuvent communiquer en utilisant l’API postMessage du navigateur. Le parent envoie un message init à l’iframe lorsqu’il s’ouvre. La page intégrée peut répondre avec :
delete-repeat-current— déclenche la suppression de l’instance de répétition actuelledelete-repeat-last— déclenche la suppression de la dernière instance de répétition
Cela permet aux outils web personnalisés (ex. : outils de dessin, cartes interactives) de déclencher des actions du formulaire lorsque l’utilisateur confirme une action dans l’iframe.
Bonnes pratiques
- Utilisez webbox pour le matériel de référence (directives, tableaux de consultation, cartes) — pas pour collecter des données qui devraient être dans le formulaire lui-même.
- Assurez-vous que l’URL intégrée est accessible depuis le réseau de l’appareil — webbox nécessite une connectivité.
- Gardez la page intégrée adaptée au mobile — la modale a une largeur maximale de 800px et 80% de la hauteur de la fenêtre.
- Utilisez un texte de bouton descriptif (ex. : “Voir la carte du village”) plutôt que des étiquettes génériques (“Cliquez ici”).
- Informez les enquêteurs que la fermeture de la modale les ramène à l’enquête — certains utilisateurs peuvent ne pas savoir comment fermer une superposition iframe.
Limitations
- Webbox nécessite une connectivité réseau pour charger l’URL intégrée.
- Certains sites externes bloquent l’intégration dans des iframes via des en-têtes
X-Frame-OptionsouContent-Security-Policy— ces sites ne peuvent pas être utilisés avec webbox. - La modale se ferme lorsque l’enquêteur navigue hors de la question — tout état non sauvegardé dans l’iframe est perdu.
- Webbox est une extension de formulaire web rtSurvey et peut ne pas fonctionner dans d’autres clients compatibles ODK.