Páginas del asistente en Jitterbit App Builder

Asistente es una de las opciones de diseño de página disponibles en App Builder. Al diseñar una página con el Asistente, App Builder muestra los paneles uno a uno con los botones Anterior, Siguiente y Finalizar para navegar por las pantallas.

La página del Asistente permite agregar otros tipos de botones a la barra de navegación inferior, además de "Anterior", "Siguiente" y "Finalizar". Para más información, consulte la sección "Cómo anular los botones del Asistente" de este artículo.

En las páginas del Asistente, simplemente haga clic en un campo y todos los campos editables estarán disponibles. Para guardar los cambios, haga clic en el último panel y luego en Finalizar. Al hacer clic en la X de la esquina superior derecha, se cerrará la página sin guardar los cambios.

Existen muchos escenarios empresariales en los que se puede usar una página de asistente. Un ejemplo es un formulario de entrada de pedidos, donde hay varios pasos y se desea dividir visualmente la información en pantallas separadas.

Mejoras del asistente

Los asistentes tienen las siguientes mejoras:

• Se muestra una barra de progreso en las pantallas para seguir el paso actual en el asistente.

• Soporte para la columna Visibilidad del panel, que permite al desarrollador ocultar/mostrar/deshabilitar dinámicamente un panel:

  • Mostrar - El panel se muestra en los pasos y el usuario accede a él normalmente
  • Oculto - El panel no aparece en los pasos y el usuario lo omite
  • Deshabilitado - El panel aparece en los pasos, pero está tachado y el usuario lo omite

• Soporte explícito para botones personalizados Anterior, Siguiente y Finalizar, lo que permite al usuario promover un botón de su panel a uno de esos botones en la navegación del Asistente.

• Texto de ayuda - El texto de ayuda del panel aparece debajo de la barra de progreso.

Cómo configurar una página de asistente

1. Vaya al App Workbench
2. Haga clic en el botón + Página
3. Ingrese un nombre para la página. Por ejemplo: Detalles del pedido
4. Haga clic en Siguiente
5. Seleccione el Menú desde el que desea enlace la página. Por ejemplo: Inicio
6. Haga clic en Siguiente
7. Seleccione Asistente como diseño del panel y haga clic en Siguiente
8. Revise las actualizaciones propuestas y haga clic en Finalizar
9. Haga clic en el botón Continuar para configurar la primera pantalla en el Asistente.
10. Seleccione el tipo de panel que desea visualizar y haga clic en Siguiente. Por ejemplo: Cuadrícula
11. Seleccione la fuente del panel y haga clic en Siguiente
12. Seleccione si desea Construir automáticamente la pantalla o Elegir manualmente y haga clic en Siguiente
13. Revise las actualizaciones propuestas y haga clic en Finalizar
14. Haga clic en Siguiente para configurar la segunda pantalla en el Asistente.
15. Repita los pasos 10 a 14 hasta que tenga todas las pantallas configuradas.
16. Para realizar cambios en las pantallas del Asistente, vaya a Cajón de acciones > Diseñador en vivo

Cómo anular los botones del asistente

Como se mencionó en las Mejoras del Asistente, ahora puede anular los botones Anterior, Siguiente y Finalizar. Para ello, agregue un Tipo de Control de Botón y, a continuación, especifique el Subtipo de Botón para el botón en el panel del Asistente. Con este método, puede personalizar el comportamiento del botón.

Algunos ejemplos de casos de uso en los que podría querer personalizar un botón son ejecutar un evento personalizado cuando se presiona el botón Siguiente o navegar a una nueva página cuando se hace clic en el botón Finalizar.

1. Navegue hasta el Asistente para modificar
2. Vaya a Cajón de acciones > Diseñador en vivo
3. Haga clic en Mostrar paneles y haga doble clic en el panel en el que desea anular un botón.
4. Haga clic en el botón + Control
5. Seleccione Botón como Tipo de control
6. Proporcione un Nombre para el botón. Por ejemplo: Enviar
7. Seleccione el Subtipo de control deseado, dependiendo de dónde en el Asistente desea colocar el botón
   • Siguiente = Botón del asistente que avanza a la siguiente pantalla
   • Finalizar = Botón del asistente que completa y finaliza el asistente
   • Anterior = Botón del asistente que se mueve a la diapositiva anterior
8. Haga clic en Siguiente
9. Opcionalmente, asigne un evento para ejecutar o una página para enlace y haga clic en Siguiente
10. Revise las actualizaciones propuestas y haga clic en Finalizar

Configurar un botón de finalización

El botón Finalizar de un asistente es una configuración especial. Un botón Finalizar solo se mostrará cuando esté definido en el último panel visible del asistente. Para configurar o anular un botón Finalizar, debe hacerlo desde el último panel visible del asistente.

Si su asistente tiene rutas condicionales, puede definir un botón Finalizar para cada panel que sea el último visible y App Builder se ajustará para mostrar el botón Siguiente o Finalizar como visible, según corresponda. Si necesita que el botón Finalizar aparezca antes de la última página visible, puede definir un botón Siguiente u otro, configurar la etiqueta como Finalizar y cerrarla o navegar a otra página para obtener el efecto deseado.

1. Navegue hasta el Asistente para modificar
2. Vaya a Cajón de acciones > Diseñador en vivo
3. Haga clic en la pestaña Todos los paneles
4. Localice el último panel visible y haga clic en el ícono para Abrir registro
5. Haga clic en + Control
6. Establezca el Tipo de control en Botón
7. Establezca el Subtipo de control en Finalizar
8. Introduce el Nombre que quieres que aparezca en el botón. Por ejemplo: Enviar
9. Haga clic en Siguiente
10. Si el botón debe ejecutar un evento o enlace a una página, configure esos valores
11. Haga clic en Siguiente
12. Revise las actualizaciones propuestas y haga clic en Finalizar