Aanpassing thema

U kunt de HTML-code en het CSS-bestand aanpassen en zo een specifieke organisatie voor de AEM Forms-app creëren. U kunt bijvoorbeeld de achtergrondkleur en -hoogte van taken of Startpunten wijzigen. In het volgende voorbeeld worden instructies gegeven om te wijzigen:

  • aanwijzingen weergeven in plaats van de beschrijving
  • aantal weergaveroutes
  • kleur achtergrondverloop

Stappen

  1. Open uw project.

    • Voor iOS opent u Capture.xcodeproj in Xcode
    • Voor Android opent u het Android-project in Eclipse.
    • Voor Vensters, open MWSWindows.sln in Visual Studio.
  2. Navigeer naar de map templates.

    • Navigeer in Xcode naar de map Vastleggen > www > wsmobile > js > runtime > templates.
    • Navigeer in Eclipse naar de map assets > www > wsmobile > js > runtime > templates.
    • Navigeer in Visual Studio naar de map MWSWindows > www > wsmobile > js > runtime > templates.
  3. Open het template.html-bestand voor bewerking.

  4. Zoek de volgende tekenreeks:

    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
                   <div class="description_details">
                     <%= task.description %>
                   </div>
                  <%} else
    

    Vervang het door <%.

  5. Zoek de volgende code in het template.html-bestand:

    <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. Neem een opmerking op in de volgende regel en sla het bestand op.

    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
  7. Navigeer naar de css-map.

    • Navigeer in Xcode naar Vastleggen > www > wsmobile > css.
    • Navigeer in Eclipse naar assets > www > wsmobile > css.
    • Navigeer in Visual Studio naar MWSWindows > www > wsmobile > css.
  8. Open het _style.css-bestand voor bewerking.

  9. Wijzig #323232 in #fff voor achtergrondafbeelding.

  10. Sla de wijzigingen op en sluit het _style.css-bestand.

  11. Open de AEM Forms-app.

    De AEM Forms-app geeft nu instructies weer in plaats van een beschrijving.

Op deze pagina