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 bzw. Startpunkten ändern. Folgendes Beispiel enthält hierzu Anweisungen:

  • Anweisungen statt Beschreibungen anzeigen
  • Anzahl der Anzeigewege
  • Farbverlauf 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.

    Die AEM Forms-App zeigt jetzt Anweisungen anstelle einer Beschreibung an.

Auf dieser Seite