1. Inicio
  2. Formularios y Vistas
  3. Formularios
  4. Editor de formularios
  5. Editor de formularios: Diseño y apariencia del formulario

Editor de formularios: Diseño y apariencia del formulario

Puedes crear y editar múltiples diseños de formularios diferentes, darle a tu formulario un diseño paso a paso o con pestañas, y cambiar la apariencia de tus formularios y campos usando las opciones de Diseño y Apariencia del formulario. Para acceder a estas opciones, abre el Editor de formularios (pestaña Diseño) y selecciona el ícono del rodillo de pintura en la esquina superior derecha.

Icono de Apariencia del Formulario

Propiedades del diseño: General

Puedes crear varios diseños para tu formulario, y cada uno puede tener un conjunto único de configuraciones de apariencia. (Más información sobre crear múltiples diseños abajo.)

Propiedades generales
PropiedadDescripción
Nombre de la disposiciónEstablece el nombre para este diseño. Intenta que sea descriptivo sobre para qué sirve o en qué se diferencia de otros diseños, pero también mantenlo lo más corto posible.
Visibilidad del diseñoDefine en qué modos de formulario será visible este diseño: Crear, Ver, Editar. Esto te permite tener un diseño de formulario diferente en el modo Ver al del modo Editar, o cuando el registro se crea por primera vez (modo Crear).
Tipo de formularioSelecciona una de las siguientes opciones:
Formulario Es un formulario estándar de una sola página.
Pestaña te permite dividir tu formulario en páginas separadas entre las que un usuario puede moverse fácilmente haciendo clic en la pestaña de cada página.
Pasos le da a tu formulario un estilo de uso paso a paso o asistente con múltiples páginas entre las que el usuario se mueve en un orden lineal fijo. Si una página del formulario tiene campos obligatorios, los usuarios solo podrán pasar a la siguiente página después de completar exitosamente la página actual.
Color de fondo del formularioCambia el color del borde exterior del formulario y del espacio entre las secciones.
Brecha de campoPermite definir el espacio entre los campos de tu formulario (el relleno). Predeterminado tiene la mayor cantidad de espacio, entonces Cómodo, y Compacto es el más pequeño.
Apariencia del campoEstablece cómo se verán todos los campos individuales. Hay tres opciones: Predeterminado, Relleno y Contorno.
Color de fondo del formulario
Configuración de color de fondo del formulario
PredeterminadoEsta imagen tiene un atributo alt vacío; su nombre de archivo es defaultfieldapp-2.pngRellenaEsta imagen tiene un atributo alt vacío; su nombre de archivo es fillfieldapp-1.pngEsquemaEsta imagen tiene un atributo alt vacío; su nombre de archivo es outlinefieldapp-1.png
Opciones de apariencia del campo

Tipo de formulario: Pestaña

Después de seleccionar el ‘Pestaña‘tipo de formulario, una nueva sección de propiedades aparecerá en el panel Propiedades de diseño, debajo de General propiedades. Estas propiedades controlan la apariencia de la barra de pestañas (alineación, tamaño y color).

Opciones de Fichas de Formulario

Crear y editar pestañas

Después de seleccionar el ‘Pestaña‘Al seleccionar el tipo de formulario, también verás que aparece la ‘Pestaña 1’ en la parte superior del formulario. Para editar esta pestaña y crear pestañas adicionales, selecciona la ‘Propiedades de Pestaña‘ ícono al final derecho del área de pestañas en la parte superior del formulario, y aparecerá el panel Propiedades de pestaña.

Propiedades de Pestaña

Aquí puedes renombrar pestañas, elegir íconos para las pestañas, mover secciones entre pestañas, y crear nuevas pestañas.

Administración de pestañas

Para crear una nueva pestaña, haz clic en el‘+ Agregar Pestaña‘botón en la parte inferior del panel de propiedades. Cuando agregas una pestaña, se creará automáticamente una nueva sección sin título dentro de esa pestaña.

Añadir Pestañas

Administrar secciones de pestañas

Para mover una sección a una pestaña diferente, simplemente haga clic en el ícono ‘mover carpeta’ ubicado a la derecha de la sección y elija a qué pestaña desea moverla.

Alternativamente, puedes presionar la tecla ‘Añadir‘botón para agregar una sección a la pestaña seleccionada actualmente y eliminarla de su pestaña original. (Las secciones solo pueden aparecer en una sola pestaña en un diseño).

Secciones de pestaña Mover sección
Mover sección
Pestañas Secciones Añadir sección
Agregar sección

También puedes Ocultar secciones completamente usando el Ícono de Ojo. Después de ocultar una sección, la sección puede ser agregada de vuelta a la pestaña deseada usando el‘Añadir‘ botón.

Ocultar secciones
Ocultar sección

Reorganizar y eliminar pestañas

Puedes reorganizar tus pestañas haciendo clic y arrastrando el ícono de seis puntos a la izquierda del nombre de la pestaña en el panel Propiedades de la pestaña.

Y puedes eliminar una pestaña colocando el cursor del mouse sobre ella en el panel de Propiedades de la pestaña y seleccionando el ícono de la papelera. Si la pestaña tiene alguna sección, se te preguntará si deseas eliminar las secciones o transferirlas a una pestaña diferente.

Reordenar y eliminar escalones
Rearreglar y Eliminar funcionan igual para Pestañas y Pasos (para el Stepper).

Tipo de formulario: Pasos

Después de seleccionar el ‘Pasos‘tipo de formulario, una nueva sección de propiedades aparecerá en el panel Propiedades de diseño, debajo de General propiedades. Estas propiedades son idénticas a las Pestaña propiedades, y le permiten controlar la apariencia de la barra de pasos (alineación, tamaño y color).

Propiedades generales del escalador

Crear y editar pasos

Tal como el Pestaña diseño, después de seleccionar el Pasos Al seleccionar esta opción, aparecerá ‘Paso 1’ en la parte superior de tu formulario. Para crear y editar pasos, selecciona el ícono de propiedades que se encuentra a la derecha de la barra.

Para agregar un paso, selecciona la opción ‘+ Agregar paso‘el botón en la parte inferior del panel de propiedades. Cuando agregas un paso, se agregará automáticamente una nueva sección sin título al paso.

Apariencia del formulario Propiedades del paso a paso

Aquí puedes cambiar el Nombre de visualización del paso (lo que los usuarios verán) y si desean o no Usar íconos para el paso actual.

Secciones en tu formulario se puede mover entre pasos y/ocultar de la misma manera que para Pestañas Ver Administrar secciones de pestañas).

El Botón Siguiente y Botón anterior Los nombres se pueden editar para cada paso (el valor predeterminado es “Siguiente” y “Anterior”).

Nombre del paso

El Acción del botón Siguiente le da una opción del siguiente paso a mostrar cuando se selecciona el botón "siguiente":

Acción del botón Siguiente
  • Continuar al siguiente paso moverá al usuario un paso adelante (determinado por el orden del paso).
  • Ir a un paso específico. Nota: si usa esta opción para saltarse un paso (por ejemplo, pasar de Paso 1 a Paso 3), el Anterior El botón te devolverá al Paso 1, y no te avanzará a Paso 2.
  • Finalizar y mostrar botones del flujo de trabajo reemplazará el botón ‘Siguiente’ con los botones de acción del flujo de trabajo para la etapa del flujo de trabajo en la que se encuentra el registro, y de este modo finalizará el asistente.
Apariencia del formulario Rematador Acabado

Administrar secciones del Paso a Paso

El proceso para gestionar Pasos secciones es idéntico a lo discutido para el Pestaña secciones. (Véase: Administrar secciones de pestañas.)

Reorganizar y Eliminar Pasos

Reorganizando y eliminando Pasos funciona exactamente de la misma manera que lo hizo para Pestañas. Sin embargo, después de reorganizar los pasos, asegúrate de volver a revisar la configuración de tu botón Siguiente. (Ver: Reorganizar y eliminar pestañas.)

Múltiples diseños

Puedes crear múltiples diseños para tus formularios, cada uno con su propia configuración específica, y alternar entre ellos mientras creas, editas o ves un registro.

Para agregar un nuevo diseño, selecciona la lista desplegable de diseños y haz clic en‘+ Agregar nuevo‘.

Agregar Nuevas Pestañas de Diseño

Este desplegable también se utiliza para cambiar entre diseños en el Editor de formularios.

Después de agregar un nuevo diseño, el Diseño y Apariencia del Formulario Se volverá a abrir la ventana de propiedades. A continuación, podrás cambiar el nombre y la configuración del nuevo diseño.

Visibilidad del diseño te permite controlar qué diseños están disponibles en qué modos de formulario. Por ejemplo, podrías querer usar un Pasos diseño en ‘Crear’, y una Formulario diseño al ver/editar el registro para que puedas ver todos los datos en una sola página.

Diseños de formulario y pestañas

Al crear, ver o editar un registro, puedes cambiar entre diseños usando el ícono de tres puntos en la esquina superior derecha de la página del registro.

Diseño principal

El Diseño Principal es el que se mostrará al abrir un registro, asumiendo que está configurado para mostrarse en el modo en el que te encuentras actualmente: Crear, ver o editar. Puedes cambiar cuál es el Diseño Principal seleccionando la estrella junto al diseño en la lista desplegable. Esta opción no anula tu Visibilidad del diseño Configuración.

Diseño y pestañas predeterminados

Eliminar diseño

Para eliminar un diseño, cambia al diseño que deseas eliminar, abre el panel Propiedades del diseño y haz clic en el botón ‘Eliminar diseño’ en la parte inferior de la sección Propiedades generales. El botón ‘Eliminar diseño’ no se mostrará si has seleccionado el Diseño principal. Para eliminar el Diseño principal, primero deberás hacer que otro diseño sea el principal, y luego podrás eliminar el ‘antiguo diseño principal’.

Apariencia del formulario eliminar diseño

Opciones de diseño adicionales

El formulario Pestaña de Configuración contiene una opción para el ancho general del diseño del formulario, así como una opción para agregar un esquema del formulario, como un índice que muestra solo las secciones del formulario y permite al usuario saltar rápidamente entre secciones. Tenga en cuenta que estas son configuraciones generales de diseño y se mostrarán para cada diseño del formulario. (Nota: Al usar un esquema con diseños de pestañas o pasos, el esquema solo muestra las secciones en la pestaña o paso actual).

Video de demostración

Actualizado el 1 de junio de 2022
¿Fue útil este artículo?

Artículos relacionados