Liste déroulante

Une liste déroulante dans un formulaire adaptatif permet aux utilisateurs et aux utilisatrices de sélectionner une ou plusieurs options dans une liste d’options prédéfinies. Les options peuvent être de type Chaîne, Nombre ou Booléen. De plus, le composant « Liste déroulante » peut être configuré pour avoir différentes valeurs de validation et valeurs par défaut.

Exemple

Utilisation

Il existe plusieurs raisons d’inclure une liste déroulante dans un formulaire adaptatif, notamment :

• Longue liste d’options : les listes déroulantes sont utiles dans les cas où une longue liste d’options est disponible pour un champ. Elles occupent moins d’espace sur le formulaire que les listes de boutons radio ou de cases à cocher et sont moins envahissantes pour les utilisateurs et les utilisatrices.

• Cohérence : les listes déroulantes offrent une cohérence dans la conception et la disposition du formulaire, ce qui rend la navigation plus intuitive et plus facile pour les utilisateurs et les utilisatrices.

• Clarté : les listes déroulantes peuvent rendre le formulaire plus clair et plus facile à comprendre en fournissant une liste claire et concise d’options.

• Expérience utilisateur : les listes déroulantes peuvent être utilisées pour rendre le formulaire plus convivial en offrant une méthode claire et intuitive de sélection des options.

• Analyse des données : les listes déroulantes peuvent être utilisées pour collecter des données provenant de diverses sources et les analyser ou les utiliser comme entrées pour un traitement ultérieur.

Boîte de dialogue Propriétés

Dans cet exemple, l’élément Options est utilisé pour définir les éléments de liste. L’élément Texte d’affichage sert à fournir un libellé aux éléments de liste et Valeur des données sert à spécifier la valeur envoyée au serveur lors de l’envoi du formulaire.

Chaque option de liste déroulante possède une valeur de données unique et un attribut Texte d’affichage. Si un utilisateur ou une utilisatrice sélectionne l’option « Rouge », la valeur de données correspondante est envoyée au serveur lors de l’envoi du formulaire. Ces données peuvent ensuite être traitées par un script côté serveur afin de déterminer quelles options ont été sélectionnées par l’utilisateur ou l’utilisatrice. Elles peuvent également être utilisées pour effectuer diverses actions, comme mettre à jour d’autres champs du formulaire ou envoyer les données du formulaire à un script côté serveur en vue d’un traitement ultérieur.

De plus, la liste déroulante peut être configurée pour avoir des valeurs de traitement différentes pour chaque option. Cela peut être défini à l’aide de l’éditeur de règles des formulaires adaptatifs.

Version et compatibilité

Le composant principal Accordéon des formulaires adaptatifs a été publié en février 2023 au sein des composants principaux 2.0.4 pour Cloud Service et des composants principaux 1.1.12 pour AEM 6.5.16.0 Forms ou version ultérieure. Vous trouverez ci-dessous un tableau détaillant les versions prises en charge, la compatibilité avec AEM et les liens vers la documentation correspondante :

Pour plus d’informations sur les versions et publications des composants principaux, consultez le document Versions des composants principaux.

Détails techniques

Retrouvez les informations les plus récentes sur le composant principal « Liste déroulante » des formulaires adaptatifs dans la documentation technique sur GitHub. Pour plus d’informations sur le développement des composants principaux, consultez la Documentation destinée aux développeurs et développeuses de composants principaux.

Boîte de dialogue de configuration

Vous pouvez facilement personnaliser l’expérience des visiteurs et des visiteuses en matière de liste déroulante en utilisant la boîte de dialogue Configurer. Vous pouvez également définir facilement des options de liste déroulante pour une expérience utilisateur fluide.

• Nom - Vous pouvez identifier facilement un composant de formulaire avec son nom unique à la fois dans le formulaire et dans l’éditeur de règles, mais le nom ne doit pas contenir d’espaces ni de caractères spéciaux.

• Titre - Avec son titre, vous pouvez facilement identifier un composant dans un formulaire. Par défaut, le titre s’affiche au-dessus du composant. Si vous n’ajoutez pas de titre, le nom du composant s’affiche à la place du texte du titre.

• Masquer le titre - Sélectionnez cette option pour masquer le titre du composant.

• Autoriser la sélection multiple - Sélectionnez cette option pour sélectionner plusieurs options dans une liste déroulante.

• Enregistrer la valeur sous - Cette option spécifie le type de données de la valeur envoyée lorsqu’une option est sélectionnée. Si Enregistrer la valeur sous est défini sur Number et que vous ajoutez des données de chaîne à Valeur des données dans l’onglet Options, l’écran affiche un message d’erreur Value type mismatch.

  Dans l’onglet Options, vous pouvez ajouter des valeurs de données et afficher des paires de texte à l’aide du bouton Ajouter. Une fois qu’une nouvelle option est ajoutée, les actions suivantes sont effectuées :

  • Valeur des données - Cette option permet de saisir le contenu à envoyer lorsqu’une option est sélectionnée.
  • Texte d’affichage - Cette option permet de saisir le contenu à afficher dans un formulaire adaptatif.
  • Supprimer - Appuyez ou cliquez sur supprimer pour supprimer l’option d’un menu déroulant.
  • Réorganiser - Appuyez ou faites glisser pour réorganiser l’ordre de l’option d’un menu déroulant.

• Options par défaut - Cette option vous permet d’ajouter des valeurs par défaut. Utilisez l’icône Supprimer pour supprimer l’option ajoutée. Si Enregistrer la valeur sous est défini sur Number et que vous ajoutez des données de chaîne à Options par défaut, l’écran affiche un message d’erreur Value type mismatch.

• Texte d’espace réservé - Le texte d’espace réservé dans un composant de formulaire fait référence à un libellé court ou à une invite qui apparaît dans un champ de saisie comme conseil à l’utilisateur ou à l’utilisatrice sur le type d’information à saisir dans ce champ. Le texte d’espace réservé disparaît lorsque l’utilisateur ou l’utilisatrice commence à saisir du texte dans le champ et réapparaît si le champ est vide. Il fournit un indice visuel à l’utilisateur ou à l’utilisatrice, mais n’agit pas comme une valeur ou un libellé permanent pour le champ.

• Référence Bind - Une référence Bind est une référence à un élément de données stockée dans une source de données externe et utilisée dans un formulaire. La référence de liaison vous permet de lier dynamiquement les données aux champs du formulaire, de sorte que le formulaire puisse afficher les données les plus récentes de la source de données. Par exemple, une référence de liaison peut être utilisée pour afficher le nom et l’adresse d’un client ou d’une cliente dans un formulaire, en fonction de l’identifiant du client ou de la cliente saisi dans le formulaire. La référence de liaison peut également être utilisée pour mettre à jour la source de données avec les données saisies dans le formulaire. Ainsi, AEM Forms vous permet de créer des formulaires qui interagissent avec des sources de données externes, offrant ainsi une expérience utilisateur fluide pour la collecte et la gestion des données.

• Masquer le composant - Sélectionnez cette option pour masquer le composant du formulaire. Le composant reste accessible à d’autres fins, par exemple pour les calculs dans l’éditeur de règles. Cela s’avère utile lorsque vous devez stocker des informations qui n’ont pas besoin d’être affichées ou directement modifiées par les utilisateurs ou les utilisatrices.

• Désactiver le composant - Sélectionnez cette option pour désactiver le composant. Le composant désactivé n’est pas actif ni modifiable par l’utilisateur final ou l’utilisatrice finale. L’utilisateur ou l’utilisatrice peut voir la valeur du champ mais ne peut pas la modifier. Le composant reste accessible à d’autres fins, par exemple pour les calculs dans l’éditeur de règles.

• Lecture seule - Sélectionnez cette option pour rendre le composant non modifiable. L’utilisateur ou l’utilisatrice peut voir la valeur du champ mais ne peut pas la modifier. Le composant reste accessible à d’autres fins, par exemple pour les calculs dans l’éditeur de règles.

Onglet Validation

• Obligatoire : Sélectionnez cette option si vous souhaitez afficher le composant dans un formulaire adaptatif. Vous ne pouvez pas sélectionner Masquer le composant ou Désactiver le composant dans l’onglet De base lorsque cette option est sélectionnée.

• Message d’erreur : Cette option vous permet de saisir un message qui s’affiche si la case à cocher Obligatoire est cochée et que le champ de formulaire reste vide.

• Message de validation de script : cette option permet de saisir un message à afficher en cas d’échec de la validation du script.

Onglet Contenu de l’aide

• Description courte : Une description courte est une brève explication textuelle qui fournit des informations supplémentaires ou une clarification sur l’objectif d’un champ de formulaire spécifique. Il permet à l’utilisateur ou l’utilisatrice de comprendre le type de données à saisir dans le champ et peut fournir des conseils ou des exemples pour s’assurer que les informations saisies sont valides et répondent aux critères souhaités. Par défaut, les descriptions courtes restent masquées. Activez l’option Toujours afficher une description courte pour l’afficher sous le composant.

• Toujours afficher une description courte - Activez cette option pour afficher la description courte sous le composant.

• Texte d’aide - Le texte d’aide fait référence à des informations ou des conseils supplémentaires fournis à l’utilisateur ou à l’utilisatrice pour l’aider à remplir correctement un champ de formulaire. Il s’affiche lorsque l’utilisateur ou l’utilisatrice clique sur l’icône d’aide (i) placée à côté du composant. Le texte d’aide fournit des informations plus détaillées que le texte du libellé ou de l’espace réservé d’un champ de formulaire. Il est conçu pour aider l’utilisateur ou l’utilisatrice à comprendre les exigences ou les contraintes du champ. Il peut également proposer des suggestions ou des exemples pour faciliter le remplissage du formulaire et le rendre plus précis.

Onglet Accessibilité

Texte pour les lecteurs d’écran - Le texte destiné aux lecteurs d’écran fait référence à un texte supplémentaire spécialement conçu pour être lu par les technologies d’assistance, comme les lecteurs d’écran, utilisées par les personnes malvoyantes. Ce texte fournit une description audio de l’objectif du champ de formulaire et peut inclure des informations sur le titre, la description, le nom du champ et tout message pertinent (texte personnalisé). Le texte du lecteur d’écran permet de s’assurer que le formulaire est accessible à tous les utilisateurs et utilisatrices, y compris celles et ceux ayant une déficience visuelle, et leur permet de bien comprendre le champ du formulaire et ses exigences.

Boîte de dialogue de conception

La boîte de dialogue de conception permet de définir et de gérer les styles CSS pour le composant « Liste déroulante ».

Onglet Styles

Cet onglet vous permet de définir et de gérer les styles CSS d’un composant. Le composant principal « Liste déroulante » des formulaires adaptatifs prend en charge le Système de style d’AEM.

• Classes CSS par défaut : vous pouvez fournir une classe CSS par défaut pour le composant principal « Liste déroulante » des formulaires adaptatifs.

• Styles autorisés : vous pouvez définir des styles en fournissant un nom et la classe CSS qui représente le style. Par exemple, vous pouvez créer un style nommé « texte en gras » et fournir la classe CSS « police d’épaisseur : gras ». Vous pouvez utiliser ou appliquer ces styles à un formulaire adaptatif dans l’éditeur de formulaires adaptatifs. Pour appliquer un style, sélectionnez le composant auquel vous souhaitez appliquer le style dans l’éditeur de formulaires adaptatifs, accédez à la boîte de dialogue Propriétés, puis sélectionnez le style de votre choix dans la liste déroulante Styles. Si vous devez mettre à jour ou modifier les styles, revenez simplement à la boîte de dialogue Conception, mettez à jour les styles dans l’onglet Styles et enregistrez les modifications.

Article connexe

• Création d’un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience

• Création d’un formulaire adaptatif autonome

Voir également

• Accordéon
• Bouton
• Case à cocher Groupe
• Sélecteur de date
• Entrée d’e-mail
• Conteneur de formulaires
• Pièce jointe
• Pied de page
• En-tête
• Onglets horizontaux
• Image
• Entrée de nombre
• Conteneur de panneau
• Bouton radio
• Bouton de réinitialisation
• Bouton Envoyer
• Entrée téléphonique
• Entrée de texte
• Texte
• Titre
• Assistant

Ressources Business.Adobe.com