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 le 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 :

    <%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.

    • Dans Xcode, accédez à Capture > www > wsmobile > css.
    • Dans Eclipse, accédez à ressources > 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 et fermez le fichier _style.css.

  11. Ouvrez l’application AEM Forms.

    L’application AEM Forms affiche maintenant les instructions à la place de la description.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now