Control de botón en Jitterbit App Builder

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

Agregar un control de botón

Para agregar un control Botón a un panel:

1. Abre la página deseada y selecciona Action Drawer > Live Designer. Como alternativa, abre la pantalla de edición de la página deseada yendo a App Workbench > Pages.
2. Si usas Live Designer, selecciona el panel donde deseas agregar el botón; sus opciones se rellenan en Live Designer. Si estás en App Workbench, selecciona el panel donde deseas agregar el botón y haz clic en su botón Controls.

3. Haz clic en + Control. Se abre el diálogo Add a Control:

   

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

5. Establece Control Type en Button.
6. Ingresa un Name. Este valor aparece como la etiqueta del botón.

7. En el campo Control Subtype, selecciona si el botón debe aparecer como Primary o Secondary:

   • Primary: Se muestra como un botón principal en el panel.
   • Secondary: Se muestra como un botón secundario en el panel, con una apariencia más clara que un botón Primary.

8. Haz clic en Next.

9. Configura qué hace el botón cuando se hace clic en él. Consulta Configure button click behavior a continuación.
10. Haz clic en Next, revisa los cambios que propone App Builder y haz clic en Finish.

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

Configurar el comportamiento al hacer clic en el botón

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

• Execute an Event: Selecciona un evento para ejecutar.
• Link to Page: Selecciona una página a la que navegar.

• Link to Panel: Selecciona un panel de destino en la misma página para traerlo a la vista.

  Nota

  La disponibilidad de la opción Link to Panel depende de la versión de App Builder:

  • En App Builder 4.64 y anteriores, Link to Panel está disponible solo en páginas con el diseño Wizard.
  • En App Builder 4.65 y posteriores, Link to Panel está disponible en cualquier diseño de página.

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

  • En una página Wizard, hacer clic en el botón cambia al paso que contiene el panel de destino. Consulta Wizard pages para más detalles.
  • Si el panel de destino está en una pestaña no seleccionada dentro de un grupo de paneles que usa el diseño Tabbed, hacer clic en el botón también selecciona esa pestaña, revelando el panel. Consulta Panel groups para más información sobre grupos de paneles Tabbed.

Ubicación del botón

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

1. Si usas Live Designer, selecciona el panel que contiene el botón y haz clic en su icono Open record. Si estás en App Workbench, selecciona el panel que contiene el botón y haz clic en su icono Open record.
2. Abre la pestaña Control Properties.
3. En el campo Location, selecciona una de las siguientes opciones:
   • Body: (Predeterminado.) Se muestra en línea en el panel.
   • Header: Se muestra en la región del encabezado del panel, por defecto en el lado derecho.
   • Panel (Menu): Se muestra en un menú anidado en el panel, en la región superior derecha.
   • Toolbar: Se muestra en la región de la barra de herramientas del panel, por defecto a la derecha de cualquier botón de método de actualización existente (por ejemplo, Create o Audit).

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

1. Haz clic en Guardar.

Personalizar 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 se encuentra el botón y selecciona Panel de acciones > Diseñador en vivo. Como alternativa, abre la pantalla de edición de la página accediendo a Banco de trabajo de la aplicación > Páginas.
2. Si utilizas el Diseñador en vivo, selecciona el botón; sus opciones se cargan en el Diseñador en vivo. Si estás en el Banco de trabajo de la aplicación, selecciona el panel donde se encuentra el botón y haz clic en su botón de Controles, luego haz clic en el icono Abrir registro del botón.
3. Ve a Más > Estilos. Se abre el 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 los estilos y las pantallas de edición, luego actualiza el navegador para confirmar la actualización.

Cambiar el relleno de un icono de sólido a regular

App Builder incluye imágenes de Icono que utilizan el estado de icono Sólido por defecto, lo que significa que el icono aparece con un relleno sólido. En un botón que ya tiene un icono asignado, puedes configurar un estilo para anular esto y utilizar el estado de icono Regular en su lugar, de modo que el icono aparezca como un contorno de la forma sin relleno. Consulta Categorías de icono para ver los otros conjuntos de iconos disponibles al seleccionar un icono.

Los siguientes ejemplos muestran el mismo icono address-card en un control de Botón en cada estado:

Después de llegar al diálogo de Estilos (pasos 1-4 anteriores):

1. Selecciona Fuente de Categorías de estilo, para que la lista de estilos se reduzca a opciones relacionadas con fuentes.
2. Localiza Grosor de fuente 400 y haz clic en su botón + Agregar. Esto agrega un estilo de grosor de fuente al control que luego puedes editar.
3. Haz clic en x para salir de la pantalla de estilo.
4. Haz clic en el icono Abrir registro del estilo que acabas de crear para abrir su registro completo.
5. Haz clic en el botón Editar estilo.
6. Selecciona Controles del panel de Componentes, ya que estás personalizando un control en lugar de una página o panel.
7. Haz clic en Crear bajo Estilos.
8. Selecciona Icono de Botón como el Área, de modo que el estilo apunte específicamente al icono mostrado en un control de Botón.
9. Selecciona Fuente como el Tipo de estilo, para que coincida con la propiedad de Grosor de fuente que estás a punto de establecer.
10. Establece Grosor de fuente en normal. Esto anula el grosor 400 agregado en el paso 2, que es lo que cambia el icono de sólido a regular.
11. Haz clic en Guardar.
12. Actualiza la vista de la aplicación para confirmar que el icono ahora aparece en su estado Regular.