Personalizar los componentes principales de los formularios adaptables

Identificar y duplicar el componente principal

Al configurar el entorno de desarrollo, usted ha creado un proyecto basado en el tipo de archivo. En el proyecto de tipo de archivo de AEM, identifique el componente principal específico que desea personalizar. Una vez identificado, cree un duplicado del componente en su proyecto basado en el tipo de archivo de AEM. Manténgalo en paralelo con otros componentes principales de formularios adaptables. Este paso garantiza que sus esfuerzos de personalización no afecten al componente original, permitiéndole experimentar con total libertad.

Personalizar el componente copiado

Abra el componente duplicado y empiece a realizar las modificaciones pertinentes según sus necesidades:

• Personalizar la estructura HTML: adapte la estructura HTML a sus necesidades de diseño, sin dejar de respetar las prácticas de estilo BEM (Modificador de elementos de bloque) para conseguir un código escalable y fácil de mantener.
• Actualizar etiqueta: actualice la etiqueta del componente para proporcionar un nombre claro y descriptivo para la versión personalizada. Consulte la plantilla de etiqueta OOTB (predeterminada) suministrada para mantener la uniformidad.
• Personalizar widget: ajuste el widget utilizado dentro del componente (menús desplegables, casillas de verificación) para adaptarlo a su caso de uso específico. Consulte la implementación de widgets de muestra como referencia.
• Texto de ayuda e información sobre herramientas: personalice el texto de ayuda o la información sobre herramientas asociada al componente para ofrecer contexto y orientación a los usuarios. Utilice la Plantilla de texto de ayuda OOTB como punto de partida.
• Atributos de datos: incorpore todos los atributos de datos necesarios en los elementos HTML del componente. Estos atributos son fundamentales para el correcto funcionamiento del componente durante la ejecución. Consulte la documentación para comprender la función de los atributos de datos en los componentes principales de formularios adaptables.

Implementar la lógica de back-end

Si su personalización requiere una lógica de back-end, puede ampliar los modelos de Sling existentes. Consulte el ejemplo proporcionado para integrar a la perfección la funcionalidad deseada en su componente personalizado.

Configurar el cuadro de diálogo del componente

Configure el cuadro de diálogo asociado a su componente personalizado. Utilice el cuadro de diálogo del componente de ejemplo proporcionado en la documentación para garantizar que las interacciones y la configuración del usuario se administran adecuadamente.

Implementar y probar el componente en su entorno de desarrollo local

Utilice Maven para generar e implementar el componente en su entorno de desarrollo local. Una vez implementado el componente, cree un formulario adaptable para probar el componente personalizado.

Implementar el componente personalizado en el entorno de producción

Una vez probado el componente en su entorno de desarrollo local, impleméntelo en los entornos de producción.