Contenu de l'article

Générer automatiquement des formulaires de saisie des données à partir de leur schéma

Pour pouvoir partager et valoriser ses données efficacement, il est crucial de bien les modéliser et de les contractualiser. Cela peut être réalisé avec un schéma de données. Dans le cas de données au format JSON (très utilisé pour les échanges par API), il est possible d'utiliser JSON Schema.

En plus des échanges par API et de la validation des données, la modélisation des données permet d'aider à la définition des composants et interfaces de saisie. Ces sujets étant majeurs chez Koumoul, nous avons développé une librairie pour les frameworks VueJS et VuetifyJS qui permet de générer un formulaire de saisie à partir d'un fichier au format JSON Schema. Cela permet un gain de temps considérable dans nos projets, car nous n'avons plus à nous concentrer sur l'interface de saisie de données, ce qui nous permet de garder plus d'énergie pour pouvoir les modéliser de manière optimale.

La librairie que nous avons développée s'appelle Vuetify JSON Schema Form, ou pour faire plus court VJSF. Elle est publiée en open source sur Github et dispose d'une documentation complète (en anglais). Pour générer les formulaires, la librairie se base sur les types et les formats de données, et il est possible d'utiliser des attributs additionnels (x-...) pour aller encore plus loin !

Une fois les prérequis installés, la construction du formulaire de saisie peut se faire très rapidement, comme nous pouvons le voir sur l'animation ci-dessous.


VJSF permet de réaliser des formulaires de saisie pour des données complexes. Les formulaires peuvent être segmentés en onglets ou en accordéon, il est possible de proposer des choix multiples à partir de sources de données externes (API), ou de déclencher des saisies conditionnelles. La librairie permet de faire encore bien d'autres choses, qui sont présentées dans une documentation proposant des exemples de code.

VJSF est une librairie encore relativement jeune, mais commence a être utilisée dans de nombreux projets. Elle est améliorée continuellement par nos soins, ainsi que de nombreuses contributions externes. Si jamais vous souhaitez l'utiliser mais qu'il manque une fonctionnalité, n'hésitez pas à formuler une demande sur le dépôt Github au travers d'un ticket !

Cas d'usage

La librairie VJSF offre une solution polyvalente pour une variété de cas d'utilisation, et facilite la configuration d'applications et de portails de manière efficace.

  • Dans le contexte de la configuration d'applications, VJSF permet une modélisation simplifiée des données, en générant des formulaires dynamiques basés sur des schémas JSON.
  • Lorsqu'il s'agit de configurer des portails, grâce à la segmentation en onglets ou en accordéon, l'expérience utilisateur devient intuitive pour les paramétrages complexes. Cette flexibilité est précieuse pour les portails nécessitant une personnalisation étendue.
  • En ce qui concerne la saisie de données dans des jeux éditables, VJSF offre une approche simplifiée grâce à des formulaires interactifs. Les fonctionnalités telles que les saisies conditionnelles offrent une expérience utilisateur riche.
  • Enfin, la saisie dans les pages de contenu est simplifiée grâce à des formulaires adaptés aux besoins spécifiques de chaque page.