Crear o personalizar una temática de formulario adaptable

Se aplica a: ❎ de componentes principales de formulario adaptable ✅ Componentes de base de formulario adaptable.

En AEM Forms AEM 6.5, una temática es una biblioteca de cliente de que se utiliza para definir los estilos (aspecto y presentación) de un formulario adaptable. Una temática contiene detalles de estilo para los componentes y paneles. Los estilos incluyen propiedades como colores de fondo, colores de estado, transparencia, alineación y tamaño. Al aplicar una temática, el estilo especificado se refleja en los componentes correspondientes. Una temática se administra de forma independiente sin hacer referencia a un formulario adaptable y se puede reutilizar en varios formularios adaptables de Forms.

Temas disponibles

AEM entorno de 6.5 proporciona los temas siguientes para los componentes principales basados en Forms adaptable:

• Temática Lienzo
• Tema WKND
• Tema EASEL

Comprender la estructura de las temáticas

Una temática es un paquete que incluye el archivo CSS, los archivos JavaScript y los recursos (como iconos) que definen el estilo de su Forms adaptable. Una temática de formulario adaptable sigue una organización específica, que consta de los siguientes componentes:

• src/theme.scss: Esta carpeta incluye el archivo CSS que tiene un impacto amplio en toda la temática. Sirve como una ubicación centralizada para definir y administrar el estilo y el comportamiento de la temática. Al realizar ediciones en este archivo, puede realizar cambios que se apliquen universalmente en toda la temática, lo que influye en el aspecto y la funcionalidad tanto de las páginas de AEM Sites como de Forms adaptable.

• src/siteAEM : esta carpeta contiene archivos CSS que se aplican a toda la página de un sitio de la red de distribución de contenido (CSS) de la página de un sitio de. AEM Estos archivos constan de código y estilos que afectan a la funcionalidad y al diseño generales de la página de su sitio de la red de la red de distribución de contenido (SITE) de su sitio de la red de distribución de contenido (OSGi). Cualquier modificación realizada aquí se reflejará en todas las páginas del sitio.

• src/componentsAEM : los archivos CSS de esta carpeta están diseñados para componentes principales individuales de la. Cada carpeta dedicada para un componente incluye una .scss que aplica estilo a ese componente en particular dentro de un formulario adaptable. Por ejemplo, la variable /src/components/button/_button.scss contiene información de estilo para el componente Botón de Forms adaptable.

  

• src/resources: esta carpeta contiene archivos estáticos como iconos, logotipos y fuentes. Estos recursos se utilizan para mejorar los elementos visuales y el diseño general del tema.

Crear una temática

AEM Forms 6.5 proporciona los temas que se enumeran a continuación para los componentes principales basados en Forms adaptable.

• Temática Lienzo
• Tema WKND
• Tema EASEL

Puede personalice cualquiera de estas temáticas para crear una temática.

Personalizar una temática

La personalización de una temática hace referencia al proceso de modificación y personalización de la apariencia de una temática. Al personalizar una temática, cambia sus elementos de diseño, diseño, colores, tipografía y, a veces, el código subyacente. Esto le permite crear un aspecto único y personalizado para su sitio web o aplicación, al tiempo que mantiene la estructura y la funcionalidad básicas proporcionadas por la temática.

Requisitos previos para personalizar una temática

• Habilitar los componentes principales de Forms adaptable para su entorno.

• Instale la última versión de Apache Maven. Apache Maven es una herramienta de automatización de compilaciones que se utiliza comúnmente en proyectos Java™. La instalación de la última versión garantiza que tenga las dependencias necesarias para la personalización de temáticas.

• Obtenga información sobre cómo crear un biblioteca de cliente en Adobe Experience Manager. AEM proporciona bibliotecas de cliente, que permiten almacenar el código del lado del cliente en el repositorio, organizarlo en categorías y definir cuándo y cómo se debe servir cada categoría de código al cliente.

• Instale un editor de texto sin formato. Por ejemplo, Microsoft® Visual Studio Code. Utilizar un editor de texto sin formato como Microsoft® Visual Studio Code proporciona un entorno fácil de usar para editar y modificar archivos de temas.

• Asegúrese de que su entorno de AEM Forms esté en funcionamiento.

Consideraciones para personalizar una temática

• Asegúrese de utilizar el tipo de archivo del proyecto utilizado para habilitar los componentes principales de Forms adaptable en su entorno para personalizar las temáticas.

• Al publicar un formulario adaptable, las bibliotecas de cliente no se publican automáticamente en la instancia de publicación. Asegúrese de publicar manualmente la biblioteca de cliente a la que se hace referencia en un formulario adaptable en los entornos de publicación.

• El Adobe recomienda no cambiar los nombres de clase de las bibliotecas de cliente.

Personalizar una temática

Crear o personalizar una temática es un proceso de varios pasos. Realice los pasos en el orden indicado para crear o personalizar la temática:

1. Clonar una temática
2. Personalizar el aspecto de la temática
3. Preparar el tema para la implementación local
4. Implementar el tema en un entorno local
5. Implementar el tema en el entorno de producción

Los ejemplos proporcionados en el documento se basan en la variable Lienzo tema, pero puede clonar cualquier tema y personalizarlo con las mismas instrucciones. Estas instrucciones se aplican a cualquier tema, lo que le permite modificarlas según sus necesidades específicas.

1. Clone el repositorio Git de la temática

Para clonar una temática para componentes principales basados en Forms adaptable, elija una de las siguientes temáticas:

• Temática Lienzo
• Tema WKND
• Tema EASEL

Siga estas instrucciones para clonar una temática:

1. Abra el símbolo del sistema o la ventana de terminal en su entorno de desarrollo local.

2. Ejecute el git clone para clonar una temática.

      git clone [Path of Git Repository of the theme]
   

   Reemplace el [Ruta del repositorio Git de la temática] con la URL real del repositorio de Git correspondiente de la temática

   Por ejemplo, para clonar la temática Lienzo, ejecute el siguiente comando:

      git clone https://github.com/adobe/aem-forms-theme-canvas
   

3. Seleccione Confiar en los autores de todos los archivos de la carpeta principal y haga clic en Sí, confío en los autores.

Después de ejecutar el comando correctamente, tiene una copia local del tema disponible en el equipo en el aem-forms-theme-canvas carpeta.

2. Personalizar la temática

Tiene la flexibilidad de personalizar componentes individuales o realizar cambios en el nivel de tema mediante las variables globales de un tema. La modificación de variables globales tiene un efecto en cascada en todos los componentes individuales. Por ejemplo, puede utilizar variables globales para cambiar el color del borde de todos los componentes de un formulario adaptable o aplicar un color de relleno vibrante a los botones de llamada a la acción (CTA). Puede hacer lo siguiente:

• Establecer estilos de nivel de tema

• Definir estilos de nivel de componente

Establecer estilos de nivel de tema

El variable.scss contiene las variables globales de la temática. Al actualizar estas variables, puede realizar cambios relacionados con los estilos en el nivel de la temática. Para aplicar estilos de nivel de tema, siga estos pasos:

1. Abra el <your-theme-sources>/src/site/_variables.scss archivo para editar.

2. Cambie el valor de cualquier propiedad. Por ejemplo, el color de error predeterminado es rojo. Para cambiar el color del error de rojo a azul, cambie el código hexadecimal de color del $errorvariable. Por ejemplo, $error: #196ee5.

   

3. Guarde y cierre el archivo.

Del mismo modo, puede utilizar la variable variable.scss archivo para establecer la familia y el tipo de fuente, los colores de la temática y la fuente, el tamaño de fuente, el espaciado del tema, el icono de error, los estilos de borde del tema y más variables que afectan a varios componentes del formulario adaptable.

Definir estilos de nivel de componente

También tiene la opción de personalizar la fuente, el color, el tamaño y otras propiedades CSS de componentes principales específicos del formulario adaptable, como botones, casillas de verificación, contenedores, pies de página, etc. Al editar el archivo CSS asociado al componente específico, puede alinear su estilo con la marca de su organización. Para personalizar el estilo de un componente, siga estos pasos:

1. Abra el archivo <your-theme-sources>/src/components/<component>/<component.scss> para editar. Por ejemplo, para cambiar el color de fuente del componente Botón, abra el <your-theme-sources>/src/components/button/button.scss, archivo .

2. Cambie el valor de cualquiera según sus necesidades. Por ejemplo, para cambiar el color del componente Botón al pasar el ratón por encima a Verde, cambie el valor del color: $white propiedad en el cmp-adaptiveform-button__widget:hover de clase a código hexadecimal #12b453 o cualquier otro tono de verde. El código final tiene el siguiente aspecto:

    .cmp-adaptiveform-button__widget:hover {
    background: $dark-gray;
    color: #12b453;
    }
   

3. Guarde y cierre el archivo.

3. Preparar el tema para la implementación

AEM Para implementar una temática en una instancia de, debe convertirse en una biblioteca de cliente. Siga estos pasos para convertir la temática en una biblioteca de cliente:

1. Abra el símbolo del sistema o la ventana de terminal.

2. Navegue hasta la carpeta <your-theme-sources>. Por ejemplo, C:\aem-forms-theme-canvas

3. Ejecute el siguiente comando:

      npm run create-clientlib --category=adaptiveform.theme.[yourtheme]
   

   Reemplazar [yourtheme] con el nombre de su temática personalizada. Por ejemplo, si el nombre del tema personalizado es customcanvastheme, ejecute el siguiente comando

       npm run create-clientlib --category=adaptiveform.theme.customcanvastheme
   

   Cuando se ejecuta correctamente el comando, se crea una carpeta de biblioteca de cliente en themerepo\theme-clientlibs\[yourtheme].

   

   

4. Implementar el tema en un entorno local

Para implementar el tema en el entorno de desarrollo o prueba local, siga estos pasos:

1. Copie la biblioteca de cliente, creada en la sección anterior, en el proyecto Archetype, en la siguiente ruta:

   /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

2. Abra el símbolo del sistema o el terminal.

3. AEM Vaya al directorio raíz del proyecto de tipo de archivo de la, el proyecto utilizado para habilitar los componentes principales del formulario adaptable.

4. Ejecute el siguiente comando para implementar el tema personalizado en su entorno:

   mvn clean install

   

5. Implementar un tema en el entorno de producción

Una vez que haya probado correctamente el tema en su entorno de desarrollo local, puede continuar implementando el tema en los entornos de producción, incluidas las instancias de autor y publicación. Siga estos pasos para implementar el tema en los entornos de producción:

1. AEM Inicie sesión en su entorno de.
2. Abra el Administrador de paquetes. La URL predeterminada es https://localhost:4502/crx/packmgr/index.jsp.
3. Clic Cargar paquete y haga clic en Examinar.
4. Vaya a y seleccione [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Clic Abrir.
5. Haga clic en Instalar. Repita el paso en todos los entornos de producción.

Una vez instalado el paquete, la temática está disponible para su selección.

Aplicar una temática a un formulario adaptable

Los pasos para aplicar una temática a un formulario adaptable son los siguientes:

1. AEM Inicie sesión en la instancia local de autor de la.

2. Introduzca sus credenciales en la página de inicio de sesión de Experience Manager. Seleccionar Adobe Experience Manager > Forms > Forms y documentos.

3. Clic Crear > Forms adaptable.

4. Seleccione una plantilla de componentes principales de Forms adaptable y haga clic en Siguiente. El Añadir propiedades aparece

5. Especifique el Nombre para su formulario adaptable.

   NOTA

   • De forma predeterminada, la variable adaptiveform.theme.canvas3 tema está seleccionado.
   • Puede elegir una temática diferente de la siguiente Biblioteca de cliente de temas menú desplegable.

6. Haga clic en Crear.

Las temáticas se utilizan como parte de una plantilla de formulario adaptable para definir el estilo al crear un formulario adaptable.

Eliminar una temática

Para eliminar temas no utilizados o no deseados:

1. Inicie sesión en la instancia de autor.
2. Abrir http://[Publish Server URL]:[PORT]/crx/de/index.jsp
3. Navegue hasta apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
4. Elimine la carpeta de la temática y guarde los cambios.

Pregunta más frecuente

P: ¿Qué personalización tiene prioridad al realizar personalizaciones en una carpeta de temas tanto a nivel global como a nivel de componente?

R: Cuando se define un estilo tanto en el nivel de tema como de componente, el estilo definido en el nivel de componente tiene prioridad.

P: ¿Qué pasos se deben seguir si la temática personalizada no está visible en el Biblioteca de cliente de temas?

R: Si la temática personalizada no aparece en la Biblioteca de cliente de temas , siga estos pasos:

1. Vaya a la ubicación en la que ha agregado la biblioteca de cliente de temas personalizada. La ruta recomendada es /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

2. Abra el .content.xml e incluir los siguientes metadatos:

       formstheme:true
       allowproxy:true
   

3. Guarde el archivo y vuelva a implementar la temática.

Consulte también

• Crear un formulario adaptable basado en componentes principales
• Utilice el editor de reglas para agregar un comportamiento dinámico al formulario
• Crear o personalizar temáticas para componentes principales basados en Forms adaptable
• Crear una plantilla para componentes principales basados en Forms adaptable
• Crear o agregar un formulario adaptable a una página de AEM Sites o a un fragmento de experiencia
• Plantillas temáticas y modelos de datos de formularios de ejemplo