Se puede personalizar la presentación y el posicionamiento de los mensajes de error de un formulario adaptable. Puede realizar las siguientes personalizaciones:
Puede personalizar el diseño de un único campo o de todos los campos para cambiar la posición del rótulo y los mensajes de error. Siga los siguientes pasos para aplicar un diseño personalizado a un campo:
Siga los siguientes pasos para aplicar un diseño personalizado a un único campo:
Abra el formulario en Estilo en el menú contextual. Para abrir el formulario en modo de estilo, en la barra de herramientas de la página, pulse > Estilo.
En la barra lateral, debajo de Objetos de formulario, seleccione el campo y pulse el botón editar .
Seleccione el estado del campo que desea personalizar y especifique el estilo para ese estado.
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 lugar. Al crear un tema, se especifica el estilo en un nivel de componente. Para obtener más información sobre los temas, consulte Temas 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:
Abra el formulario en modo de edición.
En el modo de edición, seleccione un componente y, a continuación, pulse > Contenedor de formulario adaptable y haga clic en
.
En la barra lateral, en Tema de formulario adaptable, seleccione el tema que ha creado con el Editor de temas.
Abra CRXDE lite. El URL predeterminado es https://[Server]:[Port]/crx/de
.
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).
Cambie el nombre del nodo copiado y el archivo defaultFieldLayout.jsp . Por ejemplo, errorOnRight.jsp.
Cambie el valor de las propiedades qtip y jcr:description del nodo copiado. Por ejemplo, cambie el valor de las propiedades a Error On Right
Para añadir 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. Agregue la propiedad categories 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%;
}
}
Para mejorar el aspecto y el comportamiento, incluya la biblioteca de cliente creada en el archivo de diseño (errorOnRight.jsp).
Abra el cuadro de diálogo de edición del campo y seleccione la opción Estilo pestaña . En el Configuración del diseño de campo cuadro desplegable, seleccione el diseño recién creado y haga clic en OK.
El paquete ErrorOnRight.zip contiene código para mostrar mensajes de error en el lado derecho de los campos.