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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now