Comment JSON Forms facilite nos processus de formulaires

Dans cet article, je vais vous montrer comment et pourquoi nous avons utilisé JSON Forms pour créer une plateforme de gestion de formulaires et rapports médicaux qui soit aussi robuste que fiable.

JSON Forms

Dans le cadre du projet MedAI, nous avions besoin de trouver une solution flexible et efficace pour gérer la création et la manipulation de formulaires dynamiques. Après avoir échangé sur nos expériences passées en interne, nous avons décidé de choisir JSON Forms, à priori candidat parfait pour nos besoins.

Nos besoins spécifiques

Dans MedAI, les formulaires ainsi que les rapports médicaux qui en découlent représentent la pièce principale de la plateforme. Plusieurs groupes d’utilisateur·trice·s sont impliqués à différentes étapes du processus:

• Administrateur·trice·s: vont créer les formulaires directement sur la plateforme en ajoutant des étapes, des champs et autres informations. Le but étant de remplacer et de migrer les formulaires Microsoft Word utilisés jusque-là.
• Gestionnaires: Au moment de la création d’un rapport médical, le ou la gestionnaire va pouvoir modifier de manière restreinte le formulaire pour y ajouter des questions ou enlever des informations inutiles.
• Médecins et personnel soignant: vont remplir un rapport médical avec les informations du bénéficiaire. Ils et elles vont devoir remplir les champs pré-définis par les administrateur·trice·s et les gestionnaires.

Une fois le rapport médical dûment rempli et soumis, une version PDF de ce dernier sera générée et transmise à la GED (Gestion électronique des documents). Cette GED est de la responsabilité du GILAI, structure en charge de l'informatique des Offices de l'assurance-invalidité (AI) du canton de Vaud et de 19 autres cantons.

Étant donné cet environnement multi-usages et multi-rôles, nous avions besoin d'un outil permettant une gestion entièrement dynamique des formulaires, de leur création à leur rendu final sous forme de rapport PDF. Une bonne occasion de mettre la bibliothèque open-source JSON Forms à l’épreuve.

Comment fonctionne JSON Forms?

Pour définir un formulaire, JSON Forms se base sur plusieurs informations et configuration. Nous allons passer ensemble au travers de ces différents éléments pour vous montrer l’établissement d’un formulaire.

Le schéma des données (Schema)

JSON Forms repose sur JSON Schema, qui définit la structure et la validation des données des formulaires. Il spécifie les types de champs (texte, nombre, date, etc.), leurs contraintes (valeurs obligatoires, plages autorisées, formats, etc.) et la structure globale du formulaire.

const schema: JsonSchema = {
  properties: {
    username: { type: 'string' },
    password: { type: 'string' },
  },
  required: ['username', 'password'],
};

Le schéma d’interface utilisateur (UI Schema)

Le UI Schema permet de personnaliser l'affichage du formulaire sans toucher à la structure des données. Il définit la disposition des champs, leur regroupement et leur ordre d'affichage.

const uiSchema: VerticalLayout = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: t('views.admin.auth.form.username'),
      scope: '#/properties/username',
      options: { props: { autofocus: true } },
    },
    {
      type: 'Control',
      label: t('views.admin.auth.form.password'),
      scope: '#/properties/password',
      options: { format: 'password' },
    },
  ],
};

Les données (Data)

Les informations renseignées par les personnes remplissant le formulaire sont stockées sous format JSON et suivent la structure définie par le schéma.

{"username": "bryan", "password": "secret"}

Les composants de rendu (Renderer)

Ils permettent de définir quel composant va être utilisé par rapport à ce qui est défini dans le schéma de données ainsi que dans le schéma d’interface utilisateur.

export const renderers: JsonFormsRendererRegistryEntry[] = [
  { renderer: markRaw(TextFieldControl), tester: textFieldControlTester },
  { renderer: markRaw(PasswordFieldControl), tester: passwordFieldControlTester },
  { renderer: markRaw(VerticalLayout), tester: verticalLayoutTester },
];

Dans le cadre de MedAI, on définit des renderers différents pour:

• le formulaire affiché en mode “admin”
• le rapport médical affiché pour le médecin en mode “formulaire”
• le rapport médical affiché lors de la génération du PDF en mode “PDF”.

Rendu automatique

En combinant les différents éléments présentés ci-dessus, nous allons pouvoir afficher un formulaire avec le rendu souhaité en termes d’affichage des étapes, sections et champs. La validation lors de la soumission du formulaire est également prise en compte.

<JsonForms
  ref="jsonformsEl"
  :i18n="jsonFormsI18n"
  :data="modelValue"
  :schema="schema"
  :renderers="renderers"
  :uischema="uiSchema"
  :ajv="ajv"
  validation-mode="ValidateAndShow"
  :additional-errors="combinedErrors"
  @change="onChange"
/>

Et visuellement, ça donne quoi ?

Page de modification d’un formulaire

Les administrateur·trice·s et gestionnaires peuvent modifier le formulaire en y ajoutant des étapes sur la gauche puis, des sections et des champs sur chaque étape. Avec la possibilité de rajouter différentes informations sur ces champs: label, description, infobulle, texte d’aide, etc.

Les utilisateur·trice·s peuvent également déplacer les étapes, les sections ainsi que les champs. Le formulaire est affiché d’une manière bien spécifique. Les champs eux-mêmes ne sont pas remplissables, ils sont juste affichés afin de simuler ce à quoi un rapport médical va ressembler.

Pendant cette étape, les opérations des utilisateurs vont principalement modifier deux parties:

• le schéma de données (Schema)
• le schéma d’interface utilisateur (UI Schema)

Pour l’affichage, nous utilisons des renderers spécifiques.

Page d’un rapport médical

La page d’un rapport médical permet d’afficher le rapport médical créé, établie à partir du formulaire défini par les administrateur·trice·s et gestionnaires. Ici, les médecins et le personnel soignant vont pouvoir remplir les informations utilisateurs facilement, étape par étape. Une fois toutes les informations renseignées, l’utilisateur·trice pourra soumettre ce formulaire. Dans cette étape, ne seront modifiées que les données liées au formulaire et non les schémas. Dans le cadre de cet exemple de formulaire, nous allons l’afficher en nous aidant des renderers normaux, qui sont également ceux utilisés pour les autres formulaires de la plateforme.

Génération de PDF

Le PDF est généré en intégrant toutes les données remplies par les administrateur·trice·s, gestionnaires et médecins afin d’avoir un document regroupant toutes les informations requises.

Ici, nous allons utiliser des renderers spécifiques afin d’avoir un affichage simplifié enlevant toute fioriture et éléments inutiles. La génération PDF étant faite avec Weasyprint, les composants ont dû être implémentés de manière un peu différente afin de gérer les contraintes liées au style CSS.

Autres formulaires

Sur la plateforme, nous avons bien d’autres formulaires qui gravitent autour des rapports médicaux. Pour la réalisation et la gestion de ces derniers, nous utilisons également JSON Forms qui est assez modulable pour fonctionner avec divers types de formulaires.

Nous sommes pleinement satisfaits de notre choix d’utiliser JSON Forms. Une fois les concepts fondamentaux assimilés et les premières fonctionnalités mises en place, la création et l’adaptation des formulaires se sont révélées fluides et efficaces. JSON Forms constitue une option particulièrement pertinente lorsque l’application doit gérer un grand nombre de formulaires de complexité variable. Son approche modulaire et dynamique en fait un atout considérable pour des cas d’usage nécessitant une gestion avancée des formulaires.