Design-Anpassung theme-customization

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