Componente de imagen image-adaptive-forms-core-component
Un componente Imagen de un Formulario adaptable es una forma de incluir imágenes en un formulario. Estas imágenes se pueden utilizar para mejorar el diseño general del formulario, proporcionar información adicional o servir como ayuda visual para que los usuarios comprendan la finalidad del formulario. El componente de imagen se puede utilizar para añadir un logotipo, una foto o un gráfico en el formulario.
Para la accesibilidad, es importante especificar un Texto alternativo para la imagen para proporcionar una alternativa de texto corto y descriptivo de la imagen, que describa la imagen para las personas que no pueden verla.
Ejemplo
Uso reasons-to-use-image-in-a-form
Existen varias razones por las que resulta beneficioso incluir un componente Imagen en un Formulario adaptable, entre ellas:
-
Personalización de marca: se puede utilizar una imagen para mostrar el logotipo o el nombre de la organización que ha creado el formulario, lo que ayuda a establecer el reconocimiento y la credibilidad de la marca.
-
Ayudas visuales: una imagen puede ayudar a proporcionar un nivel adicional de información a los usuarios, al servir como ayuda visual para que comprendan la finalidad del formulario.
-
Decoración: se puede utilizar una imagen para mejorar el diseño general del formulario y hacerlo visualmente más atractivo.
-
Experiencia del usuario: se puede utilizar una imagen para que el formulario sea más fácil de usar, ya que proporciona una forma clara e intuitiva de que los usuarios accedan a los campos del formulario y los rellenen.
Versión y compatibilidad version-and-compatibility
El componente principal de imagen de Forms adaptable se publicó en febrero de 2023 como parte de los componentes principales 2.0.4 para Cloud Service AEM y los componentes principales 1.1.12 para 6.5.16.0 Forms o posterior. A continuación se muestra una tabla con todas las versiones admitidas, la compatibilidad con AEM y los vínculos a la documentación correspondiente:
versión 2.0.4 y posteriores
versión 1.1.12 y posteriores, pero inferiores a 2.0.0.
Para obtener información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.
Detalles técnicos technical-details
Obtenga la información más reciente sobre el componente principal de imagen de Formularios adaptables en la documentación técnica de GitHub. Para obtener más información sobre el desarrollo de los componentes principales, consulte la Documentación para desarrolladores de componentes principales.
Cuadro de diálogo de configuración configure-dialog
Puede personalizar fácilmente la experiencia de la imagen para los visitantes con el cuadro de diálogo de configuración. También puede definir las opciones de imagen con facilidad para que la experiencia del usuario sea óptima.
-
Nombre: puede identificar fácilmente un componente de formulario con su nombre único tanto en el formulario como en el editor de reglas, pero el nombre no debe contener espacios ni caracteres especiales.
-
Título: con su título, puede identificar fácilmente un componente en un formulario y, de forma predeterminada, el título aparece sobre el componente. Si no agrega un título, se mostrará el nombre del componente en lugar del texto del título.
-
Marcar como elemento de formulario independiente: seleccione la opción para configurar un campo de formulario no vinculado a ningún esquema. Esta opción le permite guardar datos sin actualizar la fuente de datos. También le permite gestionar los datos de forma personalizada, independientemente de la integración de bases de datos estándar.
-
Descripción: una descripción es una explicación de texto breve que proporciona información adicional o aclaración sobre la finalidad de una imagen específica.
-
Coloque un recurso aquí o busque un archivo para cargar: esta opción permite soltar un recurso como una imagen arrastrando y soltando con el ratón. También puede cargar un archivo desde un sistema de archivos local utilizando el botón Examinar. Después de añadir una imagen, aparecen tres botones en la parte inferior de la imagen:
- Editar: pulse o haga clic en Editar para administrar las representaciones del recurso en el Editor de recursos.
- Borrar: pulse o haga clic en Borrar para anular la selección de la imagen seleccionada actualmente.
- Elegir: pulse o haga clic en Elegir para seleccionar otra imagen de la carpeta Recursos.
-
Texto alternativo: esta opción se utiliza para introducir el texto que proporciona una alternativa de texto corto y descriptivo de la imagen, que describa la imagen para las personas con discapacidad visual.
-
Ocultar componente: seleccione la opción para ocultar el componente del formulario. El componente permanece accesible para otros fines, como utilizarlo para los cálculos en el Editor de reglas. Esto resulta útil cuando necesita almacenar información que el usuario no necesita ver o cambiar directamente.
Cuadro de diálogo Diseño design-dialog
El cuadro de diálogo de diseño se utiliza para definir y administrar estilos CSS para el componente Imagen.
Pestaña Estilos styles-tab
La pestaña se utiliza para definir y administrar estilos CSS de un componente. El componente principal de imagen de Formularios adaptables es compatible con el Sistema de estilos de AEM.
-
Clases CSS predeterminadas: puede proporcionar una clase CSS predeterminada para el componente principal de imagen de Formularios adaptables.
-
Estilos permitidos: puede definir estilos proporcionando un nombre y la clase CSS que representa el estilo. Por ejemplo, puede crear un estilo llamado “texto en negrita” y proporcionar la clase de CSS “grosor de fuente: negrita”. Puede utilizar o aplicar estos estilos a un formulario adaptable en el editor de formularios adaptable. Para aplicar un estilo, en el editor de Formularios adaptables, seleccione el componente al que desee aplicar el estilo, vaya al cuadro de diálogo de propiedades y seleccione el estilo que desee en la lista desplegable Estilos. Si necesita actualizar o modificar los estilos, simplemente vuelva al cuadro de diálogo Diseño, actualice los estilos en la pestaña Estilos y guarde los cambios.
Propiedades personalizadas
Las propiedades personalizadas le permiten asociar atributos personalizados (pares clave-valor) a un componente principal del formulario adaptable mediante la plantilla de un formulario. Las propiedades personalizadas se reflejan en la sección de propiedades de la representación sin encabezado del componente. Permite crear un comportamiento de formulario dinámico que se adapta en función de los valores de atributos personalizados. Por ejemplo, los desarrolladores pueden diseñar varias representaciones de un componente Forms sin encabezado para plataformas móviles, de escritorio o web, lo que mejora significativamente la experiencia del usuario en una amplia gama de dispositivos.
-
Nombre de grupo: puede proporcionar un nombre para identificar el grupo de propiedades personalizadas. Puede agregar, eliminar o reorganizar varios grupos de propiedades personalizadas. Después de añadir el grupo de propiedades personalizadas, podrá ver las siguientes opciones:
-
Pares de clave-valor: puede agregar varios nombres de propiedades personalizadas y valores de propiedades personalizadas haciendo clic en el botón Añadir para cada grupo de propiedades personalizadas.
-
Eliminar: toque o haga clic para eliminar el nombre de la propiedad personalizada y el valor de la propiedad personalizada.
-
Reorganizar: toque o haga clic y arrastre para reorganizar el orden del nombre de la propiedad personalizada y el valor de la propiedad personalizada.
-
Artículos relacionados related-articles
Consulte también see-also
- Crear un formulario adaptable de AEM
- Agregar un formulario adaptable de AEM a la página de AEM Sites
- Aplicar temáticas a un formulario adaptable de AEM
- Añadir componentes a un formulario adaptable de AEM
- Uso de reCAPTCHA en un formulario adaptable de AEM
- Generar la versión de PDF (DoR) de un formulario adaptable de AEM
- Traducir un formulario adaptable de AEM
- Habilitar Adobe Analytics para un formulario adaptable con el fin de realizar un seguimiento del uso del formulario
- Conectar el formulario adaptable a Microsoft SharePoint
- Conectar formularios adaptables a Microsoft Power Automate
- Conectar el formulario adaptable a Microsoft OneDrive
- Conectar el formulario adaptable al almacenamiento de Microsoft Azure Blob
- Conectar el formulario adaptable a Salesforce
- Uso del Inicio de sesión en un formulario adaptable de AEM de Adobe
- Añadir una nueva configuración regional para un formulario adaptable
- Enviar datos de formulario adaptable a una base de datos
- Enviar datos de formulario adaptable a un punto final REST
- Enviar datos de formulario adaptable al flujo de trabajo de AEM
- Utilizar el portal de Forms para ver una lista de formularios adaptables de AEM en un sitio web de AEM