DocumentationAEM 6.4Guide de Forms

Personnaliser le thème theme-customization

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • User
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Vous pouvez personnaliser le code HTML et le fichier CSS pour personnaliser l’organisation et l’aspect de l’application AEM Forms. Vous pouvez, par exemple, modifier la couleur du fond d’écran ainsi que la hauteur des tâches ou des points de départ. L’exemple suivant fournit des instructions de modification :

  • Afficher les instructions au lieu de la description
  • nombre d’itinéraires d’affichage
  • dégradé de fond

Étapes steps

  1. Ouvrez votre projet.

    • Pour iOS, ouvrez Capture.xcodeproj dans Xcode.
    • Pour Android, ouvrez le projet Android dans Eclipse.
    • Pour Windows, ouvrez MWSWindows.sln dans Visual Studio.

  2. Naviguez jusqu’au dossier des modèles.

    • Dans Xcode, accédez au dossier  Capture > www > wsmobile > js > runtime > templates.
    • Dans Eclipse, accédez au dossier assets > www > wsmobile > js > runtime > templates.
    • Dans Visual Studio, accédez au dossier MWSWindows > www > wsmobile > js > runtime > templates.

  3. Ouvrez le fichier template.html pour le modifier.

  4. Recherchez la chaîne suivante :

    code language-none 
    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
               <div class="description_details">
                 <%= task.description %>
               </div>
              <%} else

    Remplacez-la par <%.

  5. Rercherchez le code suivant dans le fichier template.html :

    code language-none 
    <ul id="task_menu_list">
                                <li class="approve" title="<%= task.availableCommands.directCommands[0]%>" data-routename="<%= task.availableCommands.directCommands[0]%>">
                                    <%= task.availableCommands.directCommands[0]%>
                                </li>
                                <li class="reject last" title="<%= task.availableCommands.directCommands[1]%>" data-routename="<%= task.availableCommands.directCommands[1]%>">
                                    <%= task.availableCommands.directCommands[1]%>
                                </li>

  6. Mettez la ligne suivante en commentaire et enregistrez le fichier.

    code language-none 
    task.availableCommands.directCommands[1]%>">
<%= task.availableCommands.directCommands[1]%>
</li>

  7. Accédez au dossier css.

    • Dans Xcode, accédez à  Capture > www > wsmobile > css.
    • Dans Eclipse, accédez à assets > www > wsmobile > css.
    • Dans Visual Studio, accédez à MWSWindows > www > wsmobile > css.

  8. Ouvrez le fichier _style.css pour le modifier.

  9. Pour l’image d’arrière-plan, remplacez #323232 par #fff.

  10. Enregistrez les modifications apportées, puis fermez le fichier _style.css.

  11. Ouvrez l’application AEM Forms.

    L’application AEM Forms affiche désormais des instructions au lieu d’une description.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da