Skip to main content

Challenge

Adicionando funcionalidade dinâmica a um botão

2 Tarefas

10 min

Visible to all users
Beginner Pega Platform 8.7 Interface de usuário Portuguese

Scenario

Após a aprovação da solicitação de assistência rodoviária, um provedor de serviço é despachado para o local informado pelo cliente. Para realizar a tarefa, os agentes de atendimento ao cliente solicitam a capacidade de verificar e modificar o endereço do serviço ao selecionar o provedor de serviço.

Adicione um botão à visualização Selecionar provedor de serviço (Select service provider) para que o agente possa verificar o endereço de serviço enviado pelo cliente.

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

Papel (Role) Nome do usuário Senha
Desenvolvedor de aplicativo [email protected] 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.  

Challenge Walkthrough

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.

Detailed Tasks

1 Adicionar um botão à visualização Selecionar provedor de serviço (Select service provider)

  1. No painel de navegação do App Studio, clique em Case types > Assistance Request (Tipos de caso > Solicitar assistência).
  2. Clique em Save and run (Salvar e executar) para criar um novo caso Assistance Request (Solicitar assistência).
  3. Avance o caso para a etapa Identify location (Identificar local) e insira um endereço nos campos Street (Rua), City (Cidade) e State (Estado).
    Nota: O campo Address (Endereço) é preenchido quando você avança para a etapa Identificar veículo (Identify vehicle). 
    New Assistance Request Identify location step
  4. Avance o caso para a etapa Select service provider (Selecionar provedor de serviço), inserindo informações em todos os campos obrigatórios.
  5. No cabeçalho do App Studio, clique em Design para entrar no modo de design.
  6. Na etiqueta Selecionar provedor de serviço (Select service provider), passe o cursor sobre a seção do mapa e clique em Edit this section (Editar esta seção) para abrir o painel de configuração Selecionar provedor de serviço à direita.
  7. No painel de configuração, clique no ícone Add (Adicionar) para selecione um elemento de IU.
    select-service
  8. Na seção Controls  (Controles), passe o cursor sobre Button (Botão) e clique no ícone Add to view (Adicionar à visualização) para adicionar o novo elemento de IU à parte inferior da região.
    add-view
     
    Nota: Desça para ver o botão na tabela Provedor de serviços (Service provider).
  9. Feche o painel Add (Adicionar).

2 Configurar o botão Modificar endereço do serviço

  1. No painel de configuração, passe o cursor sobre a etiqueta Button (Botão) e clique no ícone Edit this "Button" (Editar este "Botão") para abrir o painel de configuração do botão.
  2. Na guia General (Geral), no campo Text (Texto), insira Modificar endereço do serviço (Modify service address).
  3. Clique em Add action sets  (Adicionar conjunto de ações) para definir o conjunto de ações para o botão.
    add-action-sets
  4. Clique em Create an action set (Criar um conjunto de ações).
  5. Na seção Action set 1 (Conjunto de ações 1), clique em Add an event (Adicionar um evento) para selecionar um evento para o botão.
  6. Na seção Mouse events (Eventos do mouse), clique em Click (Clique).
    add-event
  7. Na seção Action set 1 (Conjunto de ações 1), clique em Add an action > All actions (Adicionar uma ação > Todas as ações) para exibir todas as ações disponíveis. 
  8. Na seção Launch (Lançamento), clique em Local action (Ação local).
    add-action
  9. No campo Local Action (Ação local), insira ou selecione Identificar localização (Identify Location).
  10. Na lista Target (Alvo), selecione Modal Dialog (Diálogo modal).
    Action set local action Identify location modal dialogue
  11. Clique em Add another action set (Adicionar outro conjunto de ações).
  12. Na seção Action set 2 (Conjunto de ações 2), clique em Add an event (Adicionar um evento).
  13. Na seção Mouse events (Eventos do mouse), clique em Hover (Passar o cursor).
    Dica: Como boa prática, o evento Passar o cursor do mouse (Hover mouse) deve ser desativado em um dispositivo móvel.
  14. Clique em Add an action > All actions (Adicionar uma ação > Todas as ações).
  15. Na seção Display (Exibição), clique em Show smart info (Mostrar informação inteligente).
  16. Marque a checkbox Display header (Cabeçalho da exibição).
  17. No menu suspenso Header Source (Fonte do cabeçalho), selecione Plain text (Texto simples).
  18. No campo Plain Text (Texto simples), insira Endereço do serviço atual (Current service address).
  19. No campo Section (Seção), insira ou selecione Endereço do serviço (Service Address).
  20. Clique em OK para concluir a configuração do conjunto de ações.
  21. No painel Configuração do botão (Button configuration), clique em Apply (Aplicar) para salvar as alterações do botão.
  22. Feche o painel Configuração do botão.
  23. Arraste e solte o botão Modify service address (Modificar o endereço de serviço) sobre o Mapa de endereços (Address Map).
  24. Clique em Design para sair do modo de design.

Confirm your work

  1. Na visualização Selecionar provedor de serviço (Select service provider), passe o cursor sobre o botão Modify service address (Modificar endereço de serviço).
  2. Verifique se os campos Rua (Street), Cidade (City) e Estado (State) exibem os valores que você inseriu na visualização Identificar localização (Identify location).
    hover on Modify service address button
  3. Clique no botão Modify service address (Modificar endereço de serviço) para modificar o endereço atual.
  4. Altere o endereço na caixa de diálogo do modal Identify location (Identificar local).
    Identify location modal dialogue box
  5. Clique em Submit (Enviar).
  6. Verifique as alterações do endereço passando o cursor sobre Modify service address (Modificar o endereço de serviço). A lista Provedor de serviços (Service provider) é atualizada para exibir uma lista de provedores perto do endereço atual.

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


Disponível nas seguintes missões:

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

Este conteúdo foi útil?

100% acharam esse conteúdo útil

Quer nos ajudar a melhorar esse conteúdo?

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