DocumentaçãoAEM 6.5Guia do usuário

Personalização de tema theme-customization

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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

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

Etapas steps

  1. Abra o projeto.

    • Para o 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 guia Capture > www > wsmobile > js > tempo de execução > templates pasta.
    • No Eclipse, navegue até o ativos > www > wsmobile > js > tempo de execução > modelos pasta.
    • No Visual Studio, navegue até o MWSWindows > www > wsmobile > js > tempo de execução > modelos pasta.

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

  4. Localize a seguinte string:

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

    Substituir por <%.

  5. Localize o seguinte código na template.html arquivo:

    code language-jsp 
    <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.

    code language-jsp 
    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, acesse assets > www > wsmobile > css.
    • No Visual Studio, navegue até MWSWindows > www > wsmobile > css.

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

  9. Para Imagem de fundo, altere #323232 para #fff.

  10. Salvar as alterações e fechar _style.css arquivo.

  11. Abra o aplicativo AEM Forms.

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2