Agregar funcionalidad dinámica a un botón
2 Tareas
10 minutos
Escenario
Después de que se aprueba una solicitud de asistencia en carretera, se envía un proveedor de servicio a la ubicación indicada por el cliente. Para realizar esta tarea, los representantes de servicio al cliente (CSR) solicitan la posibilidad de verificar y modificar la dirección de servicio cuando seleccionan el proveedor de servicio.
Agregue un botón a la vista Seleccionar proveedor de servicio para que el CSR pueda verificar la dirección de servicio provista por el cliente.
La siguiente tabla incluye las credenciales que necesita para completar el reto.
| Rol | Nombre de usuario | Contraseña |
|---|---|---|
| Application Developer | author@gogoroad | pega123! |
Nota: El entorno de práctica podría admitir completar varios retos. Como resultado, la configuración que se muestra en el recorrido del reto podría no coincidir exactamente con su entorno.
Recorrido del Reto
Tareas detalladas
1 Agregar un botón a la vista Seleccionar proveedor de servicio
- En el panel de navegación de App Studio, haga clic en Case types > Assistance Request (Tipos de casos > Solicitud de asistencia).
- Haga clic en Save and run (Guardar y ejecutar) para crear un nuevo caso de solicitud de asistencia (Assistance Request).
- Avance en el caso hasta el paso Identify location (Identificar ubicación) y luego escriba una dirección en los campos Street, City y State (Calle, Ciudad y Estado).
Nota: El campo Address (Dirección) se rellena cuando avanza hasta el paso de Identificación de vehículo.
- Avance en el caso hasta el paso Select service provider (Seleccionar proveedor de servicios), introduciendo información en todos los campos obligatorios.
- En el encabezado de App Studio, haga clic en Design (Diseño) para entrar al modo de diseño.
- Debajo de la etiqueta Seleccionar proveedor de servicio, pase el cursor por encima de la sección del mapa y luego haga clic en Edit this section (Editar esta sección) para abrir el panel de configuración de Seleccionar proveedor de servicio a la derecha.
- En el panel de configuración, haga clic en el ícono Add (Agregar) para seleccionar un elemento de la UI.
- En la sección Controls (Controles), pase el cursor por encima de Button (Botón) y luego haga clic en el ícono Add to view (Agregar a vista) para agregar un nuevo elemento de la UI al final de la región.
Nota: Desplácese hacia abajo para ver el botón debajo de la tabla Proveedor de servicio. - Cierre el panel Add (Agregar).
2 Configurar el botón Modify service address (Modificar dirección de servicio)
- En el panel de configuración, pase el cursor por encima de la etiqueta Button (Botón) y haga clic en el ícono Edit this "Button" (Edite este "Botón") para abrir el panel de configuración del botón.
- En la pestaña General (General), en el campo Text (Texto), escriba Modify service address (Modificar dirección de servicio).
- Haga clic en Add action sets (Agregar conjuntos de acciones) para definir el conjunto de acciones para el botón.
- Haga clic en Create an action set (Crear un conjunto de acciones).
- En la sección Action set 1 (Conjunto de acciones 1), haga clic en Add an event (Agregar un evento) para seleccionar un evento para el botón.
- En la sección Mouse events (Eventos de ratón), haga clic en Click.
- En la sección Action set 1 (Conjunto de acciones 1), haga clic en Add an action > All actions (Añadir una acción > Todas las acciones) para mostrar todas las acciones disponibles.
- En la sección Launch (Lanzamiento), haga clic en Local action (Acción local).
- En el campo Local Action (Acción local), escriba o seleccione IdentifyLocation (Identificar ubicación).
- En la lista Target (Objetivo), seleccione Modal Dialog (Diálogo modal).
- Haga clic en Add another action set (Agregar otro conjunto de acciones).
- En la sección Action set 2 (Conjunto de acciones 2), haga clic en Add an event (Agregar un evento).
- En la sección Mouse events (Eventos de ratón), haga clic en Hover.
Tip: Se recomienda que el evento Pasar cursor esté deshabilitado en un dispositivo móvil.
- Haga clic en Add an action > All actions (Añadir una acción > Todas las acciones).
- En la sección Display (Visualización), haga clic en Show smart info (Mostrar información inteligente).
- Seleccione el checkbox Display header (Mostrar encabezado).
- En la lista desplegable Header Source (Fuente del encabezado), seleccione Plain text (Texto sin formato).
- En el campo Plain Text (Texto sin formato), escriba Current service address (Dirección de servicio actual).
- En el campo Section (Sección), escriba o seleccione ServiceAddress (Dirección de servicio).
- Haga clic en OK para completar la configuración del conjunto de acciones.
- En el panel de configuración del botón, haga clic en Apply (Aplicar) para guardar los cambios del botón.
- Cierre el panel de configuración del botón.
- Arrastre y suelte el botón Modify service address (Modificar dirección de servicio) encima del mapa de direcciones.
- Haga clic en Design (Diseño) para salir del modo de diseño.
Confirme su trabajo
- En la vista Seleccionar proveedor de servicio, pase el cursor por encima del botón Modify service address (Modificar dirección de servicio).
- Verifique que la calle, la ciudad y el estado muestren los valores que usted introdujo en la vista Identificar ubicación.
- Haga clic en el botón Modify service address (Modificar dirección de servicio) para modificar la dirección actual.
- Cambie la dirección en el cuadro de diálogo modal Identify location (Identificar ubicación).
- Haga clic en Submit (Enviar).
- Verifique los cambios en la dirección pasando el cursor por encima de Modify service address (Modificar dirección de servicio). La lista de proveedores de servicio se actualiza para mostrar una lista de proveedores que estén cerca de la dirección actual.
Este Reto es para practicar lo aprendido en el siguiente Módulo:
Disponible en las siguientes misiones:
If you are having problems with your training, please review the Pega Academy Support FAQs.
¿Quiere ayudarnos a mejorar este contenido?