Designanpassung

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.

    • Für iOS öffnen Sie Capture.xcodeproj in Xcode
    • In Android öffnen Sie das Android-Projekt in Eclipse.
    • Öffnen Sie unter Windows MWSWindows.sln in Visual Studio.
  2. Navigieren Sie zum Ordner „templates“.

    • Navigieren Sie in Xcode zum Ordner Capture > www > wsmobile > js > runtime > templates.
    • Navigieren Sie in Eclipse zum Ordner assets > www > wsmobile > js > runtime > templates.
    • Navigieren Sie in Visual Studio zum Ordner MWSWindows > www > wsmobile > js > runtime > templates.
  3. Öffnen Sie die Datei template.html zur Bearbeitung.

  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.
    • Navigieren Sie in Eclipse zu assets > www > wsmobile > css.
    • Navigieren Sie in Visual Studio zu MWSWindows > www > wsmobile > css.
  8. Öffnen Sie die Datei _style.css zur Bearbeitung.

  9. Ändern Sie für das Hintergrundbild #323232 in #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

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now