Personalización de tema

Puede personalizar el código HTML y el archivo CSS para proporcionar a la aplicación de AEM Forms un aspecto y una presentación distintos específicos de la organización. Por ejemplo, puede cambiar el color de fondo y la altura de las tareas o los puntos de inicio. El siguiente ejemplo proporciona instrucciones para cambiar:

• mostrar instrucciones en lugar de la descripción
• número de rutas de visualización
• color de degradado de fondo

Etapas

1. Abra el proyecto.

   • Para iOS, abra Capture.xcodeproj en Xcode
   • Para 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 Capture > www > wsmobile > js > tiempo de ejecución > plantillas.
   • En Eclipse, vaya a la carpeta assets > www > wsmobile > js > Runtime > templates.
   • En Visual Studio, vaya a la carpeta MWSWinwindows > www > wsmobile > js > tiempo de ejecución > plantillas.

3. Abra el archivo template.html para editarlo.

4. Busque 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úyalo por <%.

5. Busque el siguiente código 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 Capturar > www > wsmobile > css.
   • En Eclipse, vaya a assets > www > wsmobile > css.
   • En Visual Studio, vaya a MWSWinwindows > 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 las instrucciones en lugar de la descripción.