Personalización de temas

Puede personalizar el código HTML y el archivo CSS para proporcionar a la aplicación 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 puntos de inicio. El ejemplo siguiente proporciona instrucciones para cambiar:

  • 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 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 Captura > www > wsmobile > js > tiempo de ejecución > plantillas carpeta.
    • En Eclipse, vaya a la assets > www > wsmobile > js > tiempo de ejecución > plantillas carpeta.
    • En Visual Studio, vaya a la Windows MWSW > www > wsmobile > js > tiempo de ejecución > plantillas carpeta.

  3. Abra el template.html para editar.

  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 código siguiente en la sección template.html archivo:

    <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 assets > www > wsmobile > css.
    • En Visual Studio, vaya a Windows MWSW > www > wsmobile > css.

  8. Abra el _style.css para editar.

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

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

  11. Abra la aplicación de AEM Forms.

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

En esta página