🎛️ Variantes de presentación (botones, tarjetas, iconos, imágenes, deslizadores, valoraciones)

Muchos tipos de campo pueden mostrarse de formas distintas en el formulario — un desplegable de selección se convierte, por ejemplo, en grandes mosaicos con iconos, un interruptor Sí/No en dos botones, un campo numérico en un control deslizante o en una valoración con estrellas.

Lo más importante: solo cambia la apariencia. El valor guardado, la conexión con onOffice, las reglas, los envíos y la salida en PDF permanecen exactamente iguales en todas las presentaciones. Así que puedes cambiar la presentación en cualquier momento sin riesgo — incluso en formularios que ya están en uso.

Elegir la presentación

  1. Abre en el editor de formularios la configuración de un campo.
  2. Debajo de los ajustes básicos encontrarás la sección «Presentación» — aparece automáticamente en todos los tipos de campo que ofrecen variantes.
  3. Haz clic en un mosaico y guarda el campo. «Estándar» es siempre la presentación anterior.

También al crear un campo nuevo, la paleta de tipos de campo te pregunta directamente por la presentación en cuanto el tipo de campo elegido ofrece variantes — puedes fijarla ahí mismo o empezar con «Estándar».

Variantes disponibles

Campos de selección única (singleselect)

Presentación Descripción
Estándar El desplegable de siempre
Botones de opción Todas las opciones una debajo de otra, clicables de forma clásica
Grupo de botones Opciones como botones uno junto a otro — ideal con 2–5 opciones (p. ej. compra/alquiler)
Selección de tarjetas Mosaicos grandes, opcionalmente con un texto descriptivo por opción
Selección de iconos Mosaicos con icono + etiqueta por opción (p. ej. tipo de inmueble: casa, piso, terreno …)
Selección de imágenes Mosaicos de imágenes — imágenes de tu biblioteca de medios
Escala Likert Todas las opciones como botones de escala del mismo ancho en una fila (p. ej. «se aplica … no se aplica»)

La opción elegida se resalta con el color de acento de tu formulario.

Campos dependientes: También el tipo de objeto (depende del tipo de inmueble) y el tipo de acción (depende de la clase de acción) pueden usar todas las presentaciones de selección única. Los mosaicos se filtran automáticamente: mientras no se haya elegido un valor padre, aparece el aviso «Selecciona primero …»; tras la elección solo se muestran las opciones adecuadas. El campo padre, a su vez, puede tener cualquier presentación. Si el campo padre no está en el formulario, se muestran todas las opciones.

Campos de selección múltiple (multiselect)

Presentación Descripción
Estándar El desplegable de selección de siempre
Lista de casillas Todas las opciones como casillas visibles
Chips Botones que se pueden marcar y desmarcar — compactos cuando hay muchas opciones (p. ej. características del equipamiento). Las esquinas siguen el diseño de tu formulario (recto/redondeado/píldora). Si no hay texto de ayuda configurado, propform muestra automáticamente «Selección múltiple posible» o el número mínimo/máximo configurado debajo del campo (se aplica a todas las presentaciones de selección múltiple)
Selección de iconos Mosaicos con iconos, con selección múltiple
Selección de imágenes Mosaicos de imágenes, con selección múltiple

Nota sobre valores padre/hijo: La selección/deselección automática de valores relacionados (p. ej. elegir un estado federado selecciona también sus regiones) solo existe en el desplegable estándar. En las demás presentaciones, todos los valores se pueden marcar libremente — los valores hijo aparecen sangrados o marcados con ▸. Por eso, al guardar una presentación, el modo de selección múltiple se pone automáticamente en «onOffice» (marcado libre).

Además, en todas las presentaciones de selección múltiple puedes definir un número mínimo y máximo de opciones seleccionables («elige hasta 3»): el mínimo se aplica en cuanto se selecciona algo (o siempre en los campos obligatorios); al alcanzar el máximo, las demás opciones se bloquean.

Campos Sí/No

Presentación Descripción
Estándar El interruptor de siempre (toggle)
Casilla de verificación Casilla individual clásica, p. ej. para consentimientos
Botones Sí/No Dos botones grandes — perfectos para móvil y para el uso in situ. Como campo obligatorio, esta presentación exige una decisión activa. Las etiquetas se pueden cambiar libremente (p. ej. «Yes/No» para un formulario en inglés), opcionalmente con iconos de marca de verificación/cruz

Campos numéricos

Presentación Descripción
Estándar El campo de entrada de siempre
Control deslizante Deslizador con valor en directo (incl. unidad) y etiquetas automáticas de mín./máx. El valor mínimo, el valor máximo y el intervalo provienen de los ajustes numéricos del campo. Las etiquetas propias debajo del deslizador (p. ej. económico;medio;caro) las introduces directamente en la sección de presentación. Opcionalmente, el valor también se puede escribir (campo de entrada debajo del deslizador). Un deslizador sin tocar — igual que un campo vacío — no envía ningún valor
Valoración 1–N símbolos (N = valor máximo, por defecto 5) — perfecta para formularios de feedback. Como símbolo puedes elegir entre estrellas, corazones, emoticonos (escala de estado de ánimo, 2–5 niveles) o un icono propio de la biblioteca de iconos. Se guarda un número entero normal
Escala (0-10) Botones numéricos en una fila — la clásica pregunta de recomendación. El rango sigue al valor mínimo/máximo (por defecto 0–10)

En la valoración, la escala y la escala Likert puedes además etiquetar los extremos (p. ej. a la izquierda «muy improbable», a la derecha «muy probable»), para que los visitantes sepan de inmediato qué significa cada extremo.

El control deslizante, la valoración y la escala están disponibles en campos de números enteros y decimales.

Criterios de búsqueda de/a

Presentación Descripción
Estándar Dos campos de entrada «de» y «a»
Deslizador de/a Un deslizador con dos controles y visualización en directo del rango elegido (p. ej. «200.000 € – 600.000 €») — ideal para precio, superficie o habitaciones en el perfil de búsqueda. La unidad proviene del campo de onOffice o de tu ajuste de unidades. Los controles sin tocar — igual que los campos vacíos — no envían ningún valor. Opcional: los valores también se pueden escribir, más un rango preestablecido como posición inicial

Campos de fecha

Presentación Descripción
Estándar El selector de fecha nativo del navegador
Calendario integrado Un calendario siempre visible en el idioma de tu formulario — se guarda exactamente el mismo formato de fecha que con el campo estándar. Los días seleccionables se pueden restringir: solo futuro (p. ej. cita de visita), solo pasado, fecha mínima/máxima fija, bloquear fines de semana

Diseñar opciones (descripciones, iconos, imágenes)

En las presentaciones tarjetas, selección de iconos y selección de imágenes, debajo del selector de presentación aparece el área «Diseñar opciones»: una fila por cada valor clave de onOffice del campo.

  • Descripción — texto opcional que aparece debajo del título de la opción (en tarjetas y en mosaicos de iconos e imágenes).
  • Icono — abre el selector de iconos con más de 5.000 iconos (Tabler Icons). La categoría «Inmuebles y frecuentes» muestra los iconos más importantes con denominaciones en alemán; la búsqueda entiende términos en alemán y en inglés (p. ej. «heating», «key», «euro»).
  • Imagen — abre el selector de la biblioteca de medios (subir, biblioteca o URL externa).

Las opciones sin icono/imagen asignados muestran simplemente su etiqueta (o un marcador de posición neutro en la selección de imágenes). Las entradas vacías se ignoran.

Más ajustes según la presentación

Según la presentación elegida, en la sección «Presentación» aparecen ajustes adicionales apropiados:

  • Tamaño de las tarjetas (tarjetas, selección de iconos e imágenes): compacto / normal / grande.
  • Color de los iconos (selección de iconos, botones Sí/No, grupo de botones): color propio para los iconos — vacío = color del texto del formulario.
  • Iconos en el grupo de botones y en la escala Likert: los iconos asignados en «Diseñar opciones» aparecen también delante de la etiqueta de la opción en el grupo de botones y sobre los botones de la escala Likert.
  • Iconos Sí/No propios: en lugar de marca de verificación/cruz se pueden elegir iconos cualesquiera de la biblioteca (p. ej. pulgar arriba/abajo).
  • Prellenado separado de/a: en los criterios de búsqueda de/a, «de» y «a» se pueden prellenar por separado — también en la presentación estándar (el valor estándar clásico sigue rellenando ambos lados por igual; el prellenado separado tiene prioridad).
  • Formato de imagen y recorte (selección de imágenes): cuadrado, 4:3 o 16:9; «Rellenar» recorta la imagen para ajustarla, «Ajustar» la muestra completa — ideal para logotipos.
  • Columnas (botones de opción, lista de casillas): distribuir listas largas en 2 o 3 columnas (en móvil siempre una columna).
  • Mostrar centrado: los botones, mosaicos, chips, la valoración, la escala y el calendario integrado se pueden alinear al centro en lugar de a la izquierda — en los deslizadores se centra el campo de entrada opcional.

Bueno saberlo

  • Las etiquetas personalizadas de los ajustes de selección («Cambiar etiquetas de claves») se aplican en todas las presentaciones.
  • Campo obligatorio, reglas, prellenado, solo lectura — todo funciona como de costumbre en cualquier presentación.
  • Deshacer una selección: Un clic en la opción ya seleccionada la deselecciona de nuevo (mosaicos, botones, radio, Likert, Sí/No, valoración, escala). En el deslizador, el deslizador de/a y el calendario integrado aparece un pequeño enlace «vaciar» en cuanto hay un valor establecido. Así los visitantes pueden — como con el campo estándar — enviar conscientemente «sin respuesta».
  • Atrás del navegador: Las entradas se conservan en todas las variantes de presentación cuando los visitantes navegan hacia atrás en el navegador — incluidos el deslizador, el deslizador de/a y el calendario integrado.
  • Range-Slider existente: Si utilizas el range-slider anterior (mediante «Convertir en campo especial»), sigue funcionando sin cambios — puedes crear tantos más como quieras, tus formularios se mantienen coherentes. El nuevo control deslizante de «Presentación» es la alternativa más moderna, con valor en directo.
  • Por API, las presentaciones se controlan mediante las propiedades de campo display_variant y select_option_meta — más detalles en la referencia de la API.