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 > modèles.
    • Dans Eclipse, accédez au dossier ressources > www > wsmobile > js > runtime > modèles.
    • Dans Visual Studio, accédez au dossier MWSWindows > www > wsmobile > js > runtime > modèles.
  3. Ouvrez le fichier template.html en mode d’édition.

  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. Recherchez 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 au dossier 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 en mode d’édition.
  9. Pour l’image d’arrière-plan, modifiez #323232 en #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. 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne