Paramètres
Le premier point d'entrée avec la librairie est le hook useLunatic(source, data, options)
qui prend 3 arguments :
- Un objet source correspondant à un modèle lunatic. Voir le type
- Un objet contenant les données du formulaire (s'il a été prérempli par exemple) Voir le type
- Un objet d'option pour définir des comportements spécifique Voir le type
Options Voir le type
Toutes les options sont optionnelles.
- features, active le support du VTL et du Markdown (défaut
['VTL', 'MD']
). preferences (défaut['COLLECTED']
), non utilisé- savingType, définit dans quelle clef sauvegarder les données (défaut
'COLLECTED'
) - onChange, méthode appelée lorsqu'une variable change suite à une action utilisateur (doit être mémoïsé car utilisé en dépendance d'un useCallback en interne). (optionnel
(response: {name: string}, value: any, args?: {iteration?: number}) => {}
) - management, active le mode management (défaut
false
) - shortcut, active les racourcis clavier pour les cases à cocher / radio et boutons ne sait pas / refus (défaut
false
) - initialPage, définit la page de démarrage (défaut
'1'
) - lastReachedPage, définit la dernière page atteinte (défaut
undefined
) - autoSuggesterLoading, active le préchargement des données du suggester à l'initialisation de Lunatic (défaut
false
). - getReferentiel promesse appelée pour récupérer les nomenclatures necessaire au fonctionnement des suggesters (
(name: string) => Promise<Array<unknown>>
) - activeControls active les controles (default
false
) - withOverview, active le système de vue d'ensemble (défaut
false
) - missing, active le système de missing (Ne sait pas / Refus) (défault
false
) - missingStrategy fonction exécutée au clique sur un button missing (défaut
emptyFn
) - missingShortcut raccourcis clavier déclanchant les boutons missing (défaut
{ dontKnow: '', refused: '' }
) - dontKnowButton label du bouton "Ne sait pas" (défaut
{ fr: 'Ne sais pas', en: "Don't know" }
) - refusedButton label du bouton "Refus" (défaut
{ fr: 'Refus', en: 'Refused' }
) - trackChanges, active le suivi des changements (défaut
false
),
Vue d'ensemble
- withOverview, active le système de vue d'ensemble (défaut
false
)
Utilisation
Pour activer le système de vue d'ensemble, définissez withOverview
sur true
lors de l'appel à useLunatic
:
const {
overview
} = useLunatic(source, data, {withOverview: true})
Structure des données de vue d'ensemble
Lorsque l'option withOverview
est activée, le retour de useLunatic
inclura une propriété overview
, qui est un tableau d'objets de type InterpretedLunaticOverviewItem
. L'overview est constitué de l'ensemble des séquences du questionnaire, chaque sequence peut contenir des sous séquence qui seront disponible dans children
.
Chaque élément de la vue d'ensemble a la structure suivante :
id
: Identifiant unique de l'élément.type
: Type de l'élément.page
: Tag de la page où se trouve l'élément.label
: Libellé de l'élément, rendu avec React.description
: Description de l'élément, rendue avec React.reached
: Indique si l'élément a été atteint.current
: Indique si nous sommes actuellement dans cet élément ou dans un de ses enfants.children
: Tableau des sous-éléments de l'élément.
La propriété children
contient les sous-séquences de la séquence principale.
Suivi des changements
- trackChanges, active le suivi des changements (défaut
false
),
Afin de simplifier le suivi des changements @inseefr/lunatic
offre un système intégré permettant d'obtenir les variables modifiées entre 2 étapes. Cela permet par exemple de mettre en place une synchronisation partielle des données au fil du remplissage du formulaire (plutôt que d'attendre la finalisation du formulaire).
Pour activer ce mode de suivi, passez l'option trackChanges
à true
. Le hook useLunatic()
renverra alors 2 méthodes supplémentaires permettant de contrôler le suivi des changements.
const {
getChangedData,
resetChangedData,
} = useLunatic(source, data, {trackChanges: true})
getChangedData(reset: boolean = false)
, récupère les données qui ont changé depuis le dernier reset. Le format de retour est le même quegetData()
.resetChangedData()
, vide le dictionnaire des variables changée
Mode "Ne sais pas" / "Refus"
- missing (défaut
false
)
Ce mode permet à l'utilisateur d'indiquer qu'il ne connait pas la réponse à une question ou qu'il souhaite ne pas y répondre. Des options supplémentaires permettent de définir le comportement des boutons.
- missingStrategy fonction exécutée au clique sur un button missing (défaut
emptyFn
) - missingShortcut raccourcis clavier déclanchant les boutons missing (défaut
{ dontKnow: '', refused: '' }
) - dontKnowButton label du bouton "Ne sait pas" (défaut
{ fr: 'Ne sais pas', en: "Don't know" }
) - refusedButton label du bouton "Refus" (défaut
{ fr: 'Refus', en: 'Refused' }
)
Pour chaque champ une clef missingResponse
doit enregistrer le choix fait par l'utilisateur.
{
"missingResponse": { "name": "READY_MISSING" }
}
La valeur de cette réponse sera RF
en cas de refus, DK
en cas de "Je ne sais pas".
Mode "management"
- management, active le mode management (défaut
false
)
Ce mode permet de gérer plusieurs états de la même variable (utilisé par les positions de récupération). L'administrateur pourra osciller entre le mode COLLECTED
, EDITED
, INPUTTED
...
Ce mode n'est pas encore implémenté, l'option management
n'a pas donc pas d'effet pour le moment.