La documentation est en cours de rédaction et d'amélioration, certaines sections sont incomplètes.
Structure globale
Rédaction en cours
Mise au point des pages
Interface
Pour créer un eCRF, il faut se connecter sur l'interface administrateur, afficher le panneau de configuration « Projets » [1] puis cliquer sur le menu « Accès » du projet d'intérêt [2]. Vous pouvez mettre le lien ouvert en favoris pour accéder directement au projet par la suite.
Vue par défaut
Un nouvel onglet s'ouvre dans votre navigateur. Le bandeau noir en haut de page permet de configurer l'affichage de la page. Vous pouvez afficher (ou non) un ou deux panneaux en sélectionnant (ou désélectionnant) le(s) panneau(x) d'intérêt. Par défaut, le panneau « Liste » [2] est sélectionné. Les différents panneaux de configuration sont : « Code » [1], « Liste » [2] et « Saisie » [3]. Le menu déroulant central [4] vous permet de naviguer entre les différentes pages de votre eCRF (ici la première page se nomme « Introduction »). Le menu déroulant intermédiaire [5] vous permet de naviguer entre les différents sous-projets si votre projet a été subdivisé. Enfin le menu déroulant tout à droite [6] vous permet de changer votre mot de passe ou déconnecter votre session.
Code
Le panneau de configuration « Code » vous permet d'éditer votre eCRF. Il contient deux onglets : « Application » et « Formulaire ». Par défaut, l'onglet « Formulaire » est affiché.
L'onglet « Formulaire » vous permet l'édition du contenu de votre eCRF pour une page donnée (ici « Introduction ». Pour rappel la navigation entre les différentes pages de votre formulaire s'effectue via le menu déroulant [1]). Le contenu est édité en ligne de codes via un éditeur de script. Le langage de programmation est le JavaScript. La connaissance du langage n'est pas nécessaire pour la création et l'édition de scripts simples. L'édition de l'eCRF et les différents modules de code seront abordés plus en détails ultérieurement.
L'onglet « Application » vous permet d'éditer la structure générale de votre eCRF. Elle permet ainsi de définir les différentes pages et ensemble de pages. La structure est également éditée en ligne de code via un éditeur de script (également Javascript). L'édition de la structure de l'eCRF et les différents modules de code seront abordés plus en détail ultérieurement.
Liste
Le panneau « Liste » vous permet d'ajouter des nouvelles observations (« Ajouter un suivi ») et de monitorer le recueil de données. La variable « ID » correspond à l'identifiant d'un formulaire de recueil. Il s'agit d'un numéro séquentiel par défaut mais cela peut être paramétré. Les variables « Introduction », « Avancé » et « Mise en page » correspondent aux trois pages de l'eCRF d'exemple.
Saisie
Le panneau de configuration « Saisie » vous permet de réaliser le recueil d'une nouvelle observation (nouveau patient) ou de modifier une observation donnée (après sélection de l'observation dans le panneau de configuration « Liste »). La navigation entre les différentes pages de l'eCRF peut s'effectuer avec le menu déroulant [1] ou le menu de navigation [2]. Après avoir réalisé la saisie d'une observation, cliquer sur « Enregistrer » [3].
Widgets standards
Les widgets sont créés en appelant des fonctions prédéfinies avec la syntaxe suivante :
function ( "nom_variable", "Libellé présenté à l'utilisateur" )
Les noms de variables doivent commencer par une lettre ou _, suivie de zéro ou plusieurs caractères alphanumériques ou _. Ils ne doivent pas contenir d'espaces, de caractères accentués ou tout autre caractère spécial.
La plupart des widgets acceptent des paramètres optionnels de cette manière :
function ( "nom_variable", "Libellé présenté à l'utilisateur", { option1 : valeur, option2 : valeur } )
Attention à la syntaxe du code. Lorsque les parenthèses ou les guillemets ne correspondent pas, une erreur se produit et la page affichée ne peut pas être mise à jour tant que l'erreur persiste. La section sur les erreurs contient plus d'informations à ce sujet.
Saisie d'information
| Widget | Code |
|---|---|
 |
form.text("variable", "Libellé") |
|
form.number("variable", "Libellé") |
|
form.slider("variable", "Libellé") |
|
form.date("nom_variable", "Libellé") |
|
form.binary("nom_variable", "Libellé") |
|
form.enum("nom_variable", "Libellé", [ ["modality1", "modality1 Label"], ["modality2", "modality2 Label"] ]) |
|
form.enumDrop("nom_variable", "Libellé", [ ["modality1", "modality1 Label"], ["modality2", "modality2 Label"] ]) |
|
form.enumRadio("nom_variable", "Libellé", [ ["modality1", "modality1 Label"], ["modality2", "modality2 Label"] ]) |
|
form.multi("nom_variable", "Libellé", [ ["modality1", "modality1 Label"], ["modality2", "modality2 Label"] ]) |
|
form.multiCheck("nom_variable", "Libellé", [ ["modality1", "modality1 Label"], ["modality2", "modality2 Label"] ]) |
|
form.calc("nom_variable", 18) |
Autres widgets
| Widget | Code |
|---|---|
|
form.section("Nom de la section", () => { form.text("variable1", "Label 1") form.number("variable2", "Label 2") }) |
|
form.output("This is <b>text</b> content") |
|
form.output(html`This is <b>HTML</b> content`) |
Images et autres fichiers
Il est possible d'intégrer des images, des vidéos et tous types de fichiers, directement hébergés par Goupile. Pour cela, ouvrez le panneau de publication (accessible au-dessus de l'éditeur), puis cliquez sur le lien « Ajouter un fichier » [1].
Vous pouvez ensuite sélectionner un fichier à ajouter depuis votre ordinateur, et le renommer si vous le souhaitez. Vous pouvez également le mettre en arborescence en lui donnant un nom tel que « images/alpes/montblanc.png ».
Une fois l'image ajoutée, vous pouvez directement l'afficher dans vos pages à l'aide du widget form.output et du code HTML suivant:
form.output(html`
<img src=${ENV.urls.files + 'apple.png'} alt="Logo Apple" />
`)
L'utilisation de ENV.urls.files pour construire l'URL vous garantit une URL qui changera à chaque publication du projet, pour éviter des problèmes liés au cache des navigateurs. Cependant, chaque fichier est aussi accessible via /projet/files/images/alpes/montagne.png, et cette URL est stable depuis l'extérieur de Goupile.
Le nom de fichier favicon.png est particulier. Si vous mettez une image nommée favicon.png elle remplacera la favicon affichée dans le navigateur, et l'icône affichée sur l'écran de connexion.
Identifiants uniques
Chaque enregistrement dans Goupile dispose de deux identifiants uniques :
- L'identifiant ULID, il s'agit d'un identifiant interne généré aléatoirement.
- L'identifiant HID (pour Human ID), il doit être renseigné par votre script.
Par exemple ici, nous affectons la valeur du champ num_inclusion au HID. De cette manière, ce numéro d'inclusion sera visible comme identifiant dans le tableau de suivi.
Si on veut que l'ID sont un autre champ ceci est accessible via la variable meta.hid
form.number("num_inclusion", "Numero d'inclusion")
meta.hid = values.num_inclusion
Chaque enregistrement a aussi un numero auto-incremental sequence du formulaire une sequence interne auto-incrémentale.
Erreurs et contrôles
Gestion des erreurs
Min et max présent sur le widget form.number sont simplement des raccourcis pratiques.
Prenons l'exemple du widget de text : form.text("*num_inclusion", "N° d'inclusion")
Celui-ci est une chaine de caractère JavaScript. On peut donc appeler l'ensemble des méthodes présentes ici : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String
if (values.num_inclusion && !values.num_inclusion.match(/^[0-9]{5}$/))
form.error("num_inclusion", "Format incorrect (5 chiffres attendus)")
ou
if (values.inclusion_num && !values.inclusion_num.match(/^(REN|GRE|CFD|LRB|STE)[A-Z][a-z][A-Z]$/))
form.error("inclusion_num", html`Format incorrect.<br/> Renseigner le code centre (REN, GRE, CFD, LRB, STE) puis les 2 premières lettres du Nom puis la première lettre du Prénom.<br/>Exemple : Mr Philippe DURAND à Rennes : 'RENDuP'`)
Il faut juste toujous penser à vérifier que la chaine de caractères n'est pas vide (null).
Si on veut que l'erreur soit retardée à la validation de la page il faut rajouter true en troisième paramètres de form.error().
// Le true à la fin de form.error() indique que l'erreur est retardée (delayed) à la validation
if (values.num_inclusion && !values.num_inclusion.match(/^[0-9]{5}$/))
form.error("num_inclusion", "Format incorrect (5 chiffres attendus)", true)
Pour tester des expressions régulières en live : https://regex101.com/
Contrôles de cohérence
Rédaction en cours
Publication du projet
Une fois votre formulaire prêt, vous devez le publier pour le rendre accessible aux autres utilisateurs. Après publication, les utilisateurs pourront saisir des données sur ces formulaires.
Pour ce faire, cliquez sur le bouton Publier en haut à droite du panneau d'édition de code. Ceci affichera le panneau de publication (visible dans la capture à gauche).
Ce panneau récapitule les modifications apportées et les actions qu'engendrera la publication. Dans la capture à droite, on voit qu'une page a été modifiée localement (nommée « accueils ») et sera rendue publique après acceptation des modifications.