Skip to main content

Reto

Visualización de los datos de listas en vistas

3 Tareas

10 minutos

Visible to all users
Principiante Pega Platform 8.7 Interfaz de usuario Español

Escenario

La aplicación de GoGoRoad presenta una lista de todos los proveedores de servicio disponibles en una tabla. El consultor de la UI quiere realizar los siguientes cambios: presentar solo la información del proveedor de servicio correspondiente y configurar el contenido en pantalla para adaptarse a diferentes tamaños de pantalla. Otorgue un formato a la lista de proveedores para presentarlos en un formulario no tabular, utilizando un diseño de un solo elemento y luego integrando la sección en un dynamic layout repetitivo.

La siguiente tabla incluye las credenciales que necesita para completar el reto.

Rol Nombre de usuario Contraseña
Desarrollador de aplicaciones author@gogoroad pega123!
Nota: Su entorno de práctica podría admitir la compleción de varios retos. Como resultado, es posible que la configuración que se muestra en el tutorial del reto no coincida exactamente con su entorno.

Recorrido del Reto

Debe iniciar su propia instancia de Pega para completar este Título del desafío.

La inicialización puede demorar hasta 5 minutos. Le pedimos que tenga paciencia.

Tareas detalladas

1 Crear la vista Lista de proveedores

  1. En el panel de navegación de Dev Studio, haga clic en Data types > Service provider (Tipos de datos > Proveedor de servicio) para abrir el tipo de datos de proveedor de servicio.
  2. Haga clic en la pestaña Views (Vistas).
    1.2
  3. Haga clic en Create new view (Crear vista nueva) para crear una vista nueva.
  4. En la parte superior izquierda de la ventana New View (Vista nueva), haga clic en New view para editar el nombre de la vista.
  5. Escriba Providers list (Lista de proveedores) para cambiar el nombre de la vista.
  6. En el panel izquierdo de la ventana, haga clic en Fields (Campos).
    Expand fields in the left pane of the New View window
  7. Pase el mouse sobre el campo Name (Nombre) y haga clic en Add to view (Agregar a vista).
    Add to view icon
  8. En la lista Options (Opciones), seleccione Read-only (Solo lectura).
  9. Repita el paso 7 para agregar los campos Address (Dirección) y LatLong
    1.9
  10. Haga clic en Submit (Enviar) para cerrar la ventana.
  11. En la esquina superior derecha, haga clic en Save (Guardar) para guardar la vista de lista de proveedores.

2 Crear una vista responsiva

  1. En el panel de navegación de Dev Studio, haga clic en App para abrir App Explorer.
  2. En el campo de búsqueda, escriba o seleccione GoGo-GoGoRoad-Data-ServiceProvider y presione la tecla Intro. Se muestran las reglas dentro de la clase especificada.
  3. Haga clic en User Interface > Sección (Interfaz de usuario > Sección).
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Haga clic con el botón secundario en Section (Sección) y, a continuación, haga clic en Create (Crear). Aparecerá el formulario de creación de sección.
  5. En el campo Label (Etiqueta), escriba Providers List Responsive (Lista de proveedores responsivos).
  6. En la parte superior derecha, haga clic en Create and open (Crear y abrir) para crear la sección. Se muestra la sección Providers List Responsive (Lista de proveedores responsivos).
  7. En el panel derecho, haga clic en Change (Cambiar) para cambiar la plantilla. Aparecerá la ventana Select a template (Seleccionar una plantilla).
    Change section template button
  8. En la pantalla Select a template (Seleccionar una plantilla), haga clic en Inline wrapping (Ajuste en línea).
  9. En panel derecho, haga clic en el ícono Add (Agregar) para agregar un control.
    Add control to a section
  10. En la lista Add , haga clic en Action > Button (Acción > Botón) para agregar el control de botón.
  11. En el panel derecho, pase el mouse sobre el control Button (Botón) y haga clic en Edit this “Button” (Editar este “Botón”). Aparecerá la ventana Cell Properties (Propiedades de celda).
  12. En la ventana Cell Properties (Propiedades de celda), en el campo Text (Texto), escriba Select provider (Seleccionar proveedor).
    Cell properties for the Select provider button
  13. Haga clic en Submit (Enviar) para descartar la ventana.
  14. En panel derecho, haga clic en el ícono Add (Agregar).
  15. En la lista Add , haga clic en Data display > Embedded section (Visualización de datos > Sección embebida). Aparecerá el cuadro de diálogo Section Include Modal (Modal de inclusión de sección).
  16. En el cuadro de diálogo Section Include Modal (Modal de inclusión de sección), en el campo Section (Sección), escriba o seleccione ProvidersList.
    Section include modal for an embedded section
  17. Haga clic en Submit (Enviar) para descartar el cuadro de diálogo.
  18. En la esquina superior derecha, haga clic en Save (Guardar) para guardar la vista responsiva.
     

3 Agregar la vista recientemente creada a su aplicación

  1. Haga en un caso de solicitud de asistencia nuevo y, a continuación, avance al paso de selección de proveedor de servicio.
    Tip: No todas las ubicaciones tienen proveedores de servicio cercanos. En el paso de identificación de ubicación, en el campo State, escriba MA para visualizar una lista de proveedores de servicio en Massachusetts, EE. UU.
  2. En la barra de herramienta de desarrollador, haga clic en Live UI.
  3. En el caso de solicitud de asistencia, haga clic en la sección Service provider (Proveedor de servicio). 
    image which shows the Select service provider
    Tip: Puede abrir las reglas de sección de UI con la herramienta Live UI o desde App o Data Explorer. Live UI se aplica mejor para selecciones que se usan de forma activa en el tipo de caso.
  4. En el panel derecho, haga clic en Open in Dev Studio (Abrir en Dev Studio) para abrir la regla de sección en Dev Studio.
    Open in Dev Studio icon from Live UI
  5. En la regla de sección, haga clic en Structural (Estructural) y, a continuación, haga clic en un Repeating dynamic layout (Dynamic layout repetitivo) y arrástrelo a la sección Service provider (Proveedor de servicio).
  6. En el encabezado Repeating dynamic layout (Dynamic layout repetitivo), haga clic en View properties (Ver propiedades). Aparecerá la ventana Repeating dynamic layout properties (Propiedades de dynamic layout repetitivo).
  7. En la ventana Repeating dynamic layout properties (Propiedades de dynamic layout repetitivo), en el campo List/Group (Lista/grupo), escriba o seleccione .ServiceProvider.
    Repeating dynamic layout properties window with source specified as Service provider
  8. Haga clic en Submit (Enviar) para descartar la ventana.
  9. En App Explorer, haga clic en Options > Refresh App Explorer (Opciones > Actualizar App Explorer).
    Refresh App Explorer
  10. Haga clic en User Interface > Sección (Interfaz de usuario > Sección).
  11. Arrastre y suelte la sección ProvidersListResponsive desde App Explorer al dynamic layout repetitivo. 
    Drag the ProvidersListResponsive section from the App Explorer
  12. En la esquina superior derecha, haga clic en Save (Guardar) para guardar los cambios a la sección.
Nota: Solo se requiere el dynamic layout repetitivo o la tabla para mostrar proveedores. Deje ambos para poder realizar una comparación.

Confirme su trabajo

  1. Regrese a la instalación de caso de solicitud de asistencia que creó.
  2. En el extremo superior derecho, haga clic en Actions > Refresh (Acciones > Actualizar).
  3. En la sección To do (Hacer), haga clic en Go (Ir) para regresar a la vista de selección de proveedor de servicio.
  4. Verifique que se muestre la sección actualizada. 
    confirm your work screen

Este Reto es para practicar lo aprendido en el siguiente Módulo:


Disponible en la siguiente misión:

If you are having problems with your training, please review the Pega Academy Support FAQs.

¿Le ha resultado útil este contenido?

¿Quiere ayudarnos a mejorar este contenido?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice