DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Thèmes dans Forms adaptatif themes-for-af-using-core-components

Last update: Fri Apr 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
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.

Thèmes disponibles

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 package qui englobe le fichier CSS, les fichiers JavaScript et les ressources (comme les icônes) qui définissent le style de votre formulaire 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 répertoriés ci-dessous pour le Forms adaptatif basé sur les composants principaux.

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 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

  • Se familiariser avec 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 configuration d’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 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. Clonage d’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 reposent sur la variable Canevas mais il est important de noter que vous pouvez cloner n’importe quel thème et le personnaliser en suivant les 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.

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 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ème dans un éditeur de texte brut. Par exemple, pour ouvrir la 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 de la variable name et version attributs.

    Image de changement du nom du thème de la zone de travail

    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 la variable Style de la Assistant de création de formulaires.
    • 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 comme aem-forms-wknd-theme.

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

  7. Définissez les valeurs de la variable name et version attributs. Assurez-vous que les valeurs de la variable name et version dans le Package-lockLe fichier .json correspond à ceux du fichier Package.json fichier .

    Image de changement du nom du thème de la zone de travail

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

    Image de changement du nom du thème de la zone de travail

  9. Enregistrez et fermez les fichiers.

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

  • Il est obligatoire de supprimer la variable @aemforms du nom du thème dans Package.json et Package-lock.json fichier . Si vous ne supprimez pas @aemforms à partir de votre nom de thème personnalisé, le pipeline frontend échoue pendant le déploiement du thème.
  • Il est recommandé de mettre à jour le thème version in Package.json et Package-lock.json afin de refléter précisément les modifications et améliorations apportées au fil du temps à 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 ReadMe fichier .

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

La variable 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 to blue, modifiez le code hexadécimal de couleur de la propriété $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 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 la souris sur green, modifiez la valeur de la variable color: $white dans la propriété cmp-adaptiveform-button__widget:hover classe en 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ème dans un éditeur de texte brut. Par exemple, ouvrez le aem-forms-theme-canvas dans l’éditeur de code Visual Studio.

  2. Renommez la variable env_template vers .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 de l’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écuter npm install pour installer les dépendances.

  4. Exécuter 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 variable npm run live , exécutez les commandes suivantes avant npm run live command :
    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

C'est un déploiement brûlant. Ainsi, chaque fois que vous apportez des modifications et enregistrez la variable _variables.scss et button.scss fichiers, 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 fournis aux niveaux de thème et de composant pour les personnalisations de thème, les messages d’erreur d’un formulaire adaptatif sont modifiés en blue tandis que la couleur de l’étiquette du composant de bouton est remplacée par green au survol.

Prévisualiser le style du niveau du thème

Exemple : couleur d’erreur définie sur bleu

Aperçu du style au niveau du composant

Exemple : couleur de survol définie sur vert

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ème dans un éditeur de texte brut. Par exemple, ouvrez le aem-forms-theme-canvas dans l’éditeur de code Visual Studio.

  2. Renommez la variable env_template vers .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 à Accueil AEM > Outils > Sécurité > Utilisateurs .
    • Assurez-vous que l’utilisateur est membre du forms-users groupe.

  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écuter npm run live et vous êtes redirigé vers un navigateur local.

  7. Cliquez sur SIGN IN LOCALLY (ADMIN TASKS ONLY) et se connecter à l’aide des 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 à 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 le 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 la variable Nom du référentiel dans le Ajouter un référentiel de la boîte de dialogue 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 de la fonction 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 Ajouter à partir du bouton Pipelines .

  3. Sélectionner Ajout d’un pipeline hors production ou Ajout d’un pipeline de production selon l’environnement du Cloud Service. Par exemple, ici, la variable Ajout d’un pipeline de production est sélectionnée.

  4. Dans le Ajout d’un pipeline de production dans la boîte de dialogue Configuration , indiquez le nom de votre pipeline. Par exemple, le nom du pipeline est customcanvastheme.

  5. Cliquez sur Continuer.

  6. Sélectionnez la variable Déploiement ciblé > le Code front-end , dans la variable Code source étapes.

  7. Sélectionnez la variable Référentiel et la variable Branche Git qui présentent vos dernières modifications. Par exemple, ici, le nom du référentiel sélectionné est custom-canvas-theme-repo et la branche Git est main.

  8. Sélectionnez la variable Emplacement du code as /, si vos modifications sont présentes dans le dossier racine.

  9. Cliquez sur Enregistrer.
    création d’un pipeline 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 le Style dans 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

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 le 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.

  • Utiliser l’éditeur de formulaires ou l’éditeur de thèmes pour travailler sur l’en-tête et le pied de page.

    Utilisez l’éditeur de thèmes 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 formulaires.

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