Personalización de la presentación y colocación de los mensajes de error de un formulario adaptable

Puede personalizar la presentación y la posición de los mensajes de error de un formulario adaptable. Puede realizar las siguientes personalizaciones:

• Personalice la ubicación y el diseño del rótulo de un campo sin realizar ningún cambio en las propiedades CSS correspondientes
• Personalización de la posición de los mensajes de error en línea
• Personalización del contenido del indicador de ayuda dinámica
• Personalice la posición de los componentes de campo (componentes de rótulo, widget, descripción breve, descripción larga y indicador de ayuda) sin realizar ningún cambio en las propiedades CSS correspondientes

Personalización del diseño de los campos

Puede personalizar la presentación de un solo campo o de todos los campos para cambiar la posición de los mensajes de error y rótulos. Siga estos pasos para aplicar un diseño personalizado a un campo:

Personalización del diseño de un solo campo

Siga estos pasos para aplicar un diseño personalizado a un solo campo:

1. Abra el formulario en modo Estilo. Para abrir el formulario en modo de estilo, en la barra de herramientas de la página toque > Estilo.

2. En la barra lateral, en Objetos de formulario, seleccione el campo y toque el botón de edición .

3. Seleccione el estado del campo que desea personalizar y especifique el estilo para ese estado.

   

Personalización de la presentación de todos los campos de un formulario

Con AEM Forms, ahora puede crear un tema y aplicarlo al formulario. El editor de temas permite especificar el estilo de los componentes del formulario en un solo lugar. Al crear un tema, se especifica el estilo en un nivel de componente. Para obtener más información sobre temáticas, consulte Temáticas en AEM Forms.

Cree un tema con el Editor de temas para personalizar la presentación de todos los campos del formulario. Después de crear un tema, realice los siguientes pasos para aplicarlo a un formulario:

1. Abra el formulario en modo de edición.
2. En el modo de edición, seleccione un componente, toque > Contenedor de formulario adaptable y, a continuación, toque .
3. En la barra lateral, en Tema de formulario adaptable, seleccione el tema que ha creado con el Editor de temas.

Crear un diseño de campo personalizado

1. Abra la lista CRXDE. La dirección URL predeterminada es https://[Server]:[Port]/crx/de.

2. Copie un diseño de campo del nodo /libs/fd/af/layouts/field (por ejemplo, defaultFieldLayout) al nodo /apps (por ejemplo, /apps/af-field-layout).

3. Cambie el nombre del nodo copiado y el archivo defaultFieldLayout.jsp. Por ejemplo, errorOnRight.jsp.

4. Cambie el valor de las propiedades qtip y jcr:description del nodo copiado. Por ejemplo, cambie el valor de las propiedades a Error a la derecha

5. Para agregar nuevos estilos y comportamiento, cree una biblioteca de cliente en el nodo /etc.

   Por ejemplo, en la ubicación /etc/af-field-layout-clientlib, cree el nodo client-library. Añada la propiedad categorías con el valor af.field.errorOnRight y el archivo style.less con el siguiente código:

   .widgetErrorWrapper {
   
    height: 38px;
    margin: 5px;
   
    .guideFieldWidget{
    width: 60%;
    float: left; 
    }
   
    .guideFieldError{
    overflow:hidden;
    width:40%; 
    }
   
   }
   

6. Para mejorar el aspecto y el comportamiento, incluya la biblioteca de cliente creada en el archivo de diseño (errorOnRight.jsp).

7. Abra el cuadro de diálogo de edición del campo, seleccione la ficha Estilo. En el cuadro desplegable Configurar diseño de campo, seleccione el diseño recién creado y haga clic en Aceptar.

El paquete ErrorOnRight.zip contiene código para mostrar mensajes de error en el lado derecho de los campos.

Obtener archivo