Composant Image image-adaptive-forms-core-component
Un composant « Image » dans un formulaire adaptatif permet d’inclure des images dans un formulaire. Ces images peuvent être utilisées pour améliorer la conception globale du formulaire, fournir des informations supplémentaires ou servir d’aide visuelle pour aider les utilisateurs et les utilisatrices à comprendre l’objectif du formulaire. Le composant « Image » peut être utilisé pour ajouter un logo, une photo ou un graphique dans le formulaire.
Pour l’accessibilité, il est important de spécifier le Texte secondaire de l’image afin de fournir un texte de remplacement court et descriptif qui décrit l’image aux utilisateurs et utilisatrices qui ne peuvent pas la voir.
Exemple
Utilisation reasons-to-use-image-in-a-form
Il existe plusieurs raisons d’inclure un composant « Image » dans un formulaire adaptatif, notamment :
-
Image de marque : une image peut être utilisée pour afficher le logo ou le nom de l’organisation qui a créé le formulaire, ce qui contribue à établir la reconnaissance et la crédibilité de la marque.
-
Supports visuels : une image peut aider à fournir un niveau d’information supplémentaire aux utilisateurs et aux utilisatrices, en fournissant un support visuel pour aider les utilisateurs et utilisatrices à comprendre l’objectif du formulaire.
-
Décoration : une image peut être utilisée pour améliorer la conception globale du formulaire et le rendre plus attrayant visuellement.
-
Expérience utilisateur : une image peut être utilisée pour rendre le formulaire plus convivial en offrant une méthode claire et intuitive d’accès et de remplissage des champs de formulaire.
Version et compatibilité version-and-compatibility
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 :
version 2.0.4 et les versions ultérieures
versions 1.1.12 à 2.0.0 exclue.
Pour plus d’informations sur les versions et publications des composants principaux, consultez le document Versions des composants principaux.
Détails techniques technical-details
Retrouvez les informations les plus récentes sur le composant principal « Image » 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 configure-dialog
Vous pouvez facilement personnaliser l’expérience d’image pour les visiteurs et les visiteuses à l’aide de la boîte de dialogue Configurer. Vous pouvez également définir facilement des options d’image pour une expérience utilisateur fluide.
-
Nom - Vous pouvez identifier facilement un composant de formulaire en lui attribuant un nom unique 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.
-
Marquer comme élément de formulaire non lié : sélectionnez cette option pour configurer un champ de formulaire qui n’est lié à aucun schéma. Cette option vous permet d’enregistrer des données sans mettre à jour la source de données. Elle vous permet également de gérer les données de manière personnalisée, en les séparant de l’intégration de base de données standard.
-
Description - Une description est une brève explication textuelle qui fournit des informations supplémentaires ou une clarification sur l’objectif d’une image spécifique.
-
Déposez une ressource ici ou recherchez un fichier à télécharger - Cette option permet de déposer une ressource telle qu’une image par glisser-déposer de la souris. Vous pouvez également télécharger un fichier à partir d’un système de fichiers local à l’aide du bouton Parcourir. Après avoir ajouté une image, trois boutons s’affichent au bas de l’image :
- Modifier - Appuyez ou cliquez sur Modifier pour gérer les rendus de la ressource dans l’éditeur de ressources.
- Effacer - Appuyez ou cliquez sur Effacer pour désélectionner l’image actuellement sélectionnée.
- Sélection - Appuyez ou cliquez sur Sélection pour sélectionner une autre image dans le dossier Ressources.
-
Texte secondaire - Cette option est utilisée pour saisir un texte de remplacement court et descriptif qui décrit l’image aux personnes malvoyantes.
-
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.
Boîte de dialogue de conception design-dialog
La boîte de dialogue de conception permet de définir et de gérer les styles CSS du composant « Image ».
Onglet Styles styles-tab
Cet onglet vous permet de définir et de gérer les styles CSS d’un composant. Le composant principal « Image » 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 « Image » 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.
Propriétés personnalisées
Les propriétés personnalisées vous permettent d’associer des attributs personnalisés (paires clé-valeur) à un composant principal de formulaire adaptatif à l’aide du modèle de formulaire. Les propriétés personnalisées sont répercutées dans la section des propriétés du rendu déocuplé du composant. Cela permet de créer un comportement de formulaire dynamique qui s’adapte en fonction des valeurs d’attributs personnalisés. Par exemple, les développeurs et développeuses peuvent concevoir plusieurs rendus d’un composant de formulaires découplés pour des plateformes mobiles, de bureau ou web, ce qui améliore considérablement l’expérience client sur un large éventail d’appareils.
-
Nom du groupe : vous pouvez fournir un nom pour identifier le groupe de propriétés personnalisées. Vous pouvez ajouter, supprimer ou réorganiser plusieurs groupes de propriétés personnalisées. Après avoir ajouté le groupe de propriétés personnalisées, vous pouvez voir les options suivantes :
-
Paires clé-valeur : vous pouvez ajouter plusieurs noms et valeurs de propriétés personnalisées en cliquant sur le bouton Ajouter pour chaque groupe de propriétés personnalisées.
-
Supprimer : appuyez ou cliquez pour supprimer le nom et la valeur des propriétés personnalisées.
-
Réorganiser : appuyez ou cliquez et faites glisser pour réorganiser l’ordre du nom et de la valeur des propriétés personnalisées.
-
Articles connexes related-articles
- Accordéon
- Fragments de formulaire adaptatif
- reCAPTCHA du formulaire adaptatif
- Bouton
- Groupe de cases à cocher
- Case à cocher
- Sélecteur de date
- Liste déroulante
- Conteneur de formulaire
- Titre du formulaire
- Pièce jointe
- Pied de page
- En-tête
- Image
- Zone numérique
- Panneau
- Téléphone
- Onglet horizontal
- Onglet vertical
- Bouton radio
- Bouton de réinitialisation
- Bouton Envoyer
- Zone de texte
- Texte
- Onglet Conditions générales
- Assistant
Voir également see-also
- Créer un formulaire adaptatif AEM
- Ajouter un formulaire adaptatif AEM à une page AEM Sites
- Appliquer des thèmes à un formulaire adaptatif AEM
- Ajouter des composants à un formulaire adaptatif AEM
- Utiliser reCAPTCHA dans un formulaire adaptatif AEM
- Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
- Traduire un formulaire adaptatif AEM
- Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
- Connecter un formulaire adaptatif à Microsoft SharePoint
- Connecter un formulaire adaptatif à Microsoft Power Automate
- Connecter un formulaire adaptatif à Microsoft OneDrive
- Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
- Connecter un formulaire adaptatif à Salesforce
- Utiliser Adobe Sign dans un formulaire adaptatif AEM
- Ajouter un nouveau paramètre régional pour un formulaire adaptatif
- Envoyer des données de formulaire adaptatif à une base de données
- Envoyer des données de formulaire adaptatif à un point d’entrée REST
- Envoyer des données de formulaire adaptatif à un workflow AEM
- Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM