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.
Un thème de formulaire adaptatif ne doit pas être confondu avec les modèles de formulaire adaptatif. Les thèmes de formulaire adaptatif contiennent uniquement les informations de style d’un formulaire adaptatif. Les modèles de formulaire adaptatif définissent la structure du formulaire et le contenu initial et contiennent un thème afin de permettre la création de formulaire adaptatif.
Les étapes à suivre pour appliquer un thème à un formulaire adaptatif sont les suivantes :
Connectez-vous à votre instance de création AEM Forms.
Appuyez sur Adobe Experience Manager > Formulaires > Formulaires et documents.
Cliquez sur Créer > Formulaires adaptatifs. L’assistant de création de formulaires adaptatifs s’ouvre.
Sélectionnez le modèle de composant principal dans l’onglet Source.
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.
Sélectionnez le thème Zone de travail dans l’onglet Style.
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.
Pour personnaliser un thème :
Pour personnaliser un 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
L’onglet Style de l’assistant de création de formulaire affiche le même nom de thème que dans le fichier package.json.
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’AEMsrc/resources
: fichiers statiques (icônes, logos et polices).src/site
: fichiers JavaScript et CSS qui s’appliquent à l’ensemble de la page AEM Sitessrc/theme.ts
: point d’entrée principal de votre thème JavaScript et CSSsrc\theme.scss
: fichiers JavaScript et CSS qui s’appliquent à l’ensemble du thèmeLe 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.
Mettez à jour le nom et la version du thème Zone de travail dans les fichiers package.json
et package_lock.json
.
Les noms ne doivent pas comporter de balises @aemforms
. Il doit s’agir d’un texte simple sous la forme d’un nom fourni par l’utilisateur ou l’utilisatrice.
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
Dans la ligne de commande, accédez à la racine du thème sur votre ordinateur local.
Exécutez npm install
pour que npm récupère les dépendances et installe le projet.
Exécutez npm run live
et le serveur proxy démarre.
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.
http://localhost:[port]/
dans le fichier .env
du thème Zone de travail, cela vous redirige directement vers le navigateur.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.
/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.
Dans l’éditeur, ouvrez le fichier <your-theme-sources>/src/site/_variables.scss
.
Vous pouvez appliquer un style à tous les composants de formulaire adaptatif d’un site directement en modifiant le fichier site/_variables.scss
.
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.
Lorsque vous enregistrez le fichier, le serveur proxy reconnaît la modification via la ligne [Browsersync] File event [change]
.
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.
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 :
Créez un référentiel de thèmes en cliquant sur l’option Référentiels.
.
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.
.
Cliquez sur Copier l’URL du référentiel pour copier l’URL du référentiel créé.
.
Ouvrez l’invite de commande et clonez le référentiel cloud créé ci-dessus.
git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
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]
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
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.
À l’avenir, si vous apportez des modifications au dossier du thème de la zone de travail, vous devrez réexécuter le pipeline ci-dessus. Par conséquent, il est nécessaire de mémoriser le nom du pipeline.
.env
dans le dossier du thème et ajoutez des paramètres : URL AEM, AEM_ADAPTIVE_FORM et AEM_PROXY_PORT.red
et enregistrez les modifications.Une fois le pipeline exécuté, le thème est disponible sous l’onglet Style.
É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.