Control de botón en Jitterbit App Builder

Un Botón control coloca un botón clickeable en un panel. Hacer clic en un botón puede ejecutar un evento, enlazar a otra página o enlazar a otro panel, dependiendo de cómo lo configures. Esta página describe cómo agregar un control de Botón, configurar lo que sucede cuando se hace clic, controlar dónde aparece en el panel y aplicar estilos a él.

Agregar un control de botón

Para agregar un control de Botón a un panel:

1. Abre la página deseada y selecciona Cajón de acciones > Diseñador en vivo. Alternativamente, abre la pantalla de edición de la página deseada yendo a Banco de aplicaciones > Páginas.
2. Si estás usando el Diseñador en vivo, selecciona el panel donde deseas agregar el botón; sus opciones se poblarán en el Diseñador en vivo. Si estás en el Banco de aplicaciones, selecciona el panel donde deseas agregar el botón y haz clic en su botón de Controles.

3. Haz clic en + Control. Se abre el diálogo de Agregar un control:

   

4. (Opcional) Si el botón debe estar asociado con una columna subyacente, selecciónala en el campo Columna.

5. Establece Tipo de control en Botón.
6. Ingresa un Nombre. Este valor aparecerá como la etiqueta del botón.

7. En el campo Subtipo de control, selecciona si el botón debe aparecer como Primario o Secundario:

   • Primario: Se muestra como un botón principal en el panel.
   • Secundario: Se muestra como un botón secundario en el panel, con una apariencia más ligera que un botón Primario.

8. Haz clic en Siguiente.

9. Configura lo que hace el botón cuando se hace clic. Consulta Configurar el comportamiento del clic del botón a continuación.
10. Haz clic en Siguiente, revisa los cambios que propone el App Builder y haz clic en Finalizar.

Después de crear el botón, puedes establecer su ubicación o aplicar estilos desde su configuración.

Configurar el comportamiento del clic del botón

En el segundo paso del diálogo Agregar un Control, elige qué sucede cuando un usuario hace clic en el botón:

• Ejecutar un Evento: Selecciona un evento para ejecutar.
• Enlazar a Página: Selecciona una página a la que navegar.

• Enlazar a Panel: Selecciona un panel objetivo en la misma página para mostrarlo.

  Nota

  La disponibilidad de la opción Enlazar a Panel depende de la versión de App Builder:

  • En App Builder 4.64 y versiones anteriores, Enlazar a Panel está disponible solo en páginas con el diseño de Asistente.
  • En App Builder 4.65 y versiones posteriores, Enlazar a Panel está disponible en cualquier diseño de página.

  Enlazar a Panel también se comporta de manera diferente según el diseño del panel:

  • En una página de Asistente, hacer clic en el botón cambia al paso que contiene el panel objetivo. Consulta Páginas de asistente para más detalles.
  • Si el panel objetivo está en una pestaña no seleccionada dentro de un grupo de paneles que utiliza el diseño Con Pestañas, hacer clic en el botón también selecciona esa pestaña, revelando el panel. Consulta Grupos de paneles para más información sobre grupos de paneles Con Pestañas.

Ubicación del botón

Los controles de Botón se pueden colocar en una de cuatro áreas en un panel. Para establecer esto:

1. Si estás utilizando el Diseñador en Vivo, selecciona el panel que contiene el botón y haz clic en su ícono Abrir registro. Si estás en el App Workbench, selecciona el panel que contiene el botón y haz clic en su ícono Abrir registro.
2. Abre la pestaña Propiedades del Control.

3. En el campo Ubicación, selecciona una de las siguientes opciones:

   • Cuerpo: (Predeterminado.) Se muestra en línea en el panel.
   • Encabezado: Se muestra en la región del encabezado del panel, predeterminando al lado derecho.
   • Panel (Menú): Se muestra en un menú anidado en el panel, en la región superior derecha.
   • Barra de herramientas: Se muestra en la región de la barra de herramientas del panel, predeterminando a la derecha de cualquier botón de método de actualización existente (por ejemplo, Crear o Auditar).

   Las cuatro ubicaciones posibles del botón se ilustran a continuación:

   

4. Haz clic en Guardar.

Estilizar un botón

Utiliza Estilos para personalizar aún más la apariencia de un control de Botón, como su tamaño, color y grosor de fuente. Puedes personalizar un estilo si necesitas un control más granular.

1. Abre la página donde está el botón y selecciona Cajón de Acción > Diseñador en Vivo. Alternativamente, abre la pantalla de edición de la página yendo a Banco de Aplicaciones > Páginas.
2. Si estás utilizando el Diseñador en Vivo, selecciona el botón; sus opciones se llenan en el Diseñador en Vivo. Si estás en el Banco de Aplicaciones, selecciona el panel donde está el botón y haz clic en su botón de Controles, luego haz clic en el ícono de Abrir registro del botón.
3. Ve a Más > Estilos. Se abre el cuadro de diálogo de Estilos.
4. Haz clic en + Estilo.
5. Selecciona Botones de Categorías de Estilo.
6. Localiza el estilo deseado y haz clic en su botón + Agregar.
7. Sal de las pantallas de estilos y edición, luego actualiza el navegador para confirmar la actualización.