DocumentaciónAEM 6.5Guía del usuario

Personalizar temáticas theme-customization

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 steps

  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:

    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

    Sustitúyala por <%.

  5. Localice el código siguiente en el archivo 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>

  6. Comente la siguiente línea y guarde el archivo.

    code language-jsp 
    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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2