Personalizar temáticas

Puede personalizar el código HTML y el archivo CSS para ofrecer a la aplicación AEM Forms una apariencia específica de la organización. Por ejemplo, puede cambiar el color de fondo y la altura de las tareas o puntos de inicio. El ejemplo siguiente indica las instrucciones para cambiar:

• Las instrucciones de visualización en lugar de la descripción.
• Número de rutas de visualización.
• Color de degradado de fondo.

Etapas

1. Abra su proyecto.

   • Si utiliza un dispositivo iOS, abra Capture.xcodeproj en Xcode.
   • Si utiliza un dispositivo Android, abra el proyecto de Android en Eclipse.
   • Para Windows, abra MWSWindows.sln en Visual Studio.

2. Vaya a la carpeta de plantillas.

   • En Xcode, vaya a la carpeta Captura > www > wsmobile > js > runtime > plantillas.
   • En Eclipse, vaya a la carpeta Recursos > www > wsmobile > js > runtime > plantillas.
   • En Visual Studio, vaya a la carpeta MWSWindows > www > wsmobile > js > runtime > plantillas.

3. Abra el archivo template.html para editarlo.

4. Localice la siguiente cadena:

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

   Sustitúyala por <%.

5. Localice el código siguiente en el archivo 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 la siguiente línea y guarde el archivo.

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

7. Vaya a la carpeta css.

   • En Xcode, vaya a Captura > www > wsmobile > css.
   • En Eclipse, vaya a recursos > www > wsmobile > css.
   • En Visual Studio, vaya a MWSWindows > www > wsmobile > css.

8. Abra el archivo _style.css para editarlo.

9. Para la imagen de fondo, cambie #323232 a #fff.

10. Guarde los cambios y cierre el archivo _style.css.

11. Abra la aplicación de AEM Forms.

    La aplicación de AEM Forms ahora muestra instrucciones en lugar de la descripción.