DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Utilisation de thèmes pour appliquer un style à des composants principaux basés sur le Forms adaptatif themes-for-af-using-core-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Utilisateur ou utilisatrice
  • Développeur
Version
Lien de l’article
AEM 6.5
Cliquez ici
AEM as a Cloud Service
Cet article

Vous pouvez créer et appliquer des thèmes pour mettre en forme un formulaire adaptatif. Un thème contient des détails de style pour les composants et les panneaux. Ces styles incluent des 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. Un thème est géré indépendamment sans référence à un formulaire adaptatif et peut être réutilisé dans plusieurs formulaires adaptatifs.

Dans cet article, nous comprenons comment concevoir des recherches personnalisées pour le Forms adaptatif basé sur les composants principaux à l’aide de thèmes.

Thèmes disponibles pour le style des composants principaux

Forms comme le fournit Cloud Service, les thèmes répertoriés ci-dessous pour le Forms adaptatif basé sur les composants principaux :

Comprendre la structure des thèmes

Un thème est un module qui inclut des composants de style tels que le fichier CSS, les fichiers JavaScript et les ressources (comme les icônes) qui définissent le style de votre Forms adaptatif. Un thème de formulaire adaptatif suit une organisation spécifique composée des composants suivants :

  • src/theme.scss : ce dossier comprend le fichier CSS qui a un large impact sur l’ensemble du thème. Il sert d’emplacement centralisé pour définir et gérer le style et le comportement de votre thème. En apportant des modifications à ce fichier, vous pouvez apporter des modifications appliquées de manière universelle à l’ensemble du thème, en influençant l’aspect et les fonctionnalités de vos pages de formulaires adaptatifs et d’AEM Sites.

  • src/site : ce dossier contient des fichiers CSS qui sont appliqués à l’ensemble de la page d’un site AEM. Ces fichiers se composent de code et de styles qui affectent la fonctionnalité globale et la disposition de la page de votre site AEM. Toutes les modifications apportées ici sont répercutées sur toutes les pages de votre site. [Quand l'utiliser ?]

  • src/components : les fichiers CSS de ce dossier sont conçus pour des composants principaux d’AEM individuels. Chaque dossier dédié d’un composant comprend un fichier .scss qui met en forme ce composant particulier dans un formulaire adaptatif. Par exemple, le fichier /src/components/accordion/_accordion.scss contient des informations de style pour le composant d’accordéon Adaptive Forms.

    Structure de thème basée sur un formulaire adaptatif

  • src/resources : ce dossier contient des fichiers statiques tels que des icônes, des logos et des polices. Ces ressources sont utilisées pour améliorer les éléments visuels et la conception globale de votre thème.

Créer un thème

Forms comme le fournit Cloud Service, les thèmes de style de formulaire adaptatif répertoriés ci-dessous pour les composants principaux basés sur le Forms adaptatif.

Vous pouvez personnaliser n’importe lequel de ces thèmes pour créer un nouveau thème.

Workflow de personnalisation de thème

Personnaliser un thème customize-a-theme-core-components

La personnalisation d’un thème fait référence au processus de modification, de mise en forme et de personnalisation de l’aspect d’un thème. Lorsque vous personnalisez un thème, vous apportez des modifications à ses éléments de conception, à sa disposition, à ses couleurs, à sa typographie et parfois au code sous-jacent. Il vous permet de créer un aspect unique et personnalisé pour votre site web ou votre application tout en conservant la structure et les fonctionnalités de base fournies par le thème.

Conditions préalables prerequisites-to-customize

  • Familiarisez-vous avec la configuration d’un pipeline dans Cloud Manager et posséder des connaissances de base sur la configuration d’un pipeline vous aide à gérer et déployer efficacement vos personnalisations de thème.
  • Découvrez comment configurer un utilisateur avec le rôle de contributeur. Comprendre comment configurer un utilisateur avec le rôle de contributeur vous permet d’accorder les autorisations nécessaires à la personnalisation du thème.
  • Installation de la dernière version d’Apache Maven. Apache Maven est un outil d’automatisation de création couramment utilisé dans les projets Java™. L’installation de la dernière version vous garantit les dépendances nécessaires à la personnalisation du thème.
  • Installez un éditeur de texte brut. Par exemple, Microsoft® Visual Studio Code. L’utilisation d’un éditeur de texte brut tel que Microsoft® Visual Studio Code fournit un environnement convivial pour la création et la modification de fichiers de thème.

Configuration de votre environnement

Après avoir appris les conditions préalables requises et configuré l’environnement de développement, vous êtes bien préparé à commencer à personnaliser ou à mettre en forme votre thème en fonction de vos besoins spécifiques.

Personnaliser un thème steps-to-customize-a-theme-core-components

La personnalisation d’un thème est un processus à plusieurs étapes. Pour personnaliser le thème, effectuez les étapes dans l’ordre indiqué :

  1. Cloner un thème
  2. Nom d’un thème
  3. Personnaliser un thème
  4. Test d’un thème
  5. Déploiement d’un thème

Les exemples fournis dans le document sont basés sur le thème Canevas, mais il est important de noter que vous pouvez cloner n’importe quel thème et le personnaliser à l’aide des mêmes instructions. Ces instructions s’appliquent à n’importe quel thème, ce qui vous permet de modifier des thèmes en fonction de vos besoins spécifiques.

Commençons par un processus de création d’une expérience de marque pour votre Forms adaptatif basé sur les composants principaux à l’aide de thèmes ?

1. Cloner un thème download-a-theme-core-components

Pour cloner un thème pour les formulaires adaptatifs basés sur les composants principaux, choisissez l’un des thèmes suivants :

Pour cloner un thème, suivez les instructions suivantes :

  1. Ouvrez l’invite de commande ou la fenêtre de terminal dans votre environnement de développement local.

  2. Exécutez la commande git clone pour cloner un thème.

    code language-none 
       git clone [Path of Git Repository of the theme]

    Remplacez le [chemin du référentiel Git du thème] par l’URL réelle du référentiel Git correspondant du thème.

    Par exemple, pour cloner le thème Zone de travail, exécutez la commande suivante :

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

    Une fois la commande exécutée correctement, vous disposez d’une copie locale du thème disponible sur votre ordinateur dans le dossier aem-forms-theme-canvas.

2. Nom d’un thème set-name-of-theme

  1. Ouvrez le dossier de thèmes dans votre IDE. Par exemple, pour ouvrir le dossier aem-forms-theme-canvas dans l’éditeur de code Visual Studio.

  2. Accédez au dossier aem-forms-theme-canvas.

  3. Exécutez la commande suivante :

    code language-none 
       code .

    Ouvrez le dossier de thème dans un éditeur de texte brut

    Le dossier s’ouvre dans le code Visual Studio.

  4. Ouvrez le fichier package.json en mode d’édition.

  5. Définissez les valeurs des attributs name et version.

    Modification de l’image du nom du thème du canevas

    note note
    NOTE
    • L’attribut name est utilisé pour identifier de manière unique le thème, et le nom spécifié s’affiche dans l’onglet Style de l’ assistant de création de formulaire.
    • Vous avez la possibilité de sélectionner un nom pour votre thème en fonction de votre choix, par exemple, mytheme ou customtheme. Cependant, dans ce cas, nous avons spécifié le nom aem-forms-wknd-theme.

  6. Ouvrez le fichier package-lock.json en mode d’édition.

  7. Définissez les valeurs des attributs name et version. Assurez-vous que les valeurs des attributs name et version du fichier Package-lock.json correspondent à celles du fichier Package.json.

    Modification de l’image du nom du thème du canevas

  8. (Facultatif) Ouvrez le fichier ReadMe pour le modifier et mettez à jour le nom du thème.

    Modification de l’image du nom du thème du canevas

  9. Enregistrez et fermez les fichiers.

Considérations lors de la définition du nom du thème

  • Il est obligatoire de supprimer le @aemforms du nom du thème dans le fichier Package.json et le fichier Package-lock.json. Si vous ne parvenez pas à supprimer @aemforms de votre nom de thème personnalisé, le pipeline front-end échoue pendant le déploiement du thème.
  • Il est recommandé de mettre à jour le thème version dans le fichier Package.json et le fichier Package-lock.json afin de refléter précisément les modifications et améliorations au fil du temps pour votre thème.
  • Pour obtenir des informations importantes sur l’utilisation, les instructions d’installation et d’autres détails pertinents, il est recommandé de mettre à jour le nom du thème dans le fichier ReadMe.

3. Personnaliser un thème customize-the-theme

Vous pouvez personnaliser des composants individuels ou effectuer des modifications au niveau du thème à l’aide de variables globales d’un thème. Toutes les modifications apportées aux variables globales affectent tous les composants individuels. Vous pouvez, par exemple, utiliser des variables globales pour modifier la couleur de bordure de tous les composants d’un formulaire adaptatif et une couleur de fond claire pour définir CTA (Appel à l’action) à l’aide du composant de bouton :

Définir des styles de niveau de thème theme-customization-global-level

Le fichier variable.scss contient les variables globales du thème. En mettant à jour ces variables, vous pouvez apporter des modifications liées au style au niveau du thème. Pour appliquer des styles au niveau du thème, procédez comme suit :

  1. Ouvrez le fichier <your-theme-sources>/src/site/_variables.scss en mode d’édition.

  2. Modifiez la valeur de n’importe quelle propriété. Par exemple, la couleur d’erreur par défaut est red. Pour modifier la couleur d’erreur de red à blue, modifiez le code hexadécimal de couleur de $errorvariable. Par exemple, $error: #196ee5.

  3. Enregistrez et fermez le fichier.

    Modifier le thème

De même, vous pouvez utiliser la variable variable.scss pour définir la famille et le type de polices, les couleurs du thème et de la police, la taille de la police, l’espacement des thèmes, l’icône d’erreur, les styles de bordure du thème et d’autres variables ayant un impact sur plusieurs composants de formulaire adaptatif.

Définir des styles de niveau de composant component-based-customization

Vous pouvez également modifier la police, la couleur, la taille et d’autres propriétés CSS d’un composant principal de formulaire adaptatif spécifique. Par exemple, bouton, case à cocher, conteneur, pied de page, etc. Vous pouvez mettre en forme un bouton ou une case à cocher en modifiant le fichier CSS du composant spécifique afin de l’aligner sur le style de votre entreprise. Pour personnaliser le style d’un composant :

  1. Ouvrez le fichier <your-theme-sources>/src/components/<component>/<component.scss> pour le modifier. Par exemple, pour modifier la couleur de police du composant de bouton, ouvrez le fichier <your-theme-sources>/src/components/button/button.scss.

  2. Modifiez la valeur de n’importe quelle variable selon vos besoins. Par exemple, pour modifier la couleur du composant de bouton lorsque vous passez le curseur sur green, remplacez la valeur de la propriété color: $white de la classe cmp-adaptiveform-button__widget:hover par le code hexadécimal #12B453 ou toute autre nuance de green. Le code final ressemble à ce qui suit :

    code language-none 
    .cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}

  3. Enregistrez et fermez le fichier.

    Modifier la zone de texte du CSS

    Lorsqu’un style est défini au niveau du thème et du composant, le style défini au niveau du composant est prioritaire.

4. Tester un thème personnalisé test-the-theme

Pour prévisualiser et tester les modifications dans l’environnement local et personnaliser le thème en fonction des exigences des différents composants d’AEM, procédez comme suit :

4.1. Configuration d’un environnement local à des fins de test rename-env-file-theme-folder

  1. Ouvrez le dossier de thèmes dans votre IDE. Par exemple, ouvrez le dossier aem-forms-theme-canvas dans l’éditeur de code Visual Studio.

  2. Renommez le fichier env_template en fichier .env dans le dossier theme et ajoutez les paramètres suivants :

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    Par exemple, l’URL du formulaire est http://localhost:4502/editor.html/content/forms/af/contactusform.html. Ainsi, les valeurs de :

    • AEM_URL = http://localhost:4502/
    • AEM_ADAPTIVE_FORM = contactusform

  3. Enregistrez le fichier.

    Structure du thème de zone de travail

4.2 Test du thème à l’aide d’un environnement local start-a-local-proxy-server

  1. Accédez à la racine du dossier de thème. Dans ce cas, le nom du dossier de thème est aem-forms-theme-canvas.

  2. Ouvrez l’invite de commande ou le terminal.

  3. Exécutez npm install pour installer les dépendances.

  4. Exécutez npm run live pour prévisualiser le formulaire avec le thème mis à jour dans votre navigateur local.

    note note
    NOTE
    Si une erreur se produit lors de l'exécution de la commande npm run live, exécutez les commandes suivantes avant la commande npm run live :
    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

C'est un déploiement brûlant. Ainsi, chaque fois que vous effectuez des modifications et que vous enregistrez les fichiers _variables.scss et button.scss, le serveur sélectionne automatiquement les modifications et prévisualise la dernière sortie. La ligne [Browsersync] File event [change] signifie que le serveur a reconnu les dernières modifications et qu’il déploie les modifications dans l’environnement local.

Proxy browsersync

Après avoir suivi les exemples de mise en forme d’un formulaire adaptatif (composants principaux) au niveau du thème et au niveau du composant pour les personnalisations du thème, les messages d’erreur d’un formulaire adaptatif sont modifiés en couleur blue, tandis que la couleur du libellé du composant de bouton passe à green lors du survol.

Aperçu du style de niveau de thème

Exemple : couleur d’erreur définie sur bleu

Aperçu du style au niveau du composant

Exemple : jeu de couleurs de survol sur vert

La personnalisation d’un thème permet de concevoir des recherches personnalisées pour le Forms adaptatif basé sur les composants principaux en fonction des besoins de l’organisation.

Tester le thème pour les formulaires hébergés dans un environnement de Cloud Service

Vous pouvez également tester le thème du formulaire adaptatif hébergé sur votre instance as a Cloud Service AEM Forms. Pour configurer et définir l’environnement local pour tester les thèmes avec la Forms adaptative hébergée sur l’instance cloud, procédez comme suit :

  1. Ouvrez le dossier de thèmes dans votre IDE. Par exemple, ouvrez le dossier aem-forms-theme-canvas dans l’éditeur de code Visual Studio.

  2. Renommez le fichier env_template en fichier .env et ajoutez les paramètres suivants :

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    Par exemple, l’URL du formulaire dans l’environnement cloud est https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html. Ainsi, les valeurs de :

    • AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
    • AEM_ADAPTIVE_FORM = contactusform

  3. Enregistrez le fichier.

  4. Créez un utilisateur local.

    note note
    NOTE
    Pour créer un utilisateur local :
    • Accédez à AEM Accueil > Outils > Sécurité > Utilisateurs .
    • Assurez-vous que l’utilisateur est membre du groupe forms-users.

  5. Accédez à la racine du dossier de thème. Dans ce cas, le nom du dossier de thème est aem-forms-theme-canvas.

  6. Exécutez npm run live et vous êtes redirigé vers un navigateur local.

  7. Cliquez sur SIGN IN LOCALLY (ADMIN TASKS ONLY) et connectez-vous en utilisant les informations d’identification de l’utilisateur local.

Vous pouvez prévisualiser le formulaire adaptatif avec les dernières modifications. Une fois que vous êtes satisfait des modifications effectuées dans un dossier de thèmes, déployez le thème dans votre environnement AEM Cloud Service à l’aide du pipeline frontal.

5. Déployer un thème deploy-the-theme

Pour déployer le thème dans votre environnement de Cloud Service à l’aide du pipeline frontal :

5.1 Création d’un référentiel pour le thème create-a-new-theme-repo

Vous avez besoin d’un référentiel pour déployer le thème. Connectez-vous à votre référentiel AEM Cloud Manager et ajoutez un nouveau référentiel pour votre thème.

  1. Créez un référentiel pour un thème en cliquant sur Référentiels > Ajouter un référentiel.

    Créer un nouveau référentiel de thème .

  2. Spécifiez le nom du référentiel dans la boîte de dialogue Ajouter un référentiel. Par exemple, le nom fourni est custom-canvas-theme-repo.

  3. Cliquez sur Enregistrer.

    Ajoutez un référentiel de thème pour la zone de travail .

  4. Cliquez sur Copier l’URL du référentiel pour copier l’URL du référentiel.

    URL du thème de la zone de travail .

    note note
    NOTE
    • Vous pouvez utiliser un seul référentiel pour plusieurs thèmes.
    • Pour déployer différents thèmes, vous devez créer des pipelines front-end distincts.
    • Par exemple, vous pouvez utiliser le même référentiel, comme custom-canvas-theme-repo, pour le thème Canevas, le thème WKND et le thème EASEL. Toutefois, pour déployer les thèmes, vous devez créer des pipelines front-end distincts. Les futures personnalisations pour un thème spécifique sont déployées à l’aide du pipeline front-end correspondant.
5.2. Envoyez les modifications au référentiel. committing-the-changes

Maintenant, envoyez les modifications au référentiel de thème de votre Cloud Service AEM Forms.

  1. Accédez à la racine du dossier de thème. Dans ce cas, le nom du dossier de thème est aem-forms-theme-canvas.

  2. Ouvrez l’invite de commande ou le terminal.

  3. Exécutez la commande suivante dans l’ordre indiqué :

    code language-none 
    git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]

    Par exemple :

    code language-none 
    git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo

    Modifications validées

5.3 Exécution du pipeline front-end run-a-frontend-pipeline

Le thème est déployé à l’aide du pipeline front-end .. Pour déployer le thème, procédez comme suit :

  1. Connectez-vous à votre référentiel AEM Cloud Manager.

  2. Cliquez sur le bouton Ajouter de la section Pipelines .

  3. Sélectionnez Ajouter un pipeline hors production ou Ajouter un pipeline de production en fonction de l’environnement du Cloud Service. Par exemple, ici l’option Ajouter un pipeline de production est sélectionnée.

  4. Dans la boîte de dialogue Ajouter un pipeline de production dans le cadre des étapes Configuration, spécifiez le nom de votre pipeline. Par exemple, le nom du pipeline est customcanvastheme.

  5. Cliquez sur Continuer.

  6. Sélectionnez les options Déploiement ciblé > Code front-end dans
    les étapes Code Source.

  7. Sélectionnez les valeurs Repository et Git Branch qui présentent vos dernières modifications. Par exemple, ici, le nom de référentiel sélectionné est custom-canvas-theme-repo et la branche Git est main.

  8. Sélectionnez Emplacement du code comme / si vos modifications sont présentes dans le dossier racine.

  9. Cliquez sur Enregistrer.
    créer un pipeline d’entrée front-end

    Une fois la configuration du pipeline terminée, la carte d’appel à l’action est mise à jour.

  10. Cliquez avec le bouton droit sur le pipeline créé.

  11. Cliquez sur Exécuter .

    run-a-pipeline

Une fois la génération terminée, le thème est disponible dans l’instance d’auteur pour l’utilisation. Il apparaît sous l’onglet Style de l’assistant de création de formulaire adaptatif, lors de la création d’un formulaire adaptatif.

thème personnalisé disponible sous l’onglet Style

Le thème personnalisé permet de créer une expérience de marque pour le Forms adaptatif basé sur les composants principaux.

Appliquer un thème à un formulaire adaptatif using-theme-in-adaptive-form

Les étapes à suivre pour appliquer un thème à un formulaire adaptatif sont les suivantes :

  1. Connectez-vous à votre instance de création AEM Forms.

  2. Sélectionnez Adobe Experience Manager > Formulaires > Formulaires et documents.

  3. Cliquez sur Créer > Formulaires adaptatifs. L’assistant de création de formulaires adaptatifs s’ouvre.

  4. Sélectionnez le modèle de composant principal dans l’onglet Source.

  5. Sélectionnez le thème dans l’onglet Style .

  6. Cliquez sur Créer.

Les thèmes de formulaire adaptatif sont utilisés dans le cadre d’un modèle de formulaire adaptatif pour définir le style lors de la création d’un formulaire adaptatif.

Bonnes pratiques best-practices

  • Éviter les ressources 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 la Page bouton de modification > Arrière plan > Ajoutez > 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.

  • Modification de la largeur de disposition du panneau conteneur

    Il n’est pas recommandé de modifier la largeur de disposition du panneau conteneur. Lorsque vous spécifiez la largeur d’un panneau de contenu, il devient statique et ne s’adapte pas aux différents affichages.

  • Utilisation d’un éditeur de formulaire ou d’un éditeur de thème pour l’utilisation de l’en-tête et du pied de page

    Utilisez un é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 telles qu’une image de logo, le nom de la société dans l’en-tête et des informations de copyright dans le pied de page, utilisez les options de l’éditeur de formulaire.

Questions fréquentes faq

Question : Quelle personnalisation est prioritaire lorsque vous effectuez des personnalisations dans un dossier de thème au niveau global et au niveau des composants ?

Réponse : Lorsque des personnalisations sont effectuées au niveau global et au niveau des composants, la personnalisation au niveau des composants est prioritaire.

Voir également see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab