Personnaliser le thème theme-customization

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