Controles en Jitterbit App Builder

Descripción general

Un control muestra una sola pieza de datos, como texto, una imagen o una fecha. Los controles son los bloques de construcción de una aplicación de App Builder: uno o más controles conforman un panel, y uno o más paneles conforman una página, por lo que los controles específicos que se eligen determinan qué pueden ver y editar los usuarios. Los controles pueden ser de varios tipos, que controlan cómo se ven los datos mostrados; consulta Tipos de control para ver una lista de todos los tipos disponibles.

Esta página describe la estructura del diálogo de configuración de un control.

Configurar un control

Una vez que se ha agregado un control a un panel (consulta Agregar y eliminar un control para obtener más detalles), se puede configurar mediante su diálogo de configuración, accesible desde el Live Designer o el App Workbench. Desde Live Designer, haz clic en cualquier control en cualquier página y su configuración aparecerá en el diseñador. Desde la pestaña Pages de App Workbench, ve a la página Page Edit de la página donde está el control y haz clic en el botón Controls del panel que lo contiene. Cuando aparezca la lista de controles, haz doble clic en la fila o haz clic en el icono Open record para ver la configuración del control.

La configuración del control varía mucho según el tipo de control. Esta página describe las características más comunes, mientras que opciones y detalles específicos se pueden encontrar en la página dedicada de cada tipo de control (consulta Tipos de control para ver una lista de todos los tipos disponibles). Por ejemplo, la captura de pantalla a continuación muestra el diálogo de configuración de un control Inline Menu:

Control Properties

En la pestaña Control Properties, se definen la configuración básica del control. Las opciones mostradas varían mucho según el tipo de control. La configuración común incluye Control Name, Control Type, Active y Column. Por ejemplo, estas son las opciones mostradas en la pestaña Control Properties para un control Text:

Consulta la página de tu tipo de control específico en Types para los campos que agrega específicamente.

Position & Width

Como en todas las pestañas de este diálogo, los campos exactos de esta pestaña pueden variar según el tipo de control. Para la mayoría de los tipos de control, muestra un único acordeón Position and Size:

Parent: El panel o contenedor al que pertenece el control.
Change Position: Reordena el control entre sus hermanos, usando las flechas hacia arriba y hacia abajo o ingresando directamente un número de posición.
Width: Ajusta el ancho del control, ya sea directamente en el campo o utilizando los botones de incremento y decremento.
Alignment: Alinea el contenido del control a la izquierda, centro o derecha.
Edit Options: Establece si el control está Available, Hidden, Read only o Required.

Consulta Crea una app sencilla para ver un tutorial que utiliza varios de estos campos.

Label

Como las otras pestañas, los campos exactos de esta pueden variar según el tipo de control seleccionado. Para la mayoría de los tipos de control, muestra un único acordeón Label:

Label Visibility: Muestra u oculta completamente la etiqueta del control.
Label: El texto de la etiqueta a mostrar.
Label Type: Muestra la etiqueta Al lado del valor del control, o Apilada encima de él.

Edge Case

Edge Case contiene las configuraciones menos utilizadas de un control. Los acordeones que aparecen aquí, así como sus campos exactos, varían mucho según el tipo de control. Esta captura de pantalla muestra la pestaña Edge Case para un control de Texto:

Edit Options (Rare): Alterna entre Filter and Download y Filter only.
Excel Mode: Permite editar y guardar el valor de un control directamente, como lo haría una celda de una hoja de cálculo, en lugar de entrar en un estado de edición separado.
Initial Focus: (A partir de App Builder 4.69.) Convierte el control en un candidato para recibir el enfoque del teclado primero cuando su panel, diálogo de filtro o fila de cuadrícula se abre para edición. Esta opción no está disponible para todos los tipos de control. Por ejemplo, no aparece en un control de Button. Consulta Initial Focus para más detalles.
Wrap: Ajusta el contenido mostrado del control en lugar de permitir que se desborde.
Widget: Adjunta un widget al control.
Hover (Help): Establece el texto de ayuda que aparece cuando un usuario pasa el cursor sobre el control.
Linking > Link To Panel: Vincula el control a otro panel en la misma página.

Más allá de este acordeón base, algunos tipos de control muestran uno o ambos de los siguientes acordeones adicionales, y algunos no muestran ninguno. Un control de Checkbox, por ejemplo, muestra solo el acordeón base:

Usa las configuraciones en este acordeón para convertir el valor del control en un vínculo a otra página, un evento o una URL:

Consulta Configurar un control como un enlace de navegación para saber qué tipos de control lo soportan y cómo configurarlo.

Mobile Settings

Usa las configuraciones en este acordeón para controlar si el control se renderiza usando la interfaz nativa del dispositivo móvil o la propia interfaz de App Builder en pantallas pequeñas:

Consulta Native mobile controls para saber cómo configurar esto a nivel de aplicación y para un control individual.

Initial Focus

Selecciona Initial Focus en la pestaña Edge Case de un control para que ese control reciba el enfoque del teclado automáticamente cuando su panel, diálogo de filtro o fila de cuadrícula se abre para edición. Los usuarios pueden comenzar a escribir sin hacer clic primero en el campo. Esto es útil para entrada de datos de alto volumen, como un campo de escaneo de códigos de barras o un campo de búsqueda. Esta opción está disponible a partir de App Builder 4.69.

Cuándo se aplica Initial Focus

Un panel recibe el enfoque inicial mientras se encuentra en un estado de inserción o edición, incluyendo una página que se abre en un estado de inserción o edición. Un panel que solo muestra datos recibe el enfoque inicial al cargar la página solo si contiene un control en Excel Mode que tiene Initial Focus seleccionado.
Un diálogo de filtro recibe el enfoque inicial cuando se abre.
Una fila de cuadrícula recibe el enfoque inicial cuando entra en un estado de inserción o edición. Si el usuario estableció previamente una columna de enfoque para la fila, esa columna mantiene el enfoque.
La misma configuración se aplica tanto a los estados de inserción como de edición.
Cada panel, diálogo de filtro y fila de cuadrícula puede tener su propio campo de enfoque inicial. Cuando una página tiene más de un panel, un control con Initial Focus seleccionado toma el enfoque antes que el primer control en otro panel.

Seleccionar más de un campo

Se puede seleccionar Initial Focus en más de un control en el mismo panel. Esto es útil cuando los controles se muestran solo bajo ciertas condiciones. Los controles ocultos o deshabilitados se omiten, y el primer control seleccionado restante en el panel recibe el foco. Si ninguno de los controles seleccionados puede recibir el foco, este va al primer control disponible, como sucede cuando no hay ningún control seleccionado.

Limitaciones

Los controles ocultos o deshabilitados, y los controles que no pueden recibir el foco, nunca reciben el foco inicial.
El foco inicial no mueve el foco si el usuario ya está en un control en el mismo panel, diálogo o fila. Si el usuario comienza a editar haciendo clic en un control, ese control mantiene el foco.
El foco inicial no cambia el orden de Tab o Shift + Tab.
Dentro de un marco incrustado que no tiene el foco, el navegador evita el foco automático, por lo que el foco inicial no tiene efecto allí.

Configuración adicional del control

Algunos ajustes estrechamente relacionados se encuentran fuera del diálogo propio del control. Los controles relacionados se pueden organizar en conjunto; consulta Control groups para agruparlos en un acordeón, grupo de campos o conjunto de pestañas. En un panel de varias filas, la prioridad de una columna, su orden de clasificación, su ancho y si está fija se configuran por separado del control en sí. Las opciones de control intrínseco añaden comportamiento de creación, actualización y eliminación incorporado a un control vinculado a una columna, y un control de Button, Icon o Image también puede mostrar una insignia.