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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now