Corfix Form Builder : utilisation du composant « Date et heure ».

1. Onglet « Affichage »

L'onglet « Affichage » permet de contrôler l'apparence générale du composant Date/Heure.

• Libellé :

  • Il s'agit du titre visible de votre champ date/heure que les utilisateurs verront. Ce champ est obligatoire.

  • Exemple : « Date de l’incident », « Heure de début », « Date et heure d’achèvement ».

• Position de l'étiquette :

  • Détermine l'emplacement de l'étiquette par rapport au champ de saisie (par exemple : en haut, à gauche, à droite, en bas).

  • Par défaut : en haut.

• Autoriser la saisie manuelle :

  • Si cette option est cochée, les utilisateurs peuvent saisir directement la date et l'heure dans le champ, en plus d'utiliser le calendrier ou le sélecteur d'heure.

• Texte d'aide :

  • Texte qui apparaît dans le champ de saisie avant que l'utilisateur ne saisisse quoi que ce soit. Il s'agit d'une indication destinée à l'utilisateur concernant le format attendu.

  • Exemple : « MM/JJ/AAAA HH:MM AM/PM ».

• Description :

  • Fournit un texte explicatif supplémentaire concernant le champ, généralement affiché sous la zone de saisie.

  • Exemple : « Saisissez la date et l'heure exactes auxquelles l'événement s'est produit. »

• Info-bulle :

  • Texte qui s'affiche lorsque l'utilisateur passe la souris sur le champ. Utile pour fournir une aide rapide ou du contexte.

• Classe CSS personnalisée :

  • Permet aux utilisateurs avancés d’appliquer une mise en forme personnalisée au composant à l’aide de classes CSS.

• Masquer le libellé :

  • Si cette option est cochée, le libellé du composant ne s’affichera pas.

• Édition modale :

  • (Les détails ne sont pas entièrement visibles sur la capture d'écran, mais cela concerne généralement la modification dans une fenêtre modale contextuelle).

• Inclure dans les rapports :

  • Si cette case est cochée, les données de ce champ seront incluses dans les rapports.

2. Onglet « Date »

Cet onglet contient des paramètres spécifiques liés à la saisie de la date.

• Activer la saisie de la date :

  • Si cette case est cochée, la fonctionnalité de sélection de date (calendrier) sera disponible.

• Désactiver les week-ends :

  • Si cette option est cochée, les utilisateurs ne pourront pas sélectionner le samedi ou le dimanche dans le calendrier.

• Désactiver les jours de la semaine :

  • Si cette option est cochée, les utilisateurs ne pourront pas sélectionner les jours du lundi au vendredi dans le calendrier.

3. Onglet « Heure »

Cet onglet contient des paramètres spécifiques relatifs à la saisie de l'heure.

• Activer la saisie de l'heure :

  • Si cette option est cochée, la fonctionnalité de sélection de l'heure (sélecteur d'heure) sera disponible.

• Incrément horaire :

  • Détermine l'incrément pour la sélection des heures (par exemple, « 1 » pour des incréments d'une heure, « 2 » pour des incréments de deux heures).

  • Valeur par défaut : 1.

• Incrément en minutes :

  • Détermine l'incrément pour la sélection des minutes (par exemple, « 1 » pour une sélection à la minute près, « 15 » pour des incréments d'un quart d'heure).

  • Valeur par défaut : 1.

• Format 12 heures (AM/PM) :

  • Si cette case est cochée, le sélecteur d'heure utilisera un format de 12 heures avec les sélecteurs AM/PM. Si elle n'est pas cochée, il utilisera un format de 24 heures.

4. Onglet « Données »

L'onglet « Données » permet de gérer les propriétés des données sous-jacentes du champ date/heure.

• Valeurs multiples :

  • Si cette case est cochée, l’utilisateur peut saisir plusieurs valeurs de date/heure pour ce champ.

• Valeur par défaut :

  • Date et heure préremplies qui s’affichent dans le champ de saisie lors du chargement du formulaire. Les utilisateurs peuvent remplacer cette valeur. Il s’agit d’une valeur statique.

• Date par défaut :

  • Permet de définir une date par défaut dynamique, souvent à l’aide d’une fonction telle que moment() pour définir la date et l'heure actuelles.

5. Onglet « Validation »

L'onglet « Validation » définit les règles visant à garantir que la date et l'heure saisies par l'utilisateur répondent à des exigences spécifiques.

• Obligatoire :

  • Si cette case est cochée, l’utilisateur doit saisir une date et une heure dans ce champ avant de valider le formulaire.

• Utiliser le calendrier pour définir la date minimale :

  • Vous permet de sélectionner une date minimale dans un calendrier, empêchant ainsi les utilisateurs de choisir des dates antérieures à celle-ci.

• Utiliser le calendrier pour définir la date maximale (maxDate) :

  • Vous permet de sélectionner une date maximale à l'aide d'un calendrier, ce qui empêche les utilisateurs de choisir des dates postérieures à celle-ci.

6. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand ce composant Date/Heure doit être affiché ou masqué en fonction des valeurs d'autres composants du formulaire.

• Simple :

  • Il s’agit généralement d’un bouton bascule ou d’un menu déroulant permettant de choisir entre une logique conditionnelle simple et une logique conditionnelle avancée.

• Ce composant doit s'afficher :

  • Choisissez si le composant doit être « Affiché » ou « Masqué » (options implicites) en fonction de la condition.

• Lorsque le composant du formulaire :

  • Sélectionnez un autre composant de votre formulaire dont la valeur déclenchera la condition.

• A la valeur :

  • Précisez la valeur exacte que doit avoir le composant de formulaire sélectionné pour que la condition soit remplie.

  Exemple : vous pouvez configurer une règle pour que le champ « Date de retour » ne s’affiche que lorsque la case « S’agit-il d’un aller-retour ? » est cochée.

Panneau d’aperçu

Le panneau d’aperçu situé à droite de la boîte de dialogue vous montre comment le champ de saisie « Date / Heure » s’affichera visuellement sur votre formulaire. Il comprend généralement un champ de saisie de texte et une icône de calendrier, vous donnant ainsi une idée en temps réel de l’interaction de l’utilisateur.

Actions situées au bas de la boîte de dialogue :

• Enregistrer : enregistre toutes les modifications apportées aux paramètres du composant Date/Heure.

• Annuler : annule toutes les modifications non enregistrées et ferme la boîte de dialogue.

• Supprimer : supprime le composant « Date / Heure » du formulaire.

Bonnes pratiques pour le composant « Date / Heure » :

• Soyez précis dans le libellé : indiquez clairement quelle date/heure est requise (par exemple, « Date d’inspection », « Heure de début »).

• Activez les champs de saisie de date et d’heure de manière appropriée : n’activez les champs « Saisie de la date » ou « Saisie de l’heure » que si les deux sont réellement nécessaires. Si seule la date est requise, désactivez le champ d’heure, et inversement.

• Définissez des dates minimales et maximales pour le contrôle : utilisez minDate et maxDate dans « Validation » pour empêcher les saisies illogiques (par exemple, des dates futures pour des événements passés, ou des dates hors de la période du projet).

• Envisagez une date par défaut : pour les événements en cours, définissez la « Date par défaut » sur moment() pour que la date et l’heure du jour s’affichent automatiquement, ce qui fait gagner du temps aux utilisateurs.

• Utilisez l’affichage conditionnel : masquez les champs de date et d’heure jusqu’à ce qu’ils soient pertinents, ce qui simplifie le formulaire (par exemple, n’affichez la « Date de fin » qu’une fois la « Date de début » saisie).