DokumentationAEM 6.4Forms-Anleitung

Design-Anpassung theme-customization

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • User
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

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

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da