Saltar al contenido

¡Transforma tus conexiones en dinero para el final del año con nuestro nuevo Programa de Indicación de Clientes! Descubre más

Esta documentación es para la versión 4 y posteriores de App Builder, el nuevo nombre de Vinyl. Accede a la documentación de Vinyl aquí.

Control de botones en Jitterbit App Builder

Los controles de botón le permiten colocar un control en un panel que parece un botón y ofrecen opciones de configuración para controlar la ubicación, el comportamiento al hacer clic (si lo desea), el color, la etiqueta y más.

Si se desea un control adicional sobre la apariencia de un botón, App Builder lo admite a través de Estilos.

Cómo configurar un control de botón

  1. Desde la vista de la aplicación, vaya a Action Drawer > Live Designer
  2. Si el botón debe estar asociado con una columna subyacente, seleccione el valor
  3. Establezca el Tipo de control en Botón
  4. Asigna un Nombre. Este valor aparecerá en el botón.
  5. Seleccione el valor Subtipo de control para definir si el botón debe tener una apariencia Principal o Secundaria.

    1. Principal = aparece como botón principal en el panel
    2. Secundario = aparece como un botón secundario en el panel, más claro que un botón principal
  6. Haga clic en Siguiente

  7. Si el botón debe Ejecutar un evento al hacer clic, seleccione el evento apropiado
  8. Si el botón debe Enlazar a la página al hacer clic, seleccione la página adecuada
  9. Haga clic en Siguiente
  10. Revise las actualizaciones que realizará App Builder al agregar el control Botón y haga clic en Finalizar
  11. Si se desea una Ubicación diferente para la colocación del Botón, seleccione el valor apropiado

    1. Cuerpo = comportamiento predeterminado que normalmente se muestra en línea en el Panel
    2. Encabezado = se muestra en la región del encabezado del Panel, el valor predeterminado es la región derecha del panel
    3. Panel (Menú) = se muestra en un menú anidado que se muestra en el Panel, en la región superior derecha del Panel
    4. Barra de herramientas = se muestra en la región de la barra de herramientas del Panel, de forma predeterminada a la derecha de cualquier botón de Método de actualización existente (por ejemplo, Crear, Auditoría)
  12. Revise las opciones disponibles y realice cualquier actualización de configuración adicional.

  13. Haga clic en Guardar

Cómo darle estilo a un botón

Los estilos permiten personalizar aún más un control de botón. Usa los estilos disponibles para cambiar aspectos como el tamaño, el color y el grosor de la fuente del botón. Puedes personalizar un estilo si necesitas mayor detalle.

  1. Navegue a la página de la aplicación con el control Botón
  2. Vaya a Cajón de acciones > Diseñador en vivo
  3. Seleccione el control Botón desde la vista de página
  4. Desde la región de edición, vaya a Más... > Estilos
  5. Haga clic en + Estilo
  6. Seleccione Botones en Categorías de estilo
  7. Localice el Estilo deseado y haga clic en el botón + Agregar correspondiente. Por ejemplo: App Builder - Botón de tipografía grande
  8. Salga de las pantallas de Estilos y edición, actualice el navegador y confirme las actualizaciones.

Opciones de ubicación de los botones

Los controles de botón se pueden configurar para ubicarse en cuatro áreas diferentes de un panel mediante el campo Ubicación. La ubicación se define mediante la opción Ubicación seleccionada en el modo de edición de controles. Las áreas en las que se pueden colocar los botones en los paneles incluyen:

  1. Cuerpo = comportamiento predeterminado que normalmente se muestra en línea en el Panel
  2. Encabezado = se muestra en la región del encabezado del Panel, por defecto en la región derecha del panel
  3. Panel (Menú) = se muestra en un menú anidado que se muestra en el Panel, en la región superior derecha del Panel
  4. Barra de herramientas = se muestra en la región de la barra de herramientas del Panel, de manera predeterminada a la derecha de cualquier botón de Método de actualización existente (por ejemplo, Crear, Auditoría)

ubicacionesdebotones.png

Ilustración de las diferentes ubicaciones de botones disponibles en App Builder