A propos des thèmes dans AEM Forms

Avec Adobe Experience Manager Forms, vous pouvez créer des thèmes et les appliquer à vos formulaires. Un thème contient les informations de style pour les composants et les panneaux, et vous pouvez réutiliser un thème sur différents formulaires. Vous pouvez définir des styles pour un composant ou modifier les propriétés CSS des différents composants utilisés dans l’ensemble de l’application. Ces styles incluent les propriétés telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence et la taille. Vous pouvez enregistrer les personnalisations dans un thème et les déplacer sur les composants de votre formulaire sous la forme d’un paramètre prédéfini. Lorsque vous ajoutez un thème à votre formulaire, le style spécifié se reflète sur des composants correspondants de votre formulaire.

Le thème est géré en ligne avec la gestion d’autres éléments du formulaire adaptatif. Le thème est un fichier qui peut être géré indépendamment (sans référence à un formulaire adaptatif). Les thèmes ont un cycle de vie complet semblable à d’autres actifs de formulaires adaptatifs.

Utilisez Forms Manager pour :

  • Créer un thème
  • Modifier/copier un thème existant (modifier les méta-données/la définition des thèmes)
  • Importer/exporter un thème existant
  • Gérer la dépendance pour le thème

AEM Forms est assorti de modèles de formulaire qui sont associés à des thèmes. Ces thèmes sont prêts à l’emploi et à disposition des clients. Les thèmes disponibles aux clients sont les suivants : Enquête, Inscription simple, Inscription avancée et Zone de travail, qui correspondent aux modèles de formulaire.Vous pouvez les utiliser pour créer des composants dans vos formulaires et personnaliser l’apparence de votre formulaire. Vous ne pouvez pas modifier les thèmes prêts à l’emploi. 

Remarque :

Forms Manager gère les propriétés des métadonnées pour la définition du thème, et lance l’éditeur de thème qui vous permet de modifier le style.

Création, téléchargement ou chargement d’un thème

Avec AEM Forms, vous pouvez créer, télécharger ou charger des thèmes. Un thème est créé comme d’autres actifs tels que les formulaires, les documents et les lettres. Le thème est enregistré en tant qu’entité distincte, avec des propriétés de métadonnées comme les formulaires. L’enregistrement des thèmes en tant qu’entité distincte permet de les réutiliser. Vous pouvez créer un thème, le télécharger, puis le charger sur une instance distincte pour le réutiliser. 

Création d’un thème

Procédez comme suit pour créer un thème :

  1. Sous Experience Manager, cliquez sur Formulaire, puis sur Thèmes.
  2. Sur la page Thèmes, cliquez sur Créer > Thème.
    Un assistant de création d’un thème se lance. 
  3. Dans l’onglet Réglages de base de la section Ajouter des propriétés de l’assistant de création de thème, indiquez le Titre et le Nom du thème. Les champs Titre et Nom sont obligatoires pour créer un thème.
  4. Dans l’onglet Réglages avancés, vous verrez deux champs : 
    • Emplacement Clientlib : fournit un explorateur de chemin d’accès pour sélectionner un emplacement dans le référentiel contenant les clientlibs correspondant à ce nouveau thème.
    • Catégorie Clientlib : fournit un champ de texte permettant de saisir le nom de la catégorie de votre choix clientlib pour le thème. 
  5. Cliquez sur Créer, puis sur Ouvrir pour ouvrir le thème dans l’éditeur de thème, ou cliquez sur Terminé pour retourner à la page de thèmes. 

Téléchargement d’un thème

Vous pouvez exporter des thèmes dans AEM Forms, que vous pouvez utiliser dans d’autres projets ou instances. AEM vous permet de télécharger le thème sous la forme d’un fichier zip, que vous pouvez charger sur l’instance. 

Pour télécharger un thème :

  1. Dans Experience Manager, accédez à Forms > Thèmes.
  2. Sur la page Thèmes, vous utilisez l’option Sélectionner pour sélectionner un thème.
  3. Cliquez sur Télécharger.
    Le thème est téléchargé sous la forme d’un package compressé que vous pouvez partager. 

Chargement d’un thème

Vous pouvez utiliser les thèmes créés avec des paramètres prédéfinis de style sur votre projet. Vous pouvez importer des packages de thème que d’autres créent en les chargeant sur votre projet. 

Pour charger un thème :

  1. Dans Experience Manager, accédez à Forms > Thèmes.
  2. Sur la page Thèmes, cliquez sur Charger.
  3. Dans l’invite de téléchargement, recherchez et sélectionnez un package de thème sur votre ordinateur et cliquez sur Charger.
    Le thème chargé est disponible dans la page Thèmes. 

Métadonnées d’un thème

Liste de propriétés des métadonnées d’un thème (sur la page Propriétés d’un thème).

 

ID

 

Nom Peut être modifié Description de la propriété
1. Titre Oui Nom d’affichage du thème.
2. Description Oui Description du thème.
3. Type Non
  • Type d’actif.
  • La valeur est toujours Thème.
4. Créé Non Date de création du thème
5. Nom de l’auteur Oui Auteur du thème. Calculé au moment de la création du thème.
6. Date de la dernière modification Non Date à laquelle le thème a été modifié la dernière fois.
7. Etat Non État du thème (modifié/publié).
8. Heure de publication Oui Heure de publication automatique du thème.
9. Heure de désactivation de la publication Oui Heure de désactivation de la publication automatique du thème.
10. Balises Oui Un libellé lié au thème pour l’identification utilisée pour améliorer la recherche.
11. Références Liens
  • Contient la section « Référencé par ». Répertorie les formulaires qui utilisent le thème.
  • Etant donné que le thème ne fait référence à aucun autre actif, il n’y a pas de section « Référence ».
12. Emplacement de la bibliothèque cliente Oui
  • Le chemin d’accès défini par l’utilisateur du référentiel de « /etc » dans lequel les bibliothèques clientes correspondant à ce thème sont stockées.
  • Valeur par défaut : « /etc/clientlibs/fd/themes » + chemin d’accès relatif de l’actif du thème.
  • Si l’emplacement n’existe pas, la hiérarchie des dossiers est générée automatiquement.
  • Lorsque cette valeur change, la structure de nœud clientlib est déplacée vers le nouvel emplacement saisi.
    Remarque : si vous modifiez l’emplacement clientlib, dans le référentiel CRXDE, affectez crx:replicate, rep:write, jcr:read à forms-users et crx:replicate, jcr:read à fd-service dans le nouvel emplacement.
13. Nom de la catégorie de bibliothèque cliente Oui
  • Nom de la catégorie de bibliothèque cliente défini par l’utilisateur pour ce thème.
  • Un message d’erreur s’affiche si le nom est déjà utilisé par un autre thème existant.
  • Valeur par défaut : calculée à l’aide de l’emplacement du thème.
  • Lorsque cette valeur est modifiée, le nom de la catégorie est mis à jour sur le nœud de la bibliothèque cliente correspondant. La mise à jour du Nom de la catégorie de bibliothèque cliente dans les fichiers jsp n’est pas obligatoire, car le nom de la catégorie de bibliothèque cliente est utilisé par référence.

A propos de l’éditeur de thème

AEM Forms est assorti d’un éditeur de thème. C’est une interface conviviale pour les utilisateurs professionnels et les concepteurs Web/développeurs qui fournit les fonctionnalités nécessaires pour spécifier le style de différents éléments des formulaires adaptatifs facilement.Lorsque vous créez un thème, il est stocké en tant qu’entité distincte comme les formulaires, les documents, les lettres, les fragments de documents et les dictionnaires de données.

Lorsque vous accédez à Experience Manager > Formulaires et documents > Thèmes, vous accédez à tous les thèmes en mode de création que vous pouvez utiliser. Lorsque vous sélectionnez et ouvrez un thème, il s’ouvre dans l’éditeur de thèmes.

L’éditeur de thèmes vous permet de personnaliser les styles des composants mis en forme dans un thème. Vous pouvez personnaliser l’apparence d’un formulaire sur un périphérique. 

L’éditeur de thème est divisé en deux panneaux : 

  • Zone de travail : apparaît du côté droit. Elle illustre un exemple de formulaire adaptatif dans lequel toutes les modifications de mise en forme sont immédiatement répercutées. Vous pouvez également sélectionner des objets directement à partir de la zone de travail pour consulter les styles qui y sont associés et les modifier. Une règle de résolution du périphérique dans la partie supérieure régit la zone de travail. La sélection d’un point d’arrêt de résolution de la règle affiche l’aperçu de l’exemple de formulaire à la résolution appropriée. La zone de travail est expliquée en détails ci-dessous.
  • Encadré : apparaît sur le côté gauche. Il comporte les éléments suivants :
    • Sélecteur : affiche le composant sélectionné pour la mise en forme, ainsi que ses propriétés dont vous pouvez définir le style. Un thème regroupe des informations sur la mise en forme d’un formulaire à un seul et même endroit. Le sélecteur représente tous les composants d’un type. Si vous sélectionnez un composant de zone de texte dans un thème pour la mise en forme, toutes les zones de texte de votre formulaire héritent du style.
      Les sélecteurs vous permettent de mettre en forme un composant de conteneur ou un composant spécifique. Par exemple, vous disposez d’un champ du formulaire qui permet aux utilisateurs de saisir leur adresse. Vous pouvez mettre en forme le champ d’adresse lui-même. Le champ d’adresse est un objet, qui utilise un objet de zone de texte. Dans ce cas, le champ correspond à un composant de conteneur et la zone de texte est un composant spécifique. Vous pouvez chercher et sélectionner le composant dans l’encadré, ou le sélectionner dans Zone de travail.

      Un composant a un impact sur tous les objets qui entrent dans sa catégorie. Un type d’objet spécifique a un impact sur les objets de la catégorie spécifique. Par exemple, vous disposez d’un champ du formulaire qui permet aux utilisateurs de saisir leur âge. Le composant de champ contient un composant de zone numérique. Lorsque vous mettez en forme le composant de champ dans le thème, tous les objets de champ héritent de la mise en forme que vous spécifiez dans le thème. Lorsque vous appliquez un style au composant numérique de la zone dans le thème, seuls les objets numériques de zone de votre formulaire héritent du style.

      Les mises en forme du composant de conteneur et du composant spécifique restent indépendantes. Par exemple, vous définissez la couleur d’arrière-plan du composant de champ en bleu. Tous les objets de champ de votre formulaire héritent de la couleur d’arrière-plan bleu, mais l’objet spécifique (zone numérique ou de texte) à l’intérieur du champ reste inchangé. Vous pouvez également définir la couleur d’arrière-plan des composants de zone numérique et de texte en vert. Tous les objets des zones numériques et de texte de votre formulaire héritent de la couleur d’arrière-plan, mais les objets de champ les contenant restent inchangés. Vous pouvez également définir la couleur d’arrière-plan du champ en bleu, de la zone de texte en vert et de la zone numérique en rouge. Tous les objets de champ héritent de bleu, toutes les zones de texte héritent de vert et les zones numériques héritent de la couleur d’arrière-plan rouge.
    • Etat : vous permet de personnaliser les styles d’un objet dans un état spécifique. Par exemple, vous pouvez spécifier l’aspect d’un objet lorsqu’il est à l’état par défaut, mis au point, désactivé, survolé ou d’erreur.
    • Catégories de propriété : les propriétés de mise en forme sont divisées en différentes catégories. Par exemple : Dimension et position, Texte, Arrière-plan, Bordure et Effets. Sous chaque catégorie, vous fournissez des informations de mise en forme. Par exemple, sous Arrière-plan, vous pouvez indiquer la Couleur d’arrière-plan, l’Image et le Dégradé de l’arrière-plan. 
    • Avancé : vous permet d’ajouter le CSS personnalisé à un objet, remplaçant les contrôles visuels de propriétés défiis en cas de chevauchement. 
    • Affichage CSS : vous permet d’afficher le fichier CSS du composant sélectionné

    En outre, dans l’encadré, vous verrez une flèche dans la partie inférieure. Lorsque vous cliquez sur la flèche, vous bénéficiez de deux options supplémentaires : Simuler la réussite et Simuler une erreur. Ces options, ainsi que les options décrites ci-dessus, sont expliquées en détails ci-dessous.

Séquence de génération CSS

Lorsque vous sélectionnez la vue CSS, l’éditeur de thèmes collecte toutes les informations de mise en forme et crée un fichier CSS. Il collecte des informations dans l’ordre suivant :

  1. La mise en forme définie dans la bibliothèque client de base du thème.
  2. La mise en forme définie par l’utilisateur, spécifiée à l’aide des propriétés dans la barre latérale.
  3. Le style CSS fourni à l’aide de l’option de remplacement de CSS. 

Par exemple, la couleur d’arrière-plan d’une zone de texte est bleue dans la bibliothèque client de base. Vous la remplacez par la couleur rose à l’aide des propriétés de la barre latérale. Lorsque vous générez un fichier CSS, la couleur d’arrière-plan de la zone de texte est rose. Après la modification de la couleur d’arrière-plan à l’aide des propriétés, un autre auteur utilise l’option de remplacement de CSS pour modifier la zone de texte de couleur d’arrière-plan en blanc. Lorsque vous générez des fichiers CSS, la couleur d’arrière-plan blanche apparaît dans le CSS généré.   

Débogage des styles

Lorsque vous spécifiez des styles pour les composants dans l’éditeur de thèmes, un fichier CSS est généré comme décrit ci-dessus. Lorsque vous définissez le style d’un composant de conteneur, plusieurs composants intégrés sont également mis en forme. Lorsque vous sélectionnez un composant spécifique, il hérite de la mise en forme s’il s’agit d’une partie du composant de conteneur. Par exemple, vous sélectionnez un widget de champ auquel appliquer la mise en forme. Le widget de champ est un composant de conteneur qui comprend une zone de texte et un libellé. Lorsque vous définissez le style du widget de champ, le libellé et la zone de texte sont également mis en forme. Il vous suffit ensuite de sélectionner la zone de texte à laquelle appliquer la mise en forme. La zone de texte obtient les informations de mise en forme depuis la mise en forme du widget de champ et de ses propres propriétés. L’éditeur de thèmes propose des options qui vous permettent d’afficher le fichier CSS pour corriger les styles que vous spécifiez par le biais des propriétés dans la barre latérale. 

Vous pouvez voir le fichier CSS généré à l’aide des options suivantes :

  • Option Affichage CSS dans la barre latérale : lorsque vous sélectionnez un composant dans le thème, vous pouvez voir l’option VIE CSS dans la barre latérale. Elle affiche le fichier CSS généré, y compris le CSS pour les pseudo éléments ::before et ::after.
  • Option Afficher le thème CSS dans la barre d’outils de la zone de travail : dans la barre d’outils de la zone de travail, cliquez sur  > Afficher le thème CSS. Vous pouvez voir tout le thème CSS généré à partir des propriétés que vous définissez dans l’éditeur de thèmes. 
A. Encadré B. Zone de travail 

Mise en forme des composants de formulaire

Vous pouvez utiliser un thème dans plusieurs formulaires, ce qui importe le formatage des composants de formulaire que vous avez spécifié dans le thème.Vous pouvez mettre en forme différents composants d’un formulaire tels que les titres, la description, les panneaux, les champs, les icônes et les zones de texte. Utilisation de widgets pour configurer les propriétés des composants de formulaire dans un thème La connaissance préalable du code CSS ou LESS n’est pas obligatoire, même si la section Remplacements de CSS vous permet d’écrire un code CSS ou de fournir des sélecteurs personnalisés. La section Remplacements de CSS apparaît lorsque vous sélectionnez un composant dans l’encadré.

Par exemple, vous travaillez sur trois formulaires. Dans les trois formulaires, vous souhaitez que l’arrière-plan du champ qui accepte uniquement les valeurs numériques soit vert. Vous pouvez créer un thème et l’ajouter à tous les formulaires. Le thème déplace la mise en forme sur toutes les zones de texte qui acceptent des valeurs numériques uniquement. De même, si vous souhaitez que tous les champs aient une couleur d’arrière-plan, vous pouvez définir la couleur d’arrière-plan du champ et l’enregistrer. Tous les formulaires qui utilisent votre thème auront la couleur d’arrière-plan du champ que vous indiquez, sans avoir à écrire de CSS spécifiquement pour chaque formulaire ou composant.

Composants pouvant être mis en forme dans l’encadré
Les options de l’encadré vous permettent de sélectionner et de mettre en forme différents composants de votre formulaire.

Cliquer sur le bouton Modifier au niveau d’un composant dans l’encadré sélectionne le composant dans Zone de travail et vous permet de mettre en forme le composant à l’aide des options de l’encadré.

Certains composants tels que la zone de texte, la zone numérique, le bouton-radio et la case à cocher sont classés sous des composants de niveau supérieur comme Champ. Par exemple, vous souhaitez personnaliser le style des boutons radio dans votre formulaire. Pour sélectionner des boutons radio à mettre en forme, sélectionnez Champ > Widget > Bouton-radio.

Cliquez sur DÉVELOPPER TOUT dans l’encadré pour afficher, sélectionner et mettre en forme les composants classés qui ne sont pas visibles immédiatement.

Mise en forme des mises en page de panneau

Les thèmes dans AEM Forms prennent en charge la mise en forme d’éléments de la mise en page des panneaux dans vos formulaires. La mise en forme d’éléments de mises en page prêtes à l’emploi et personnalisées est prise en charge.

Les panneaux prêts à l’emploi comprennent :

  • Onglets sur la gauche
  • Onglets dans la partie supérieure
  • Accordéon
  • Réactive
  • Assistant
  • Mise en page mobile
    • Titres de panneau dans l’en-tête
    • Sans titres de panneau dans l’en-tête

Les sélecteurs varient pour chaque mise en page.
La mise en forme des mises en page personnalisées à partir de l’éditeur de thèmes implique ce qui suit :

  • La définition des composants pour une mise en page pouvant être mise en forme, et les sélecteurs CSS pour identifier de manière unique ces composants
  • La définition des propriétés CSS pouvant être appliquées sur ces composants
  • Définissez la mise en forme de ces composants de manière interactive à partir de l’interface utilisateur

Styles différents pour différentes tailles d’écran

Les mises en page sur les périphériques de bureau et mobiles ont parfois des styles légèrement ou entièrement différents. Pour les périphériques mobiles, la tablette et le téléphone partagent des mises en page similaires, à l’exception des tailles des composants.

Utilisez des points d’arrêt de l’éditeur de thème pour définir une autre mise en forme pour différents formats d’écran. Vous pouvez sélectionner un périphérique ou une résolution de base sur lesquels vous commencez à générer le thème ; les variantes de mise en forme pour les autres résolutions sont générées automatiquement. Vous pouvez explicitement modifier la mise en forme pour toutes les résolutions. Selon vos besoins, vous pouvez choisir le thème de base pour un mobile, une tablette ou un périphérique de bureau. Différentes approches de la génération de CSS sont définies en fonction de la sélection du point d’arrêt par défaut sélectionné lors de la création du thème.

Les approches sont les suivantes :

  1. Bureau-premier (par défaut) : l’approche prend l’ensemble de la mise en forme d’une résolution plus élevée au niveau d’un point d’arrêt de résolution plus basse, sauf si la valeur est remplacée dans le point d’arrêt inférieur.
  2. Mobile-premier : l’approche prend l’ensemble de la mise en forme d’une résolution plus faible au niveau d’un point d’arrêt de résolution plus élevée, sauf si la valeur est remplacée dans le point d’arrêt supérieur.
  3. Tablette comme résolution de base : cette approche est une combinaison des deux premières. Elle fait office de défilement de haut en bas pour les points d’arrêt en dessous du point d’arrêt sélectionné, et de bas en haut pour les points d’arrêt au-dessus du point d’arrêt sélectionné.

Remarque :

Le thème est d’abord créé à l’aide d’un formulaire, puis appliqué sur différents formulaires. Les points d’arrêt sur le formulaire utilisé lors de la création du thème peuvent être différents du formulaire auquel le thème est appliqué. Les requêtes multimédias CSS sont basées sur le formulaire utilisé lors de la création du thème, et non sur le formulaire auquel le thème est appliqué.

Mise en forme des modifications en contexte des propriétés de l’encadré lors de la sélection d’objets

Lorsque vous sélectionnez un composant dans Zone de travail, ses propriétés de mise en forme sont répertoriées dans l’encadré. Sélectionnez le type d’objet et son état, puis indiquez sa mise en forme. 

Aperçu, enregistrement et ignorer les modifications en direct

Les modifications apportées à la mise en forme sont immédiatement répercutées dans le formulaire chargé dans la zone de travail. L’aperçu en direct vous permet de définir de manière interactive et de voir l’impact de la mise en forme. Lorsque vous modifiez la mise en forme d’un composant, le bouton Terminé est activé dans l’encadré. Pour conserver les modifications, utilisez le bouton Terminé.

Thème avec un autre formulaire

Lorsque vous créez un thème, il est créé à l’aide d’un formulaire fourni avec l’éditeur de thème. Vous indiquez la mise en forme pour les composants de ce formulaire. Au lieu du formulaire fourni avec l’éditeur de thème, vous pouvez sélectionner un formulaire de votre choix pour indiquer une mise en forme et prévisualiser ses résultats. 

Pour remplacer le formulaire actif dans la zone de travail de l’éditeur de thème :

  1. Dans le panneau EDITEUR DE THÈMES, cliquez sur Options de thème >Configurer
  2. Dans la boîte de dialogue Modifier la configuration, cliquez sur Parcourir.
  3. Sur l’écran Sélection d’un chemin d’accès, sélectionnez votre formulaire et cliquez sur Confirmer.

Rétablir/annuler

Vous pouvez annuler ou rétablir les modifications indésirables qui se produisent accidentellement.Utilisez les boutons Rétablir/annuler de la Zone de travail. 

Boutons Rétablir/annuler dans l’éditeur de thème
Boutons Rétablir/annuler dans la zone de travail

Les boutons Rétablir/annuler apparaissent lorsque vous mettez en forme un composant dans l’éditeur de thème. 

Utilisation de l’éditeur de thème

L’éditeur de thème vous permet de modifier un thème que vous avez créé ou téléchargé. Accédez à Formulaires et documents > Thèmes, sélectionnez un thème et ouvrez-le. Le thème s’ouvre dans l’éditeur de thème. 

Comme nous l’avons mentionné ci-dessus, l’éditeur de thème présente deux panneaux : Encadré et Zone de travail.

Propriétés des composants dans l’éditeur de thème
Personnalisation du style de réussite du composant Widget de zone de texte dans l’éditeur de thème. Le composant est sélectionné dans la zone de travail, et son état est sélectionné dans l’encadré. Les options de mise en forme disponibles dans l’encadré sont utilisées pour personnaliser l’aspect d’un composant.

Utilisation de la zone de travail

Le thème est créé à l’aide du formulaire prêt à l’emploi ou du formulaire de votre choix. La zone de travail affiche un aperçu du formulaire utilisé pour créer le thème avec les personnalisations spécifiées dans le thème. La règle au-dessus du formulaire est utilisée pour déterminer la mise en page selon la taille de l’affichage de votre périphérique.

Dans la barre d’outils de la zone de travail se trouvent les éléments suivants :

  • Activer/désactiver le panneau latéral : vous permet d’afficher ou de masquer l’encadré.
  • Options du thème : propose trois options
    • Configurer : vous permet de sélectionner le formulaire d’aperçu et le fichier clientlib de base.
    • Afficher le thème CSS : vous permet d’afficher le fichier CSS généré par l’éditeur de thèmes, pour le thème sélectionné.
    • Aide : exécute une visite guidée de l’image de l’éditeur de thèmes. 
  • Émulateur : vous permet de simuler et spécifier l’aspect de votre thème pour différentes tailles d’affichage. La taille d’affichage est traitée comme un point d’arrêt dans l’émulateur. Vous pouvez sélectionner un point d’arrêt et spécifier un style pour ce point. Par exemple, le Bureau et la Tablette sont deux points d’arrêt. Vous pouvez spécifier différents styles pour chaque point d’arrêt.  

Lorsque vous sélectionnez un composant dans la zone de travail, vous voyez la barre d’outils de composant dessus. La barre d’outils de composant vous permet de sélectionner des composants ou de passer aux composants au niveau du conteneur. Par exemple, vous sélectionnez une zone de texte numérique dans un panneau. Vous verrez les options suivantes dans la barre d’outils de composant :

  • Widget de zone numérique : vous permet de sélectionner le composant pour personnaliser son aspect dans l’encadré.
  • Widget de champ : vous permet de sélectionner le composant générique pour la mise en forme. Dans cet exemple, tous les composants de saisie de texte (zone de texte/zone numérique/exécution numérique pas à pas/saisie de date) sont sélectionnés pour la mise en forme.
  • : vous permet de basculer vers un composant de conteneur de niveau supérieur pour la mise en forme. Si vous sélectionnez la zone numérique et appuyez sur cette icône, le composant de champ est sélectionné. Si vous sélectionnez le composant de champ et appuyez sur cette icône, le panneau est sélectionné. Si vous continuez à appuyer sur cette icône pour la sélection, vous finissez par sélectionner la mise en page du formulaire pour la mise en forme. 

Remarque :

Les options disponibles dans la barre d’outils de composants varient en fonction du composant sélectionné. 

Barre d’outils de composants
Barre d’outils de composants sur la zone numérique dans la zone de travail

Utilisation de l’encadré

L’encadré dans l’éditeur de thèmes fournit des options pour personnaliser les styles pour les composants d’un thème et pour utiliser des sélecteurs. Les sélecteurs vous permettent de sélectionner un groupe de composants ou des composants individuels ; vous pouvez également rechercher des sélecteurs dans l’encadré. Vous pouvez saisir des sélecteurs pour les composants personnalisés. 

Lorsque vous sélectionnez un composant dans la zone de travail ou des sélecteurs dans l’encadré, ce dernier affiche toutes les options vous permettant de personnaliser les styles.
Vous trouverez ci-dessous les options qui s’affichent dans l’encadré lorsque vous sélectionnez un composant : 

Options de l’encadré Utilisation

Nom

Affiche le nom du composant sélectionné dans la zone de travail, ou recherché et sélectionné à l’aide de l’encadré.

Etat

Vous permet de sélectionner un état pour le composant sélectionné et de personnaliser sa mise en forme dans l’état sélectionné. 

Par exemple, vous pouvez spécifier l’aspect d’un composant dans son état par défaut, mis au point, désactivé, de survol, d’erreur ou de réussite. 

Les options de personnalisation des styles d’état varient en fonction des différents composants.

Dimensions et position

Vous permet de mettre en forme l’alignement, la taille, le positionnement et le placement de composants dans le thème. 

Les options disponibles sont les paramètres d’affichage, le remplissage, la marge, la largeur, la hauteur et l’indice Z.  

Texte

Vous permet de personnaliser les styles de texte dans le composant du thème.

Par exemple, vous souhaitez modifier l’aspect du texte saisi dans la zone de texte.

Vos options sont les suivantes : famille de polices, épaisseur, couleur, taille, hauteur de ligne, alignement du texte, espacement, interlettrage, retrait du texte, surlignement, italique, transformation de texte, alignement vertical, ligne de base et orientation. 

Arrière-plan 

Vous permet de remplir l’arrière-plan du composant par une image ou une couleur. 

Bordure

Vous permet de choisir l’aspect de la bordure du composant. Par exemple, vous souhaitez que la zone de texte ait une bordure rouge foncé épaisse, avec une ligne en pointillé. 

Les options disponibles sont : largeur, style, rayon et couleur de la bordure.

Effets

Vous permet d’ajouter des effets spéciaux aux composants, tels que l’opacité, le mode de fusion et les ombres. 

Avancé

Vous permet d’ajouter du code CSS personnalisé en ligne à un composant, puis de saisir des sélecteurs personnalisés. 

Lorsque vous ajoutez un code CSS personnalisé, il remplace la personnalisation que vous avez ajoutée à l’aide des options de l’encadré. 

Simuler la réussite Vous permet de voir à quoi ressemble un composant si vous spécifiez sa mise en forme pour l’état de réussite. Par exemple, dans un formulaire, les clients définissent le mot de passe. Les utilisateurs peuvent définir un mot de passe en fonction des directives que vous donnez. Lorsqu’un utilisateur saisit un mot de passe en suivant tous les conseils que vous avez fournis, la zone de texte se met en vert. Lorsque la zone de texte passe au vert, elle est en état de réussite. Vous pouvez spécifier la mise en forme d’un composant dans l’état de réussite et simuler son aspect à l’aide de l’option Simuler la réussite.
Simuler une erreur Vous permet de voir à quoi ressemble un composant si vous spécifiez sa mise en forme pour l’état d’erreur. Par exemple, dans un formulaire, les clients définissent le mot de passe. Les utilisateurs peuvent définir un mot de passe en fonction des directives que vous donnez. Lorsqu’un utilisateur saisit un mot de passe qui ne suit pas toutes les directives données, la zone de texte passe au rouge. Lorsque la zone de texte passe au rouge, elle est en état d’erreur. Vous pouvez spécifier la mise en forme d’un composant à l’état d’erreur, et simuler son aspect à l’aide de l’option Simuler une erreur.

Mise en forme d’un composant

Par exemple, dans votre formulaire, vous disposez de deux types de zones de texte : une qui accepte uniquement les valeurs numériques et d’autres qui acceptent des valeurs alphanumériques. Vous pouvez personnaliser la mise en forme de la zone de texte acceptant les valeurs numériques uniquement (une zone numérique).

Effectuez les étapes suivantes pour personnaliser la mise en forme d’un composant particulier (une zone numérique dans cet exemple) :

  1. Dans l’éditeur de thème, sélectionnez la zone numérique dans la zone de travail.
  2. Lorsque vous sélectionnez la zone numérique, vous pouvez afficher la barre d’outils des composants avec trois options : 
    • Widget de zone numérique
    • Widget de champ
  3. Sélectionnez Widget de zone numérique.
  4. Le titre de l’encadré passe à Widget de zone numérique et affiche des options pour personnaliser son aspect.
    Utilisez l’option Dimension et position dans l’encadré pour personnaliser la taille du composant. Vérifiez que l’état est bien Par défaut

Au lieu de sélectionner Widget de zone numérique, sélectionnez Widget de champ dans la barre d’outils de composants et effectuez les étapes ci-dessus. Quand vous sélectionnez des dimensions pour l’option Widget de champ, toutes les zones de texte, à l’exception de la zone numérique de votre formulaire ont la même taille. 

Mise en forme des champs pour un état donné

Avec la barre d’outils de composants, vous pouvez également spécifier la mise en forme des composants pour les différents états. Par exemple, si un composant est désactivé, il est à l’état désactivé. Les quatre états d’un composant que vous pouvez mettre en forme dans l’éditeur de thème sont les suivants : Par défaut, Désactivé, Erreur et Survol. Vous pouvez sélectionner un composant dans la zone de travail et utiliser l’option Etat de l’encadré pour personnaliser son aspect. 

Effectuez les étapes suivantes pour personnaliser la mise en forme d’un composant à un état spécifique :

  1. Sélectionnez un composant dans la zone de travail, puis sélectionnez l’option appropriée dans la barre d’outils de composants.
    L’encadré affiche les options de personnalisation de la mise en forme du composant. 
  2. Sélectionnez un état dans l’encadré. Par exemple, obligatoire ou erreur. 
  3. Utilisez des options telles que Bordure, Arrière-plan dans l’encadré pour personnaliser l’aspect des composants.

Lorsque vous personnalisez la mise en forme d’un composant après avoir spécifié son état, la personnalisation s’affiche pour le composant uniquement pour l’état spécifié. Par exemple, si vous personnalisez la mise en forme du composant alors que l’état Survol est sélectionné. La personnalisation s’affiche pour le composant lorsque vous déplacez le pointeur de la souris sur le composant du formulaire rendu auquel vous appliquez le thème.

Mise en forme des mises en page pour des écrans de plus petite taille

Utilisez la règle dans la zone de travail pour sélectionner des points d’arrêt pour les périphériques équipés de plus petits écrans. Cliquez sur l’émulateur dans la zone de travail pour afficher la règle et les points d’arrêt. Les points d’arrêt vous permettent de prévisualiser un formulaire pour les formats d’affichage de différents périphériques tels que les téléphones et les tablettes. Plusieurs formats d’affichage sont pris en charge dans l’éditeur de thème. 

Pour mettre en forme des composants pour différents points d’arrêt :

  1. Dans la zone de travail, sélectionnez un point d’arrêt au-dessus de la règle.
    Un point d’arrêt représente un périphérique mobile et son format d’affichage.
  2. Utilisez l’encadré pour personnaliser la mise en forme des composants de formulaire dans le thème pour le format d’affichage sélectionné.
  3. Vérifiez que la personnalisation est enregistrée.

Vous pouvez mettre en forme des composants de formulaire pour plusieurs périphériques. Les composants de formulaire pour les ordinateurs de bureau et les périphériques mobiles ont parfois des styles totalement différents. 

Application d’un thème à un formulaire

Pour appliquer un thème à un formulaire adaptatif : 

  1. Ouvrez votre formulaire en mode d’édition.
    Pour ouvrir un formulaire en mode d’édition, sélectionnez-le et cliquez sur Ouvrir.
  2. En mode d’édition, sélectionnez un composant, puis cliquez sur > Conteneur de formulaires adaptatifs, puis sur .
    Vous pouvez modifier les propriétés de votre formulaire dans l’encadré.
  3. Dans l’encadré, cliquez sur Mise en forme.
  4. Sélectionnez votre thème dans le menu déroulant Thème de formulaire adaptatif et cliquez sur Terminé .

Obtention de l’aspect de formulaire adaptatif spécifique à l’aide des thèmes

Avec AEM Forms et le thème de la zone de travail prête à l’emploi par défaut, il existe d’autres thèmes : Inscription simple, Inscription avancée et Enquête. Si vous souhaitez concevoir votre formulaire à l’aide d’autres thèmes, avec des modifications supplémentaires, copiez le thème à partir du dossier de la bibliothèque des thèmes. Collez les thèmes copiés en dehors du dossier de la bibliothèque des thèmes et modifiez le thème copié selon les modifications que vous souhaitez.

Pour copier un thème, procédez comme suit :

  1. Dans l’instance de création, accédez à Adobe Experience Manager > Formulaires > Thèmes
  2. Ouvrez le dossier de la bibliothèque des thèmes. 
  3. Dans ce dossier, déplacez le pointeur de la souris sur le thème prêt à l’emploi correspondant, puis appuyez sur Copier.
  4. Collez le thème copié en dehors du dossier de la bibliothèque des thèmes. 
  5. Personnalisez le thème copié.

Après avoir personnalisé le thème, appliquez-le à votre formulaire. 

Impact sur d’autres cas d’utilisation de formulaire adaptatif

  • Publier/désactiver la publication d’un formulaire : à la publication d’un formulaire, le thème appliqué est également publié (si ce n’est pas déjà fait)
  • Importer/exporter un formulaire : à l’importation ou à l’exportation d’un formulaire, son thème associé est automatiquement importé ou exporté également.
  • Références d’un formulaire : la section Référence dans les références du formulaire contient une entrée supplémentaire pour le thème.
  • Heure de la dernière modification d’un formulaire : mise à jour lors de la modification du thème associé.
  • Test A/B : vous pouvez appliquer un thème différent à deux versions du formulaire dans le test A/B. Les informations des deux thèmes sont stockées individuellement stockées sur les deux conteneurs de guide. 

Résolution des problèmes et recommandations

  • Téléchargement d’un dossier contenant des thèmes : 
    si vous téléchargez le dossier dans lequel vous créez des thèmes, un dossier vide est téléchargé. Pour télécharger ces thèmes, sélectionnez-les et téléchargez-les.
  • Éviter les actifs d’un autre thème
    Lorsque vous modifiez un thème, vous pouvez parcourir et ajouter des actifs (tels que des images) d’autres thèmes. Par exemple, vous pouvez modifier l’arrière-plan d’une page. Par exemple, lorsque vous sélectionnez Page > Arrière-plan > Ajouter > Image, une boîte de dialogue s’affiche et vous permet de parcourir et d’ajouter des images dans l’autre thème. 
    Vous pouvez rencontrer des problèmes avec votre thème actuel si un actif est ajouté à partir d’un autre thème et l’autre thème est déplacé ou supprimé. Nous vous recommandons d’éviter de parcourir les actifs d’autres thèmes et de les ajouter. 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne