Design-Anpassung

Sie können den HTML-Code und die CSS-Datei anpassen, um der AEM Forms-App ein unverwechselbares, organisationsspezifisches Erscheinungsbild zu geben. Sie können beispielsweise die Hintergrundfarbe und die Höhe von Aufgaben oder Startpunkten ändern. Das folgende Beispiel enthält Anweisungen zum Ändern:

• Anweisungen statt Beschreibungen anzeigen
• Anzahl der Anzeigewege
• Farbverlauf mit Hintergrundfarbe

Schritte

1. Öffnen Sie Ihr Projekt.

   • In iOS öffnen Sie Capture.xcodeproj in Xcode
   • In Android öffnen Sie das Android-Projekt in Eclipse.
   • In Windows öffnen Sie MWSWindows.sln in Visual Studio.

2. Navigieren Sie zum Ordner „templates“.

   • In Xcode navigieren Sie zum Ordner Capture > www > wsmobile > js > runtime > templates.
   • In Eclipse navigieren Sie zum Ordner assets > www > wsmobile > js > runtime > templates.
   • In Visual Studio navigieren Sie zum Ordner MWSWindows > www > wsmobile > js > runtime > templates.

3. Öffnen Sie die Datei „template.html“, um sie zu bearbeiten.

4. Suchen Sie die folgende Zeichenfolge:

   <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
                  <div class="description_details">
                    <%= task.description %>
                  </div>
                 <%} else
   

   Ersetzen Sie sie durch <%.

5. Suchen Sie den folgenden Code in der Datei 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. Geben Sie die folgende Zeile ein und speichern Sie die Datei.

   task.availableCommands.directCommands[1]%>">
   <%= task.availableCommands.directCommands[1]%>
   </li>
   

7. Navigieren Sie zum Ordner „css“.

   • In Xcode navigieren Sie zu Capture > www > wsmobile > css.
   • In Eclipse navigieren Sie zu assets > www > wsmobile > css.
   • In Visual Studio navigieren Sie zu MWSWindows > www > wsmobile > css.

8. Öffnen Sie die Datei „_style.css“, um sie zu bearbeiten.

9. Ändern Sie für das Hintergrundbild #323232 auf #fff.

10. Speichern Sie die Änderungen und schließen Sie die Datei _style.css.

11. Öffnen Sie die AEM Forms-App.

    Das AEM Forms-Programm zeigt jetzt Anweisungen anstelle von Beschreibungen an.