Páginas de asistente en Jitterbit App Builder

El diseño de Asistente es una de las opciones de diseño de página disponibles en App Builder. En una página que utiliza el diseño de Asistente, App Builder muestra cada panel como un paso separado, con botones de Anterior, Siguiente y Finalizar para navegar entre ellos. Esta página describe cómo configurar una página de Asistente, utilizar sus características de navegación integradas y personalizar sus botones de navegación.

En una página de Asistente, al hacer clic en cualquier campo, se habilitan todos los campos editables en ese paso para su edición. Para guardar los cambios, navega hasta el último paso y luego haz clic en Finalizar. Haz clic en la X en la esquina superior derecha para cerrar la página sin guardar los cambios.

Las páginas de Asistente son útiles siempre que necesites guiar a los usuarios a través de un proceso de varios pasos, como un formulario de entrada de pedidos que separa cada paso en su propia pantalla:

Configurar una página de asistente

Crear la página

Para crear una página utilizando el diseño de Asistente:

1. Ve a App Workbench y haz clic en + Página.
2. Ingresa un Nombre de Página, por ejemplo Detalles del Pedido.
3. Haz clic en Siguiente.
4. En Seleccionar un Menú, selecciona el menú desde el cual deseas vincular la página, por ejemplo Inicio.
5. Haz clic en Siguiente.
6. En Seleccionar un Diseño, selecciona Asistente.
7. Haz clic en Siguiente.
8. Revisa las actualizaciones propuestas y haz clic en Finalizar.

Agregar una pantalla

Cada pantalla en una página de Asistente es un panel, agregado de la misma manera que cualquier otro panel en una página:

1. Si estás utilizando el Diseñador en Vivo, haz clic en + Panel. Si estás en el App Workbench, haz clic en + Elegir Tipo de Panel en el panel de Diseño de Panel de Página. Se abre el diálogo Crear un Panel.
2. Selecciona el tipo de panel para mostrar, por ejemplo Cuadrícula, y haz clic en Siguiente.
3. Selecciona la fuente del panel y haz clic en Siguiente.
4. Selecciona si deseas Construir Automáticamente el panel o Elegir Manualmente, luego haz clic en Siguiente.
5. Haz clic en Finalizar.
6. Repite estos pasos para cada pantalla adicional que desees agregar a la página de Asistente.

Después de agregar una pantalla, puedes personalizar sus botones de navegación o configurar un botón de Finalizar.

Navegación de páginas del asistente

Las páginas del asistente incluyen las siguientes características de navegación:

• Barra de progreso: Se muestra en cada pantalla para rastrear el paso actual en la página del asistente.

• Visibilidad del panel: Controla si un panel aparece como un paso en la página del asistente, utilizando el campo de Visibilidad del Panel del panel:

  • Mostrar: El panel se lista como un paso, y los usuarios navegan hacia él normalmente.
  • Oculto: El panel no se lista como un paso, y los usuarios lo omiten.
  • Deshabilitado: El panel se lista como un paso, pero aparece tachado, y los usuarios lo omiten.

• Texto de ayuda: El texto de ayuda de un panel aparece debajo de la barra de progreso.

• Enlace al Panel: Hacer clic en un botón configurado con la opción Enlace al Panel cambia la página del asistente al paso que contiene el panel objetivo. Esta opción también está disponible en otros diseños de página; consulta Controles de botón para más detalles.

Las páginas del asistente también admiten botones personalizados de Anterior, Siguiente y Finalizar, lo que te permite promover un botón de un panel para reemplazar uno de esos botones en la navegación de la página. Consulta Personalizar botones de navegación a continuación.

Personalizar botones de navegación

Puedes anular los botones de Anterior, Siguiente y Finalizar en una página del asistente. Esto te permite personalizar el comportamiento del botón, por ejemplo, para ejecutar un evento personalizado cuando se hace clic en el botón Siguiente, o para navegar a una nueva página cuando se hace clic en el botón Finalizar.

Para anular los botones de navegación de una página del asistente:

1. Abre la página deseada y selecciona Cajón de Acción > Diseñador en Vivo. Alternativamente, abre la pantalla de edición de la página deseada yendo a Banco de Trabajo de la Aplicación > Páginas.
2. Si estás utilizando el Diseñador en Vivo, selecciona el panel donde deseas anular un botón; sus opciones se llenan en el Diseñador en Vivo. Si estás en el Banco de Trabajo de la Aplicación, selecciona el panel donde deseas anular un botón y haz clic en su botón de Controles.
3. Haz clic en + Control. Se abre el diálogo Agregar un Control.
4. Establece el Tipo de Control en Botón.
5. Ingresa un Nombre para el botón, por ejemplo Enviar.

6. En el campo de Subtipo de Control, selecciona el botón que deseas dirigir:

   • Siguiente: El botón de navegación que avanza a la siguiente pantalla.
   • Finalizar: El botón de navegación que completa y termina la página del Asistente.
   • Anterior: El botón de navegación que regresa a la pantalla anterior.

7. Haz clic en Siguiente.

8. Opcionalmente, asigna un evento para ejecutar o una página para vincular, luego haz clic en Siguiente.
9. Revisa las actualizaciones propuestas y haz clic en Finalizar.

Configurar un botón de Finalizar

Un botón de Finalizar es un caso especial: solo aparece cuando está definido en el último panel visible de una página del Asistente. Para configurar o anular un botón de Finalizar, debes hacerlo desde el último panel visible de la página del Asistente.

Si tu página del Asistente tiene rutas condicionales, puedes definir un botón de Finalizar en cada panel que podría terminar siendo el último visible, y el App Builder mostrará el botón Siguiente o Finalizar, según corresponda. Si necesitas que un botón de Finalizar aparezca antes de la última pantalla visible, define un botón de Siguiente (u otro), establece su Etiqueta en Finalizar, y haz que cierre la página del Asistente o navegue a otra página para lograr el mismo efecto.

1. Abre la página deseada y selecciona Cajón de Acción > Diseñador en Vivo. Alternativamente, abre la pantalla de edición de la página deseada yendo a Banco de Trabajo de la App > Páginas.
2. Si estás usando el Diseñador en Vivo, haz clic en la pestaña Todos los Paneles, localiza el último panel visible y haz clic en su ícono de Abrir registro. Si estás en el Banco de Trabajo de la App, localiza el último panel visible en el panel de Diseño del Panel de Página y haz clic en su ícono de Abrir registro.
3. Haz clic en + Control.
4. Establece Tipo de Control en Botón.
5. Establece Subtipo de Control en Finalizar.
6. Ingresa el Nombre que deseas que aparezca en el botón, por ejemplo Enviar.
7. Haz clic en Siguiente.
8. Si el botón debe ejecutar un evento o vincular a una página, establece esos valores.
9. Haz clic en Siguiente.
10. Revisa las actualizaciones propuestas y haz clic en Finalizar.