Personalização de tema theme-customization
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
-
Abra o projeto.
- Para o iOS, abra
Capture.xcodeproj
no Xcode - Para o Android, abra o projeto Android no Eclipse.
- Para Windows, abra
MWSWindows.sln
no Visual Studio.
- Para o iOS, abra
-
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 MWSWindows > www > wsmobile > js > runtime > templates.
-
Abra o arquivo
template.html
para edição. -
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
<%
. -
Localize o seguinte código no arquivo
template.html
: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>
-
Comente a linha a seguir e salve o arquivo.
code language-jsp task.availableCommands.directCommands[1]%>"> <%= task.availableCommands.directCommands[1]%> </li>
-
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é MWSWindows > www > wsmobile > css.
-
Abra o arquivo
_style.css
para edição. -
Para imagem de fundo, altere
#323232
para#fff
. -
Salvar as alterações e fechar o arquivo
_style.css
. -
Abra o aplicativo AEM Forms.
O aplicativo AEM Forms agora exibe instruções em vez de descrição.