Personalização de Tema

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

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

Etapas

  1. Abra o projeto.

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

  2. Navegue até a pasta de modelos.

    • No Xcode, navegue até a pasta Capture > www > wsmobile > js > runtime > templates .
    • No Eclipse, navegue até a pasta assets > www > wsmobile > js > runtime > templates .
    • No Visual Studio, navegue até a pasta MWSWWindows > www > wsmobile > js > tempo de execução > templates .

  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 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é Capture > 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.

Nesta página