Personalização do tema

Você pode personalizar o código HTML e o arquivo CSS para fornecer uma aparência específica da organização ao aplicativo AEM Forms. Por exemplo, é possível alterar a cor e a altura do plano de fundo de tarefas ou Pontos de partida. O exemplo a seguir fornece instruções para alterar:

• instruções de exibição no lugar da descrição
• número de rotas de exibição
• cor do gradiente do plano de fundo

Etapas

1. Abra seu projeto.

   • Para iOS, abra Capture.xcodeproj no Xcode
   • Para Android, abra o projeto do Android no Eclipse.
   • Para Windows, abra MWSWindows.sln no Visual Studio.

2. Navegue até a pasta de modelos.

   • No Xcode, navegue até a pasta Captura > www > wsmobile > js > tempo de execução > modelos.
   • No Eclipse, navegue até a pasta assets > www > wsmobile > js > tempo de execução > modelos.
   • No Visual Studio, navegue até a pasta MWSWwindows > www > wsmobile > js > tempo de execução > modelos.

3. Abra o arquivo template.html para edição.

4. Localize a seguinte string:

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

   Substitua-o por <%.

5. Localize o seguinte código no arquivo 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. Comente a linha a seguir e salve o arquivo.

   task.availableCommands.directCommands[1]%>">
   <%= task.availableCommands.directCommands[1]%>
   </li>
   

7. Navegue até a pasta css.

   • No Xcode, navegue até Capturar > www > wsmobile > css.
   • No Eclipse, navegue até assets > www > wsmobile > css.
   • No Visual Studio, navegue até MWSWwindows > www > wsmobile > css.

8. Abra o arquivo _style.css para edição.

9. Para imagem de plano de fundo, altere #323232 para #fff.

10. Salve as alterações e feche o arquivo _style.css.

11. Abra o aplicativo AEM Forms.

    O aplicativo AEM Forms agora exibe instruções em vez de descrição.