Show Menu
SUJETS×

Création et utilisation des thèmes

Présentation

Vous pouvez créer et appliquer des thèmes pour styliser un formulaire adaptatif ou une communication interactive. Un thème contient des détails de style pour les composants et les panneaux. Ces styles incluent les propriétés telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence, l’alignement et la taille. Lorsque vous appliquez un thème, le style spécifié se reflète sur les composants correspondants. Les thèmes sont gérés de manière indépendante sans référence à un formulaire adaptatif ou à une communication interactive.
Vous pouvez :
  • Création d’un thème
  • Modifier et copier un thème existant
  • Télécharger et charger un thème existant sur le serveur AEM Forms
  • Gérer les dépendances pour un thème

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. Les thèmes en tant qu’entité séparée peuvent être réutilisés dans plusieurs formulaires adaptatifs et communications interactives. Vous pouvez également déplacer un thème vers une autre instance d’AEM Forms et le réutiliser.

Création d’un thème

Procédez comme suit pour créer un thème :
  1. Cliquez sur Adobe Experience Manager , cliquez sur Formulaires , puis sur Thèmes .
  2. In the Themes page, click Create > Theme . Un assistant de création d’un thème se lance.
  3. Dans l’onglet Réglages de base de l’assistant de création de thème, indiquez le titre et le nom du thème. Il s’agit de champs obligatoires.
  4. Dans l’onglet Avancé, vous obtenez deux champs :
    • Emplacement de la bibliothèque cliente : Emplacement dans le référentiel qui stocke les clientlibs du thème.
    • ​Clientlib : Fournit un champ de texte permettant de saisir le nom du clientlib pour le thème.
  5. Click Create and then click Edit to open the theme in Theme Editor, or click Done to return to the themes page.

Téléchargement d’un thème

Vous pouvez exporter des thèmes dans un fichier .zip et les utiliser dans d’autres projets ou instances AEM. Pour télécharger un thème :
  1. Cliquez sur Adobe Experience Manager , cliquez sur Formulaires , puis sur Thèmes .
  2. Dans la page Thèmes, sélectionnez un thème, puis cliquez sur Télécharger . Une boîte de dialogue contenant les détails du thème s’affiche.
  3. Cliquez sur Télécharger . Le thème est téléchargé sous forme de fichier .zip.
Si vous téléchargez un thème auquel un formulaire adaptatif est associé et que ce dernier est basé sur un modèle personnalisé, téléchargez également le modèle personnalisé. Lorsque vous chargez le thème téléchargé et le formulaire adaptatif sur un serveur AEM Forms, téléchargez également le modèle personnalisé associé.

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. Cliquez sur Adobe Experience Manager , cliquez sur Formulaires , puis sur Thèmes .
  2. Sur la page Thèmes, cliquez sur Créer > Chargement de fichier .
  3. Dans l’invite de téléchargement de fichier, 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
Name (Nom) Peut être modifié Description de la propriété
1. Title (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. État 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 par défaut de la bibliothèque cliente, dans le référentiel CRXDE, affectez-le crx:replicate, rep:write, rep:glob:*, rep:itemNames:: js.txt, jcr:read à forms-users et crx:replicate , jcr:read à fd-service l’emplacement suivant. Also attach another ACL by adding deny jcr:addChildNodes for forms-user
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. Il s’agit d’une interface conviviale pour les utilisateurs professionnels et les concepteurs Web/développeurs qui fournit les fonctionnalités requises pour spécifier le style de divers formulaires adaptatifs et éléments de communication interactifs facilement. Lorsque vous créez un thème, il est stocké en tant qu’entité distincte, telle que les formulaires, les communications interactives, les lettres, les fragments de de et les dictionnaires de données.
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 ou d’une communication interactive sur un périphérique.
L’éditeur de thème est divisé en deux panneaux :
  • Zone de travail - S’affiche sur le côté droit. Elle illustre un exemple de formulaire adaptatif ou de communication interactive dans lequel toutes les modifications de style 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 ou de communication interactive à 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 le style, ainsi que ses propriétés dont vous pouvez définir le style. 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 le style, toutes les zones de texte de votre formulaire ou de votre communication interactive héritent du style. Les sélecteurs vous permettent de choisir un composant générique ou un composant spécifique pour le style. Par exemple, un composant de champ est un composant générique, et une zone de texte est un composant spécifique.
      Mettre en forme un composant générique : un champ peut être un champ de zone numérique, tel que l’âge, ou un champ de zone de texte, tel qu’une adresse. Lorsque vous mettez en forme un champ, tous les champs tels que l’âge, le nom et l’adresse sont stylisés.
      Mise en forme d’un composant spécifique  : un composant spécifique a un impact sur les objets de la catégorie spécifique. Lorsque vous appliquez un style au composant numérique de la zone dans le thème, seul l’objet numérique de zone hérite du style.
      Par exemple, un champ de zone de texte tel qu’une adresse est plus long et un champ de zone numérique tel qu’un âge est plus court. Vous pouvez sélectionner un champ de zone numérique, réduire sa longueur et l’appliquer à votre formulaire. La largeur de tous les champs de zone numérique est réduite dans votre formulaire.
      Lorsque vous personnalisez tous les composants de champ avec une couleur d’arrière-plan spécifique, tous les champs tels que l’âge, le nom et l’adresse héritent de la couleur d’arrière-plan. Lorsque vous sélectionnez une zone numérique, telle que l’âge, et réduisez sa largeur, toutes les zones numériques telles que l’âge et le nombre de personnes dans une famille sont réduites. La largeur des champs de texte n’est pas modifiée.
    • Etat : 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 style sont divisées en différentes catégories. Par exemple, Dimension et position, Texte, Arrière-plan, Bordure et Effets. Sous chaque , 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 une page CSS personnalisée à un objet, qui remplace les propriétés définies par les contrôles visuels en cas de chevauchement.
    • Affichage CSS  : vous permet d’afficher le fichier CSS du composant sélectionné
    En outre, dans la barre latérale, 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 .
A. Barre latérale B. Canevas

Mise en forme des composants

Vous pouvez utiliser un thème dans plusieurs formulaires adaptatifs et communications interactives, ce qui importe le formatage des composants que vous avez spécifié dans le thème. Vous pouvez mettre en forme différents composants tels que les titres, la description, les panneaux, les champs, les icônes et les zones de texte. Utilisez des widgets pour configurer les propriétés des composants dans un thème. La connaissance préalable du code CSS ou LESS n’est pas obligatoire mais souhaitée, 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é.
Les options de la barre latérale vous permettent de sélectionner et de mettre en forme différents composants.
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 génériques comme Champ. Par exemple, vous souhaitez personnaliser le style des boutons radio. 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 le style d’éléments de la mise en page des panneaux dans vos formulaires et vos communications interactives. 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.
Le thème est d’abord créé à l’aide d’un formulaire ou d’une communication interactive, puis appliqué sur différents formulaires ou communications interactives. Les points d’arrêt utilisés lors de la création du thème peuvent être différents du formulaire ou de la communication interactive auquel/à laquelle le thème est appliqué. Le multimédia CSS est basé sur le formulaire ou la communication interactive utilisé dans la création du thème, et non sur le formulaire ou la communication interactive sur laquelle 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.

Styles récemment utilisés dans l’éditeur de thème

L’éditeur de thèmes met en cache jusqu’à 10 styles appliqués à un composant. Vous pouvez utiliser les styles mis en cache avec d’autres composants d’un thème. Les styles récemment utilisés sont disponibles juste en dessous du composant sélectionné dans la barre latérale sous forme de liste. Au début, la liste de styles récemment utilisée est vide.
Lorsque vous créez un composant, les styles sont mis en cache et répertoriés dans la zone de liste. Dans cet exemple, l’étiquette de la zone de texte est conçue pour modifier la taille et la couleur de la police. Vous pouvez suivre des étapes similaires pour choisir une image ou modifier les couleurs pour personnaliser un composant. Observez comment le style est mis en cache et répertorié dans la zone de liste lorsque le style d’étiquette de champ est modifié.
Dans cet exemple, le style de l’étiquette de champ est modifié et, lorsque l’option Description du panneau réactif est sélectionnée pour le style, une entrée de liste est ajoutée dans la bibliothèque de ressources. L’entrée dans la bibliothèque de ressources peut être utilisée pour modifier le style de Description du panneau réactif.
Lorsqu’un style est ajouté à la bibliothèque de ressources, il est disponible pour d’autres thèmes et dans le mode Style de l’interface utilisateur de l’éditeur de formulaire ou de communication interactive. De même, lorsque vous utilisez le mode style de l’éditeur de formulaire ou de l’interface utilisateur de l’éditeur de communication interactif pour mettre en forme un composant, le style est mis en cache et est disponible dans les du.
Le bouton Plus de la bibliothèque de ressources vous permet d’enregistrer le style de façon permanente avec le nom de votre choix. Le bouton Plus enregistre le style même si vous ne cliquez pas sur le bouton Enregistrer dans la barre latérale pour appliquer le style à un composant. Le bouton Plus pour enregistrer un style pour une utilisation ultérieure n’est pas disponible en mode Style.
Lorsque vous attribuez un nom personnalisé pour un style, le style est lié à un thème et n’est plus disponible pour les autres thèmes. Pour supprimer un style enregistré :
  1. On the CANVAS toolbar, click Theme Options > Manage Styles .
  2. Dans la boîte de dialogue Gérer les styles, sélectionnez un style enregistré, cliquez sur Supprimer .

Aperçu, enregistrement et ignorer les modifications en direct

Les modifications apportées au style sont immédiatement répercutées dans le formulaire ou la communication interactive chargé(e) 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é .
Lorsqu’un caractère non valide est saisi dans un champ, la couleur de la limite du champ devient rouge et un message d’erreur est affiché dans le coin supérieur gauche de l’écran. Par exemple, si vous saisissez des lettres dans une zone de texte qui accepte les caractères numériques comme entrées, la couleur de la bordure de la zone de saisie devient rouge. Vous ne pouvez pas enregistrer le thème sans résoudre l’erreur affichée dans la partie supérieure.

Theme with another adaptive form or interactive communication

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 ou une communication interactive de votre choix pour fournir un style et ses résultats.
Pour remplacer le formulaire ou la communication interactive actif/active dans la zone de travail de l’éditeur de thème :
  1. In the THEME EDITOR panel, click Theme Options > Configure .
  2. In the General tab, browse and select a form or interactive communication for the Adaptive Form/Document field.

Rétablir/annuler

Vous pouvez annuler ou rétablir les modifications non souhaitées qui se produisent accidentellement. Utilisez les boutons Rétablir/Annuler dans la zone de travail.
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é. Navigate to Forms & Documents > Themes , and select a theme and open it. 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.
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 ou de la communication interactive de votre choix. La zone de travail affiche un aperçu du formulaire ou de la communication interactive utilisé(e) 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 latéral : Permet d’afficher ou de masquer la barre latérale.
  • Options de thème thème: Propose trois options
    • Configurer : Propose des options permettant de sélectionner le formulaire de ou la communication interactive, la bibliothèque cliente de base et la configuration de typekit.
    • Afficher le thème CSS : génère des CSS pour le thème sélectionné.
    • Gérer les styles : fournit des options de gestion des styles de texte et d’images
    • Aide : exécute une visite guidée de l’image de l’éditeur de thèmes.
  • Emulateur : Emule 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 génériques. 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/pas à pas numérique/entrée de date) sont sélectionnés pour la mise en forme.
  • du champ : Permet de passer au composant générique 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 le style de la mise en forme.
Les options disponibles dans la barre d’outils de composants varient en fonction du composant sélectionné.
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 affichées dans la barre latérale lorsque vous sélectionnez un composant :
  • État
  • Feuille de propriété
  • Simuler une erreur/la réussite

État

Un état est un indicateur d’interaction utilisateur avec un composant. Par exemple, lorsqu’un utilisateur saisit des données erronées dans une zone de texte, l’état des modifications de la zone de texte passe à un état d’erreur. L’éditeur de thèmes vous permet de spécifier un état spécifique.
Les options de personnalisation des styles d’état varient en fonction des différents composants.

Feuille de propriété

Propriétés Utilisation
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.
Vous pouvez également utiliser le mode Mise en page pour définir la largeur des composants à l’aide d’une interface simple de glisser-déposer. Pour plus d’informations, voir Utilisation du mode Mise en page pour redimensionner des composants .
Text (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.
de la 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é
Permet d’ajouter des :
  • Properties for ::before and ::after pseudo elements to add content after or before default content in the selector, and style it. Voir Pseudo-éléments CSS .
  • Personnalisez du code CSS intégré à un composant, puis saisissez 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 une erreur/la réussite

Les options Simuler une erreur et une réussite sont situées en bas de la barre latérale. Vous pouvez les afficher à l’aide de la flèche afficher/masquer visible en bas de la barre latérale. À l’aide de l’éditeur de thème, vous pouvez définir le style des différents états d’un composant.
Par exemple, vous ajoutez un champ numérique dans votre formulaire, puis indiquez son style dans l’éditeur de thème. Lorsque les utilisateurs saisissent une valeur alphanumérique dans le champ, vous souhaitez que la couleur d’arrière-plan de la zone de texte change. Sélectionnez le champ numérique dans le thème, et utilisez l’option d’état dans la barre latérale. Vous sélectionnez l’état d’erreur dans la barre latérale et modifiez la couleur d’arrière-plan en rouge. Pour prévisualiser le comportement, vous pouvez utiliser l’option Simuler une erreur disponible dans la barre latérale. Les options Simuler une erreur et une réussite sont décrites en détails ci-dessous :
  • **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 voir la barre d’outils du composant avec trois options :
    • Widget de zone numérique
    • Widget de champ
  3. Select Numeric Box Widget .
  4. Le titre de l’encadré passe à Widget de zone numérique et affiche des options pour personnaliser son aspect. Use Dimension & Position option in the sidebar to customize size of the component. Vérifiez que l’état est bien Par défaut .
Instead of selecting Numeric Box Widget , select Field Widget in the component toolbar, and perform the steps above. When you select dimensions for Field Widget option, all the text boxes except the numeric box have the same size.

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 états généralement utilisés 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, l’état Erreur.
  3. Use options such as Border, Background in the sidebar to customize how the component looks.
  4. Utilisez l’option Simuler une erreur en bas de la barre latérale pour voir à quoi ressemble la mise en page lors de la modification.
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 ou de la communication interactive rendu(e) auquel/à laquelle vous appliquez le thème.
Pour simuler le comportement d’états autres que l’erreur et la réussite, utilisez le mode Aperçu. To use Preview mode, click Preview in the page toolbar.

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. Click emulator in Canvas to view ruler and breakpoints. Les points d’arrêt vous permettent de un formulaire ou une communication interactive pour des tailles d’affichage correspondant à différents périphériques tels que les smartphones 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 sa taille d’affichage.
  2. Utilisez la barre latérale pour personnaliser le style des composants du formulaire ou de la communication interactive dans le thème pour le format d’affichage sélectionné.
  3. Vérifiez que la personnalisation est enregistrée.
Vous pouvez définir le style des composants de formulaire ou de communication interactive pour plusieurs périphériques. Les composants de formulaire et de communication interactive pour les ordinateurs de bureau et les périphériques mobiles ont parfois des styles totalement différents.

Utilisation des polices web dans un thème

Vous pouvez désormais utiliser les polices disponibles dans un service Web dans un formulaire adaptatif ou une communication interactive. Typekit , le service prêt à l’emploi de polices Web d’Adobe, est disponible sous forme de configuration. Pour utiliser Typekit, créez un kit et des polices, et obtenez l’ID du kit sur le site Web de Typekit .
Effectuez les étapes suivantes pour configurer Typekit dans AEM :
  1. In the author instance, click Adobe Experience Manager > Tools > Deployment > Cloud Services.
  2. On the Cloud Services page, navigate to Third Party Services > Typekit , and click Configure Now under Typekit. Si une configuration est déjà disponible, cliquez sur le bouton + pour créer une nouvelle instance.
  3. Dans la boîte de dialogue Créer une configuration , indiquez un titre pour la configuration et cliquez sur Créer .
    Vous êtes redirigé sur la page de configuration.
  4. Dans la boîte de dialogue Modifier le composant qui s’affiche, indiquez votre ID de kit et cliquez sur OK .
Pour configurer un thème de sorte qu’il utilise la configuration Typekit, procédez comme suit :
  1. Dans l’instance de l’auteur, ouvrez un thème dans l’éditeur de thèmes.
  2. In the theme editor, navigate to Theme Options > Configure .
  3. Dans le champ Configuration de Typekit , sélectionnez un kit et cliquez sur Enregistrer .
    Maintenant, vous pouvez voir que les polices sont ajoutées à la propriété font-family du thème.

Énumération et sélection des polices dans l’éditeur de thèmes

Vous pouvez utiliser le service de configuration de thèmes pour ajouter plus de polices à l’éditeur de thèmes. Effectuez les opérations suivantes pour ajouter les polices :
  1. Connectez-vous à la console Web AEM avec les droits d’administrateur. URL for the AEM Web Console is https://'[server]:[port]'/system/console/configMgr .
  2. Ouvrez le service de configuration des thèmes de formulaire adaptatif .
  3. Cliquez sur +, spécifiez le nom de la police et cliquez sur Enregistrer . La police est ajoutée et disponible dans l’éditeur de thèmes.

Sélection de polices dans l’éditeur de thèmes

Vous pouvez utiliser le bouton + pour ajouter une police. Lorsque vous ajoutez une police, elle est répertoriée dans la barre latérale.
En plus de l’option de configuration de thème, vous pouvez également ajouter votre police à partir de l’éditeur de thèmes. Saisissez la police que vous souhaitez utiliser dans le champ de la famille de police sous la barre latérale et appuyez sur la touche Retour de votre clavier.
Lorsque vous sélectionnez une police, elle est ajoutée à la liste des familles de polices. Vous pouvez utiliser l’option Masque de l’éditeur de thèmes pour désactiver ou activer les polices répertoriées.
Vous pouvez voir la modification de la police du composant.
Le champ Famille de polices prend en charge plusieurs polices. Lorsque vous saisissez une police, le navigateur la recherche et l’applique au composant sélectionné. Si le navigateur ne trouve pas la police, il recherche une police à côté de celle-ci dans la famille. Vous pouvez commencer par saisir la police spécifique que vous recherchez. Si vous ne trouvez pas la police que vous voulez utiliser, vous pouvez saisir une police générique dans la famille et l’utiliser.

Masquer les styles appliqués dans l’éditeur de thèmes

Vous pouvez masquer les styles appliqués dans un thème. In the theme editor sidebar, you can use the icon to disable an applied style. Par exemple, si vous modifiez les dimensions d’un composant dans un formulaire ou une communication interactive, vous pouvez utiliser le bouton de masquage situé à gauche d’une propriété pour la désactiver. Lorsque vous enregistrez un thème, les options de masquage sélectionnées sont conservées.
L’exemple ci-dessous montre des styles masqués et non masqués dans un thème.

Applying a theme to a form or interactive communication

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. In the edit mode, select a component, then click > Adaptive Form Container , and then click .
    Vous pouvez modifier les propriétés de votre formulaire dans la barre latérale.
  3. Dans l’encadré, cliquez sur Mise en forme .
  4. Select your theme from the Adaptive Form Theme drop-down and click Done .
Pour appliquer un thème à une communication interactive :
  1. Ouvrez votre communication interactive en mode d’édition. Pour ouvrir une communication interactive en mode d’édition, sélectionnez-la et cliquez sur Ouvrir .
  2. In the edit mode, select a component, then click > Document Container , and then click .
    Vous pouvez modifier les propriétés de votre formulaire dans la barre latérale.
  3. In the sidebar, under Basic , select your theme from the Theme drop-down and click Done

Modifier le thème d’un formulaire au moment de l’exécution

Un thème définit le style de différents composants d’un formulaire. Vous pouvez utiliser la propriété themeOverride pour modifier le thème d’un formulaire de façon dynamique. L’URL type d’un formulaire est :
https://<server>:<port>/content/forms/af/test.html
Vous pouvez utiliser le paramètre themeOverride pour appliquer un thème au moment de l’exécution.
https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme
L’option themeOverride vous permet de fournir un chemin d’accès à un thème. Elle modifie le thème du formulaire et l’actualise avec des styles mis à jour.

Getting specific appearance using Themes

Avec AEM Forms et le thème de la zone de travail prête à l’emploi par défaut, il existe de nombreux autres thèmes. Si vous souhaitez concevoir votre formulaire ou communication interactive à 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 ou à votre communication interactive.
Ne modifiez pas les thèmes disponibles dans le dossier Bibliothèque de thèmes. Ce dossier contient des thèmes système. Toute modification apportée à ces thèmes est remplacée lors de l’installation d’une version plus récente ou d’un correctif logiciel d’AEM Forms.

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

  • Publier/annuler la publication d’un formulaire : Lors de la publication d’un formulaire, le thème appliqué est également publié (s’il n’est pas déjà publié).
  • Importer/Exporter un formulaire : Lors de l’importation ou de l’exportation d’un formulaire, son thème associé est également importé ou exporté automatiquement.
  • Références d’un formulaire : La section Fait référence dans les références de formulaire contient une entrée supplémentaire pour le thème.
  • Heure de la dernière modification d’un formulaire : Mis à jour lorsque le thème associé est modifié.
  • Tests A/B : Vous pouvez appliquer un thème différent à deux versions du formulaire dans les tests A/B. Les informations des deux thèmes sont stockées individuellement stockées sur les deux conteneurs de guide.

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é. Lorsque vous définissez le style d’un composant générique, plusieurs composants intégrés sont également mis en forme. Par exemple, lorsque vous définissez le style d’un champ, la zone de texte et l’étiquette qu’elle contient sont également mises en forme. Lorsque vous mettez en forme la zone de texte dans le champ, elle obtient son propre CSS. Si vous souhaitez déboguer le CSS généré pour le champ et le composant, l’éditeur de thème fournit des options qui vous permettent d’afficher le CSS.
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 AFFICHAGE CSS dans la barre latérale. It shows the generated CSS, including CSS for ::before and ::after pseudo elements.
  • Option 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 > 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.

Dépannage, recommandations et bonnes pratiques

  • Eviter les ressources d’un autre thème
    Lorsque vous modifiez un thème, vous pouvez parcourir et ajouter des ressources (telles que des images) à partir d’autres de. Par exemple, vous pouvez modifier l’arrière-plan d’une page. For example, when you select Page > Background > Add > Image , you see a dialog that lets you browse and add images in other theme.
  • 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.
  • Utilisation de la bibliothèque de clients de base, de l’éditeur de thème et de la mise en forme intégrée
    • Base clientlib :
      La bibliothèque cliente de base contient des informations de style. Pour utiliser des informations de mise en forme dans les bibliothèques côté client des thèmes.
      1. Accédez à Experience Manager > Formulaires > Thèmes .
      2. Dans la page Thèmes, sélectionnez un thème, puis cliquez sur Afficher les propriétés .
      3. Dans la page des propriétés qui s’ouvre, cliquez sur Avancé .
      4. Dans le champ Emplacement de la bibliothèque client de l’onglet Avancé, recherchez et sélectionnez la bibliothèque client à utiliser.
      5. Cliquez sur Save (Enregistrer).
      La mise en forme que vous spécifiez dans la bibliothèque client est importée dans le thème qui l’utilise. Par exemple, vous spécifiez mise en page pour la zone de texte, la zone numérique et le basculement dans la bibliothèque client. Lorsque vous importez votre bibliothèque client dans le thème, la mise en page pour la zone de texte, la zone numérique et le basculement dans la bibliothèque client. Vous pouvez alors mettre en forme d’autres composants à l’aide de l’éditeur de thème. Vous pouvez également créer un thème, créer des copies de ce thème, puis modifiez la mise en forme fournie dans les thèmes copiés pour des cas d’utilisation similaires. Voir Obtention d’un aspect spécifique à l’aide des thèmes
    • Éditeur de thème:
      L’éditeur de thème vous permet de créer des pour mettre en forme votre formulaire ou votre communication interactive. Vous pouvez spécifier le style de composants dans un thème, ce qui permet d’assurer la cohérence de l’apparence parmi les multiples formulaires ou communications interactives que vous développez. Il est recommandé de spécifier des informations de style dans un thème, puis d’appliquer le thème à un formulaire.
    • Style en ligne :
      Vous pouvez mettre en forme des composants à l’aide du mode Style dans un éditeur de formulaire ou de communication interactive multicanal lorsque vous travaillez avec un formulaire. L’utilisation du mode Style pour modifier la mise en forme d’un composant de formulaire remplace la mise en forme indiquée dans le thème. Si vous choisissez de modifier le style de certains composants d’un formulaire spécifique, voir Style intégré de composants .
  • Utilisation des bibliothèques côté client
    If you want to create client libraries to import styling information, see Using Client Side Libraries . Après avoir créé une bibliothèque client, vous pouvez l’importer dans votre thème à l’aide des étapes mentionnées ci-dessus.
  • Modification de la largeur de disposition du panneau du
    Il n’est pas recommandé de modifier la largeur de disposition du panneau du. Lorsque vous spécifiez la largeur d’un panneau de contenu, il devient statique et ne s’adapte pas aux différents affichages.
  • Quand utiliser l’éditeur de formulaire ou l’éditeur de thème pour travailler avec l’en-tête et le pied de page
    Utilisez l’éditeur de thème si vous souhaitez mettre en forme l’en-tête et le pied de page à l’aide d’options de style telles que le style de police, l’arrière-plan et la transparence. Si vous souhaitez fournir des informations comme une image de logo, le nom de l’entreprise dans l’en-tête et des informations de copyright dans le pied de page, utilisez les options de l’éditeur de formulaire.