Páginas del Asistente¶

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

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

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 en la esquina superior derecha, se cerrará la página sin guardar los cambios.

Hay muchos escenarios comerciales en los que puede usar una página del Asistente. Un ejemplo es un formulario de ingreso de pedidos, donde hay varios pasos a lo largo del camino y 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 Crear 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 apuntar al 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 a la que 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 de caso especial. Un botón Finalizar solo se mostrará cuando esté definido en el último panel visible de un 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 pueda ser el último panel visible y App Builder se ajustará para mostrar el botón Siguiente o Finalizar como visible, según corresponda. Si necesita que aparezca un botón Finalizar antes de la última página visible, puede definir un botón Siguiente u otro, configurar la etiqueta en 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