Crud : Création / édition d'une donnée

La création et la mise à jour des données de votre système est le coeur de votre système.

Dans la plupart des projets, les formulaires de création et d'édition sont identiques. Dans les projets plus complexes, la création peut se résumer au choix des données structurantes (par exemple un type de projet) qui vous donne après validation l'accès à un écran d'édition beaucoup plus riche.

Formulaire basique

Pour les données simples, le formulaire se résume à une liste de champs contenu dans un seul et unique bloc.

Vous avez la possibilité de renseigner :

• un texte d'aide pour chaque champ
• si le champ est optionnel ou obligatoire

Formulaire multi-étapes PLUS

Pour les formulaires plus complexes, notre plateforme dispose d'un mode multi-étapes avec plusieurs options :

• un écran d'entrée avec texte de présentation
• une barre de progression avec le numéro et le nom des étapes à suivre
• votre formulaire en plusieurs pages avec une validation des données saisies à chaque étape
• un écran de confirmation avant enregistrement
• un écran de sortie avec texte personnalisable

Ce fonctionnement est particulièrement adapté sur les interfaces client pour la prise de commande, les formulaires de récoltes d'information type SAV ou validation de compétences.

Écran de confirmation avant enregistrement

Règle de validation

L'un des grands avantages d'un logiciel est de pouvoir assurer la qualité des données saisies dans votre base. En effet, chaque donnée peut être validée et si besoin transformée avant chaque enregistrement.

Validation simple sur un champ

Pour chaque champ, vous pouvez définir un format. Ce type de validation sera fait directement sur le formulaire sans appel au serveur.

Vous pouvez par exemple valider :

• un champ email
• un format de téléphone
• un nombre de caractères minimal
• une liste de caractères autorisés
• une règle spécifique sur la base d'une expression régulière (exemple validation de mot de passe)

Validation dynamique

Pour certaines règles, la validation doit faire un appel à la base de donnée. C'est notamment le cas de règle d'unicité.

Par exemple, valider qu'un utilisateur ne peut pas avoir le même numéro de téléphone qu'un autre utilisateur déjà présent en base. Ou des règles métiers plus complexes comme la validation d'un nombre maximum de données d'un certain type dans un certain état.

Transformation

Dans certains cas, il est plus simple d'utiliser des transformations plutôt que d'imposer une validation.

Par exemple, il est plus judicieux de formater automatiquement les emails en minuscules plutôt que de demander à l'utilisateur de ne pas saisir de majuscule.

Les transformations peuvent également servir à créer des champs complémentaires lors de l'enregistrement. Par exemple, générer une url pour un article.

Accélérateur de saisie

Recherche d'entreprise par SIREN et nom

Ce mode de recherche se déclenche sur la saisie du nom ou du code SIREN.

Un menu déroulant apparait dans le cas où plusieurs possibilités sont disponibles.

Une fois le SIREN renseigné, les écrans de visualisation peuvent intégrer directement les liens vers Pappers et l'annuaire des entreprises.

Recherche par adresse, code postal et ville

Même principe que pour la recherche d'entreprise mais en se limitant la géolocalisation. Ce mode de recherche est utile pour la localisation de vos rendez-vous, de collaborateurs de votre équipe, de vos chantiers...

Gestion de l'affichage des champs

Système de grille

SmartPlatform utilise le framework Tailwind CSS qui nous permet de profiter sur son système de grille pour la disposition de nos blocs.

Grille pour les blocs

Les différents champs de votre formulaire avancé peuvent être scindés en plusieurs blocs.
Cette séparation permet de les regrouper par catégories (informations générales, coût, dates, options ...) afin d'améliorer la visibilité de l'écran.

Une fois la bonne répartition des champs et le nommage des blocs définis, nous pouvons les arranger de différentes manières selon l'ergonomie qui est la plus adaptée :

• Cas simple avec 2 à 3 blocs scindés en colonnes à la verticale pour optimiser l'espace et les garder en vue côte à côte.
• Autre variante de 2 à 3 blocs scindés sur plusieurs lignes à l'horizontale si ces derniers possèdent beaucoup de champ, et avoir un déroulement par phase.
• Pour les cas avancés avec plus de blocs, il est possible de combiner les affichages verticale et horizontale pour un rendu sur-mesure.

Utilitaire technique pour la disposition des blocs

• Outil pour faciliter la génération des classes CSS à renseigner dans les blocs

Option de rendu du bloc

• Les blocs des formulaires possèdent un titre visible par défaut, mais il peut être enlevé pour avoir un rendu plus compact.
• Si au contraire vous souhaitez mettre plus d'informations, vous pouvez mettre un sous-titre comme aide pour décrire par exemple comment renseigner au mieux les champs demandés.
• Enfin, si les informations pour détailler le processus de saisie du bloc sont plus conséquentes, nous vous conseillons d'utiliser l'option lien de documentation qui vous permet via un bouton de rediriger vos utilisateurs vers une page de documentation dédiée.

Grille pour les champs

Les champs à l'intérieur des blocs sont, eux aussi, soumis au système de grille.
Par défaut, un champ utilise l'entièreté de la ligne où il se trouve, mais il est facilement possible d'ajuster cela en spécifiant un nombre de colonnes.

Ainsi, vous pouvez obtenir des rendus allant de 2 à 12 champs sur la même ligne.

Titre, sous-titre et division

En plus de renseigner des champs de saisie à l'intérieur des blocs, nous disposons de composants supplémentaires pour structurer la hiérarchie de vos champs à l'intérieur d'un bloc, à savoir :

Le composant Titre

• Cela vous permet d'afficher un titre en amont d'un groupe de champs dans un bloc.
• Tout comme le bloc, ce dernier peut avoir un sous-titre pour donner plus de détail.
• Il est aussi possible de renseigner une couleur pour les mettre en avant

Avec une telle configuration, nous pouvons obtenir par un exemple un bloc Client contenant une séparation des champs regroupée par les titres Client principal et Client secondaire avec chacun leur champ de saisie (Prénom, Nom, Téléphone ...).

Le composant Division

• Celui-ci permet d'ajouter un trait de délimitation visuel entre vos groupes de champ.
• Nous le conseillons lorsque à l'intérieur d'un bloc dans lequel certaines données peuvent être recloisonné, par exemple :
• Un bloc Configuration d'email avec d'une part des champs SMTP et de l'autre des champs de type API.

Masquer / Afficher des champs

Si vous avez des entités plus complexes à gérer avec des champs de configuration complémentaires, SmartPlatform intègre un système d'options avancées disponible dans chaque bloc de votre formulaire.

L'utilisateur pourra afficher ces champs complémentaires seulement s'il en a besoin en cliquant sur le lien situé en bas du bloc :

Il est possible d'ajouter une validation sur ces champs comme pour les champs classiques :

Gestion des onglets

Pour les écrans avancés avec beaucoup d'éléments ou s'il y a plusieurs catégories de champ qui n'ont pas de sens d'être visibles au même endroit, nous pouvons scinder le formulaire en plusieurs onglets.

Par exemple, si un modèle de votre base possède plusieurs collections d'éléments ayant eux-mêmes plusieurs champs, il est judicieux de regrouper ces derniers avec leur propre onglet afin d'augmenter le focus de l'utilisateur lors de sa saisie.

Un autre usage des onglets est la possibilité de mettre des données de visualisation.
Par exemple, avoir directement suivi des paiements sur la fiche d'édition d'un prospect peut vous permettre d'ajuster son email en direct afin de lui renvoyer sa facture sur la bonne adresse.

En tête et pied de page

Comme toutes les pages de la plateforme, l'écran de formulaire dispose des encarts en tête et pied de page pour ajouter toutes les informations complémentaires pouvant faciliter la saisie de vos utilisateurs, par exemple :

• Indicateur de suivis en tête de page
• Documentation à porter de main en pied de page

Surcharge

Cette partie détail les comportements surchargeables des formulaires avancés.

Surcharge des blocs

Dans le cas où l'affichage standard de la grille des champs dans un bloc n'est pas pertinent, nous avons la possibilité de complétement surcharger le bloc afin d'y mettre un composant personnalisé qui répondra mieux à votre besoin.

Par exemple :

• Un utilitaire de planning horaire hebdomadaire pour des commerciaux
• Un calculateur avancé de chiffrage de travaux
• Un éditeur de text enrichi

Surcharge des champs

Notre plateforme apporte son lot de composants de saisie déjà prêts à l'emploi, mais il est tout à fait possible d'en rajouter de nouveau pour votre projet.

Notre approche sur-mesure s'étend jusqu'à la brique unitaire du simple champ de saisie, nous permettant d'avoir une expérience utilisateur adaptée à vos besoins.

Ce niveau de détail implique aussi toutes les règles de validation qui peuvent graviter autour de vos nouveaux composants.

Cela permet ainsi de capitaliser sur nos échanges, nous permettant ainsi de réutiliser ces briques sur d'autres interfaces dans le même projet.

Champs de formulaire disponibles

Sélection de choix

Pour vous aider à construire des formulaires ergonomiques et simples à comprendre, nous avons travaillé notre composant select avec de multiples options d'affichage.

Liste de choix avec regroupement

Pour les listes de choix plus réduites, vous avez la possibilité d'utiliser des switch, checkbox et radio.

Sélecteur de date

Visualisation de la semaine

Sélection de l'heure

Plage de date Pour faciliter l'usage des filtres par plage de date, nous avons ajouté la possibilité de configurer des raccourcis : cette semaine, ce mois, le mois dernier, cette année...