DocumentationAEM 6.5Guide de l’utilisateur

Personnalisation du thème theme-customization

Last update: Fri Apr 05 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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
  • Couleur de dégradé d’arrière-plan

É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-jsp 
    <%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-jsp 
    <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-jsp 
    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
19ffd973-7af2-44d0-84b5-d547b0dffee2