Thèmes dans les formulaires adaptatifs (composants principaux)

Vous pouvez créer et appliquer des thèmes pour styliser un formulaire adaptatif avec des composants principaux. 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. Le thème est géré indépendamment sans référence à un formulaire adaptatif.

Lorsque vous créez un formulaire adaptatif avec des composants principaux, les thèmes prêts à l’emploi apparaissent sous l’onglet Style. Par défaut, seul le thème Zone de travail est disponible.

Utilisation du thème Zone de travail dans les formulaires adaptatifs avec des composants principaux

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. Appuyez sur 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.

   REMARQUE

   Lorsque vous créez un formulaire adaptatif avec des composants principaux, le thème Zone de travail s’affiche sous l’onglet Style. Il s’agit du seul thème prêt à l’emploi disponible à ce moment. Mais vous pouvez le modifier à votre convenance et l’enregistrer pour une utilisation ultérieure en configurant un pipeline frontend.

5. Sélectionnez le thème Zone de travail 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.

Personnaliser le thème

Pour personnaliser un thème :

• Configurez un pipeline dans Cloud Manager
• Configurez un utilisateur ou une utilisatrice avec le rôle de contributeur ou contributrice
• Vous devez avoir des connaissances de base de Git et des référentiels Git Cloud Service

Pour personnaliser un thème Zone de travail :

1. Clonez le thème Zone de travail
2. Comprenez la structure du thème
3. Modifiez le nom dans package.json et package_lock.json
4. Créez le
5. Démarrer le serveur proxy local.
6. Personnaliser le thème
7. Validez les modifications
8. Déployez le pipeline

1. Cloner le thème Zone de travail

Ouvrez une invite de commande et exécutez la commande suivante pour cloner le thème de la zone de travail :

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

2. Comprendre la structure du thème

Un thème de formulaire adaptatif est un package contenant les ressources statiques, CSS et JavaScript qui définissent la mise en forme de votre formulaire et se conforment à la structure d’un thème de formulaire adaptatif. Un thème de formulaire adaptatif présente la structure suivante typique d’un projet front-end :

• src/components : fichiers JavaScript et CSS spécifiques aux composants principaux d’AEM
• src/resources : fichiers statiques (icônes, logos et polices).
• src/site : fichiers JavaScript et CSS qui s’appliquent à l’ensemble de la page AEM Sites
• src/theme.ts : point d’entrée principal de votre thème JavaScript et CSS
• src\theme.scss : fichiers JavaScript et CSS qui s’appliquent à l’ensemble du thème

Le dossier src/components comporte des fichiers JavaScript et CSS spécifiques à tous les composants principaux d’AEM tels que les boutons, cases à cocher, conteneurs, pieds de page, etc. Vous pouvez mettre en forme un bouton ou une case à cocher en modifiant le fichier CSS spécifique au composant AEM.

Pour personnaliser le thème, vous pouvez démarrer le serveur proxy local pour afficher les personnalisations du thème en temps réel en fonction du contenu AEM réel.

3. Modifier le nom des fichiers package.json et package_lock.json du thème Zone de travail

Mettez à jour le nom et la version du thème Zone de travail dans les fichiers package.json et package_lock.json.

4. Créer le fichier .env dans un dossier de thème

Créez un fichier .env dans le dossier de thème et ajoutez les paramètres suivants :

• URL d’AEM
  AEM_URL=https://[author-instance]

• Nom du site AEM
  AEM_ADAPTIVE_FORM=Form_name

• Port proxy d’AEM
  AEM_PROXY_PORT=7000

5. Démarrer un serveur proxy local

1. Dans la ligne de commande, accédez à la racine du thème sur votre ordinateur local.

2. Exécutez npm install pour que npm récupère les dépendances et installe le projet.

3. Exécutez npm run live et le serveur proxy démarre.

   

4. Appuyez ou cliquez sur CONNEXION LOCALE (TÂCHES D’ADMINISTRATION UNIQUEMENT) et connectez-vous avec les identifiants de l’utilisateur ou utilisatrice proxy fournies par l’administration AEM.

   

   REMARQUE

   • Créez un utilisateur ou une utilisatrice local(e) pour vous connecter localement. Fournissez un rôle de contributeur ou contributrice au concepteur ou à la conceptrice de thèmes.
   • Si vous spécifiez l’URL d’AEM http://localhost:[port]/ dans le fichier .env du thème Zone de travail, cela vous redirige directement vers le navigateur.

5. Une fois connecté, modifiez l’URL dans le navigateur afin qu’elle pointe vers le chemin d’accès de l’exemple de contenu que l’administrateur AEM vous a fourni.

   • Par exemple, si le chemin fourni était /content/formname.html?wcmmode=disabled, modifiez l’URL en http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

   

Accédez à un formulaire adaptatif pour afficher le thème Zone de travail appliqué à un formulaire adaptatif.

6 . Personnaliser le thème

1. Dans l’éditeur, ouvrez le fichier <your-theme-sources>/src/site/_variables.scss.

   REMARQUE

   Vous pouvez appliquer un style à tous les composants de formulaire adaptatif d’un site directement en modifiant le fichier site/_variables.scss.

2. Modifiez la variable de font colour en red.

   

   Mettre en forme les différents composants d’AEM

   Vous pouvez mettre en forme les différents composants d’un formulaire adaptatif en modifiant son fichier CSS dans l’éditeur. Il existe différents dossiers CSS pour chaque composant principal de formulaire adaptatif dans le dossier Thème de zone de travail.

   

   Pour spécifier des styles pour un composant spécifique dans l’éditeur de thèmes, vous pouvez modifier le CSS dans un dossier de thèmes. Par exemple, si vous souhaitez modifier la couleur de bordure d’un champ de zone de texte, ouvrez le fichier CSS dans l’éditeur et modifiez sa couleur de bordure.

   

3. Lorsque vous enregistrez le fichier, le serveur proxy reconnaît la modification via la ligne [Browsersync] File event [change].

   

4. En revenant à votre navigateur de serveur proxy local, la modification est immédiatement visible.

   

Le concepteur de thème prévisualise les modifications apportées au serveur proxy local et personnalise le thème en fonction des exigences des différents composants d’AEM.

Avant de valider les modifications dans le référentiel Git d’AEM, vous devez accéder à vos informations sur le référentiel Git.

7. Valider les modifications

Après avoir apporté des modifications au thème et l’avoir testé avec un serveur proxy local, validez les modifications dans le référentiel Git de votre Service Cloud AEM Forms. Cela permet aux créateurs et créatrices de formulaires adaptatifs d’accéder au thème personnalisé dans votre environnement de service Cloud Forms.

Avant de valider les modifications apportées au référentiel Git de votre Service Cloud AEM Forms, vous avez besoin d’un clone du référentiel sur votre ordinateur local. Pour cloner le référentiel :

1. Créez un référentiel de thèmes en cliquant sur l’option Référentiels.

   .

2. Cliquez sur Ajouter un référentiel et spécifiez le Nom du référentiel dans la boîte de dialogue Ajouter un référentiel. Cliquez sur Enregistrer.

   .

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

   .

4. Ouvrez l’invite de commande et clonez le référentiel cloud créé ci-dessus.

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   

5. Déplacez les fichiers du référentiel de thème que vous modifiez dans le référentiel cloud avec une commande similaire.
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   Par exemple, utilisez cette commande :
   cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. Dans le répertoire du référentiel cloud, validez les fichiers de thème dans lesquels a eu lieu le déplacement à l’aide des commandes suivantes.

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. Les personnalisations sont transmises au référentiel Git.

   

Vos personnalisations sont désormais stockées en toute sécurité dans le référentiel Git.

8. Exécuter le pipeline front-end.

1. Créez le pipeline front-end pour déployer le thème personnalisé. En savoir plus sur comment configurer un pipeline de première ligne pour déployer un thème personnalisé.
2. Exécutez le pipeline front-end créé pour déployer le dossier du thème personnalisé sous l’onglet Style de l’assistant de création de formulaires adaptatifs.

Exemple de personnalisation du thème.

1. Connectez-vous à votre instance de création AEM Forms.
2. Ouvrez un formulaire adaptatif créé à l’aide des composants principaux.
3. Démarrez le serveur proxy local à l’aide de l’invite de commande, puis cliquez sur SE CONNECTER LOCALEMENT (TÂCHES D’ADMINISTRATION UNIQUEMENT).
4. Une fois connecté, vous êtes redirigé vers le navigateur et le thème appliqué s’affiche.
5. Téléchargez le thème de la zone de travail et extrayez le dossier zip téléchargé.
6. Ouvrez le dossier zip extrait dans l’éditeur de votre choix.
7. Créez un fichier .env dans le dossier du thème et ajoutez des paramètres : URL AEM, AEM_ADAPTIVE_FORM et AEM_PROXY_PORT.
8. Ouvrez le fichier CSS de la zone de texte dans le dossier du thème de la zone de travail et modifiez la couleur de sa bordure pour indiquer red et enregistrez les modifications.
9. Ouvrez à nouveau le navigateur et vous verrez que les modifications sont répercutées immédiatement dans un formulaire adaptatif.
10. Déplacez le dossier du thème de la zone de travail dans votre référentiel cloné.
11. Validez les modifications et exécutez le pipeline front-end.

Une fois le pipeline exécuté, le thème est disponible sous l’onglet Style.

Bonnes pratiques

• É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  > 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.

Ressources Business.Adobe.com