Personalizzazione tema

Potete personalizzare il codice HTML e il file CSS per fornire un aspetto e un aspetto specifici dell'organizzazione per l'app AEM Forms. Ad esempio, è possibile modificare il colore e l'altezza di sfondo delle attività o dei punti di inizio. L'esempio seguente fornisce le istruzioni per la modifica:

  • visualizzare le istruzioni al posto della descrizione
  • numero di percorsi di visualizzazione
  • colore sfumatura sfondo

Passaggi

  1. Apri il progetto.

    • Per iOS, aprite Capture.xcodeproj in Xcode
    • Per Android, aprite il progetto Android in Eclipse.
    • Per Windows, aprire MWSWindows.sln in Visual Studio.
  2. Passate alla cartella dei modelli.

    • In Xcode, andate alla cartella Capture > www > wsmobile > js > runtime > templates .
    • In Eclipse, passa alla cartella assets > www > wsmobile > js > runtime > templates .
    • In Visual Studio, passare alla cartella MWSWindows > www > wsmobile > js > runtime > templates .
  3. Open the template.html file for editing.

  4. Individuate la stringa seguente:

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

    Sostituiscilo con <%.

  5. Individuate il codice seguente nel template.html file:

    <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. Commenta la riga seguente e salva il file.

    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
  7. Passate alla cartella css.

    • In Xcode, passa a Capture > www > wsmobile > css.
    • In Eclipse, passa a risorse > www > wsmobile > css.
    • In Visual Studio, passare a MWSWindows > www > wsmobile > css.
  8. Open the _style.css file for editing.

  9. Per Immagine di sfondo, passate #323232 a #fff.

  10. Salvare le modifiche e chiudere il _style.css file.

  11. Aprite l'app AEM Forms.

    L'app AEM Forms ora visualizza le istruzioni invece della descrizione.

In questa pagina