Skip to main content

Exibindo dados de lista em visualizações

3 Tarefas

10 min

 Visible to: All users
Beginner Pega Platform 8.7 Experiência do usuário Português Brasileiro

Scenario

O aplicativo GoGoRoad apresenta uma lista de todos os provedores de serviço disponíveis em uma tabela. O consultor de IU quer que você faça as seguintes mudanças na IU: apresentar apenas as informações relevantes do provedor de serviço e configurar o conteúdo na tela para se adaptar a diferentes tamanhos de telas. Formate a lista de provedores para apresentar um formulário não tabular, usando um layout para organizar a exibição de um único item e depois incorporando a seção em um layout dinâmico.

A tabela a seguir apresenta as credenciais necessárias para concluir o desafio.

Papel Nome do usuário Senha
Desenvolvedor de aplicativo author@gogoroad pega123!
Nota: Seu ambiente de prática pode oferecer suporte para a conclusão de múltiplos desafios. Como resultado, a configuração exibida na apresentação do desafio pode não corresponder exatamente ao seu ambiente.

Você deve iniciar sua própria instância da Pega para concluir este Challenge.

A inicialização pode leva até cinco minutos, portanto tenha paciência.

Challenge Walkthrough

Detailed Tasks

1 Criar a visualização da lista de provedores

  1. No painel de navegação do Dev Studio, clique em Tipos de dados > Provedor de serviços (Data types > Service provider) para abrir o tipo de dados Provedor de serviços.
  2. Clique na guia Visualizações (Views).
    1.2
  3. Clique em Criar nova visualização (Create new view) para criar uma nova visualização.
  4. No canto superior esquerdo da janela New View, clique em Nova visualização (New View) para editar o nome da visualização.
  5. Digite Lista de provedores (Providers list) para renomear a visualização.
  6. No painel esquerdo da janela, clique em Campos (Fields).
    Expand fields in the left pane of the New View window
  7. Passe o cursor sobre o campo Nome (Name) e depois clique em Adicionar à visualização (Add to view).
    Add to view icon
  8. Na lista Opções (Options), selecione Somente leitura (Read-only).
  9. Repita a etapa 7 para adicionar os campos Endereço (Address) e LatLong . 
    1.9
  10. Clique em Enviar (Submit) para fechar a janela.
  11. No canto superior direito, clique em Salvar (Save) para salvar a visualização Lista de provedores (Providers list).

2 Crie uma visualização responsiva

  1. No painel de navegação do Dev Studio, clique em Aplicativo (App) para abrir o App Explorer.
  2. No campo de pesquisa, insira ou selecione GoGo-GoGoRoad-Data-ServiceProvider e depois pressione a tecla Enter . As regras na classe especificada são exibidas.
  3. Clique em Interface de usuário > Seção (User Interface > Section).
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Clique com o botão direito do mouse em Seção (Section) e depois clique em Criar (Create). O formulário Criar seção (Create Section) é exibido.
  5. No campo Rótulo (Label ), insira Lista responsiva de provedores (Providers List Responsive) para nomear a seção.
  6. No canto superior direito, clique em Criar e abrir (Create and open) para criar a seção. A seção Lista responsiva de provedores (Providers List Responsive) é exibida.
  7. No painel direito, clique em Alterar (Change) para mudar o modelo. A janela Selecionar um modelo (Select a template) é exibida.
    Change section template button
  8. Na janela Selecionar um modelo, clique em Quebra de texto entre linhas (Inline wrapping).
  9. No painel direito, clique no ícone Adicionar para adicionar um controle.
    Add control to a section
  10. Na lista Add (Adicionar), clique em Ação > Botão (Action > Button) para adicionar o controle do botão.
  11. No painel direito, passe o cursor do mouse sobre o controle Botão (Button) e depois clique em Editar este “Botão” (Edit this "Button"). A janela Propriedades da célula (Cell Properties) é exibida.
  12. Na janela Propriedades da célula, no campo Texto (Text), insira Selecionar provedor (Select provider).
    Cell properties for the Select provider button
  13. Clique em Enviar (Submit) para dispensar a janela.
  14. No painel direito, clique no ícone Adicionar.
  15. Na lista Add (Adicionar), clique em Exibição de dados > Seção incorporada (Data display > Embedded section). A caixa de diálogo Seção incluir modal (Section Include Modal) é exibida.
  16. Na caixa de diálogo Seção incluir modal, no campo Seção (Section), insira ou selecione ProvidersList.
    Section include modal for an embedded section
  17. Clique em Enviar (Submit) para dispensar a caixa de diálogo.
  18. No canto superior direito, clique em Salvar (Save) para salvar a visualização responsiva.
     

3 Adicionar a visualização recém-criada ao seu aplicativo

  1. Crie um novo caso Solicitação de assistência (Assistance Request) e avance para a etapa Selecionar provedor de serviço (Select service provider).
    Dica: Nem todos os locais têm provedores de serviço próximos. Na etapa Identificar localização (Identify location), no campo State, insira MA para exibir uma lista de provedores de serviço em Massachusetts, EUA.
  2. Em Barra de ferramentas do desenvolvedor (Developer Toolbar), clique em Live UI.
  3. No caso Solicitação de assistência, clique na seção Provedor de serviço (Service provider). 
    image which shows the Select service provider
    Dica: Você pode abrir as regras da seção de IU usando a ferramenta Live UI ou no App Explorer ou Data Explorer. A ferramenta Live UI é aplicada de melhor maneira em seções que são ativamente usadas no tipo de caso.
  4. No painel direito, à direita de Selecionar provedor de serviço, clique em Abrir no Dev Studio (Open in Dev Studio) para abrir a regra da seção no Dev Studio.
    Open in Dev Studio icon from Live UI
  5. Na regra da seção, clique em Estrutural (Structural) e depois clique e arraste um Layout dinâmico repetido (Repeating dynamic layout) para a seção Provedor de serviço.
  6. No cabeçalho do Layout dinâmico repetido, clique em Visualizar propriedades (View properties). A janela Propriedades do layout dinâmico repetido (Repeating dynamic layout properties) é exibida.
  7. Na janela Propriedades do layout dinâmico repetido, no campo Lista/grupo (List/Group), insira ou selecione .ServiceProvider.
    Repeating dynamic layout properties window with source specified as Service provider
  8. Clique em Enviar (Submit) para dispensar a janela.
  9. No App Explorer, clique em Opções > Atualizar App Explorer (Options > Refresh App Explorer).
    Refresh App Explorer
  10. Clique em Interface de usuário > Seção (User Interface > Section).
  11. Arraste e solte a seção Lista responsiva de provedores (Providers List Responsive) do App Explorer no Layout dinâmico repetido. 
    Drag the ProvidersListResponsive section from the App Explorer
  12. No canto superior direito, clique em Salvar (Save) para salvar as alterações na seção.
Nota: Apenas os layouts dinâmicos repetidos ou a tabela são necessários para exibir os provedores. Deixe ambos para fins de comparação.

Confirm your work

  1. Volte para o caso Solicitação de assistência (Assistance Request) que você criou.
  2. No canto superior direito, clique em Ações > Atualizar (Actions > Refresh).
  3. Na seção To do (A fazer), clique em Go (Ir) para voltar à visualização Selecionar provedor de serviço (Select service provider).
  4. Verifique se a seção atualizada é exibida. 
    confirm your work screen

Este Desafio serve para praticar o que você aprendeu nos seguintes Módulo:

Disponível nas seguintes missões:

Voltar à missão
If you are having problems with your training, please review the Pega Academy Support FAQs.

Este conteúdo foi útil?

Sim
Não

100% acharam esse conteúdo útil

Quer nos ajudar a melhorar esse conteúdo?
Sugerir uma edição

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