Show Menu
SUJETS×

Personnalisation du thème

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 donne des instructions pour modifier les paramètres suivants :
  • Afficher les instructions au lieu de la description
  • nombre d’itinéraires d’affichage
  • dégradé de couleur d’arrière-plan

Étapes

  1. Ouvrez votre projet.
    • For iOS, open Capture.xcodeproj in Xcode
    • Pour Android, ouvrez le projet Android dans Eclipse.
    • For Windows, open MWSWindows.sln in Visual Studio.
  2. Naviguez jusqu’au dossier des modèles.
    • In Xcode, navigate to the Capture > www > wsmobile > js > runtime > templates folder.
    • In Eclipse, navigate to the assets > www > wsmobile > js > runtime > templates folder.
    • In Visual Studio, navigate to the MWSWindows > www > wsmobile > js > runtime > templates folder.
  3. Open the template.html file for editing.
  4. Recherchez la chaîne suivante :
    <%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  :
    <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.
    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
    
  7. Accédez au dossier css.
    • In Xcode, navigate to Capture > www > wsmobile > css .
    • In Eclipse, navigate to assets > www > wsmobile > css .
    • In Visual Studio, navigate to MWSWindows > www > wsmobile > css .
  8. Open the _style.css file for editing.
  9. For Background image, change #323232 to #fff .
  10. Save the changes and close _style.css file.
  11. Ouvrez l’application AEM Forms.
    L’application AEM Forms affiche maintenant les instructions à la place de la description.