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.

En esta página