DokumentationAEM 6.5Benutzerhandbuch

Design-Anpassung theme-customization

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Benutzende
  • Entwickler

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 hierzu Anweisungen:

  • Anweisungen statt Beschreibungen anzeigen
  • Anzahl der Anzeigewege
  • Hintergrundverlaufsfarbe

Schritte steps

  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:

    code language-jsp 
    <%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:

    code language-jsp 
    <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.

    code language-jsp 
    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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2