Skip to main content

Construção de visualizações no Constellation para BAs

6 Tarefas

40 min

 Visible to: All users Applies to: Pega Platform '24.2

Scenario

Para que os usuários interajam com o aplicativo GoGoRoad, é necessário criar uma interface de usuário (IU). Destacando as vantagens do Constellation durante o desenvolvimento e a manutenção do aplicativo, você, como BA da Pega, defendeu a construção da interface do usuário do aplicativo GoGoRoad usando a arquitetura Constellation. 

Histórias de usuários

Como agente de atendimento ao cliente (CSR) da GoGoRoad, quero selecionar o tipo de serviço solicitado em uma lista dropdown e identificar rapidamente o problema, transmitindo essas informações ao provedor de serviços.

Como agente de atendimento ao cliente da GoGoRoad, quero selecionar o cliente que está fazendo a solicitação de assistência em uma lista dropdown de clientes, acessando rapidamente todas as informações armazenadas sobre o cliente.

Como agente de atendimento ao cliente da GoGoRoad, quero inserir o endereço associado à solicitação de serviço e enviar o prestador de serviço ao local correto. 

Como agente de atendimento ao cliente da GoGoRoad, quero inserir as informações associadas ao veículo que precisa de assistência e transmitir essas informações ao prestador de serviços.

Como agente de atendimento ao cliente da GoGoRoad, quero inserir as informações associadas à forma de pagamento do cliente para que a GoGoRoad e o prestador de serviços sejam pagos pelos serviços prestados.

Como agente de atendimento ao cliente da GoGoRoad, quero selecionar os serviços prestados para a instância de solicitação de assistência, faturando o cliente corretamente.

Notas técnicas documentadas pelo system architect

  • A visualização Identificar problema contém um novo campo chamado Tipo de serviço do Picklist Tipo de campo. O campo Tipo de serviço é obrigatório.
  • A visualização Identificar cliente contém um dropdown que faz referência ao relacionamento de dados do cliente (AR).
  • A visualização Identificar localização contém o relacionamento de dados incorporados do Endereço de atendimento (AR).
  • A visualização Identificar veículo contém um novo campo chamado Informações do veículo (AR), que faz referência ao objeto de dados Vehicle information como um relacionamento de dados incorporados de registro único.
  • A visualização Inserir dados de pagamento contém um novo campo chamado Dados de pagamento (AR) que faz referência ao objeto de dados Payment information como um relacionamento de dados incorporados de registro único.
  • A visualização Selecionar serviços executados contém um relacionamento de dados de Serviços selecionados (AR) que faz referência ao objeto de dados Selected service como um relacionamento de dados incorporados de vários registros.
  • A visualização Selecionar serviços executados contém um campo calculado criado anteriormente, chamado Total de serviços, que é uma soma de todos os serviços selecionados na visualização.

A tabela a seguir apresenta as credenciais necessárias para você concluir o desafio:

Função Nome de usuário Senha
Business Architect author@gogoroad pega123!
Nota: O passo a passo desse desafio foi registrado na Pega Platform '23. Pode haver pequenas diferenças entre esse vídeo e as etapas e imagens do desafio.
Beginner
Integração de dados
Português Brasileiro

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 Configurar a visualização Identificar problema

  1. Na instância da Pega para o desafio, insira as seguintes credenciais:
    1. No campo User name, insira author@gogoroad.
    2. No campo Password, insira pega123!.
  2. No painel de navegação do App Studio, clique em Case Types > Assistance Request para abrir o tipo de caso Solicitação de assistência (Assistance Request).
  3. No Ciclo de Vida do Caso de Solicitação de Assistência, na Etapa Criar , clique na etapa Identificar problema e, no painel de propriedades contextuais à direita, clique em Configurar visualização.
  4. Na janela Editar visualização: identificar problema, na seção Fields, clique em Adicionar > Campos > Criar novo campo.
    Adding new fields to the Identify issue View.
  5. Na caixa de diálogo Add field caixa de diálogo, no campo Name, digite o Service type.
  6. No campo Type confirme que o padrão do sistema é Picklist.
  7. Na primeira opção da lista de opções do tipo de serviço , insira Vehicle has a flat tire
  8. Clique em Adicionar opção.
  9. Repita as etapas 7 a 8 para adicionar as outras opções:
    • O veículo está com a bateria descarregada
    • O veículo está trancado
    • O veículo ficou sem combustível
    The completed Service type field.
  10. Clique em Enviar (Submit).
  11. Na janela Editar visualização: identificar o problema, à direita do campo Tipo de serviço, clique no ícone Configure . 
  12. Na janela Configurar campo: tipo de serviço, na seção Conditions, no campo Required, selecione Sempre.
  13. Clique em Salvar para fechar a caixa de diálogo.
  14. Clique em Enviar para salvar a visualização Identificar problema.
    The Identify issue View

2 Configurar a visualização Identificar cliente

  1. No Ciclo de vida do caso de Solicitação de assistência, clique na etapa Identificar cliente . No painel de propriedades contextuais à direita, clique em Configurar visualização.
  2. Na janela Editar visualização: identificar cliente, na seção Fields, clique em Adicionar > Campos.
  3. Na lista Fields , selecione Customer (AR) e clique em Adicionar.
    Adding the Customer (AR) field to the Identify customer View.
  4. Na janela Editar visualização: identificar cliente, na seção Fields, clique em Customer (AR).
  5. Na caixa de diálogo Editar campo: Cliente (AR), preencha o seguinte:
    • Confirme se o campo Mode é Single-select
    • No campo Display as, , selecione Dropdown.
    • Confirme se o campo Data page é List Customer.
    • Confirme se o campo Display field é Account ID.
  6. Clique em Back para fechar a janela Editar campo: Cliente (AR),
    Highlighting the back button of the Customer(AR) configuration window
    .
  7. Na janela  Editar visualização: identificar o cliente , clique em Add > Fields. 
  8. Na caixa de diálogo Campos, expanda o campo Customer (AR).
    Highlighting the arrow to the right of the Customer (AR) field.
  9. Na caixa de diálogo Cliente (AR), clique em Fields.
  10. Na lista de campos de cliente (AR) disponíveis, marque as caixas de seleção para Coverage level, Customer email, Enrollment, e Full name e clique em Add.
  11. À direita do campo Coverage level clique no ícone Configure.
  12. Na janela Configurar campo: nível de cobertura (CustomerAR) , no campo Edit mode, selecione Read-only e clique em Salvar.
  13. Repita as etapas 11 e 12 para configurar os campos Customer email, Enrollment e Full name como somente leitura.
  14. Use Drag handle  para reordenar os campos somente leitura como Full name, Customer email, Enrollment e Coverage level.
    The completed Identify customer View
  15. À direita do campo Customer (AR) , clique no ícone Configurar.
  16. Na janela Configurar campo: Cliente, em Field label field, selecione Custom.
  17. No campo Custom field label digite Customer.
  18. Na seção Condições, no campo Required, selecione Sempre.
  19. Clique em Salvar.
    Configure for the Customer AR dropdown field
  20. Clique em Enviar para salvar a visualizaçãoIdentificar cliente.
    Completed Identify customer View

3 Configurar a visualização Identificar localização

  1. No Ciclo de vida do caso deSolicitação de assistência, clique na etapa Identify location e, no painel de propriedades contextuais à direita, clique em Configurar visualização.
  2. Na janela Editar visualização: identificar localização, na seção Fields, clique em Adicionar > Campos.
  3. Na lista de campos, selecione Service address (AR)e clique em Add.
  4. Na janela Editar visualização: identificar localização, clique em Service address (AR) (Service address) .
  5. Na janela Editar visualização: endereço de atendimento (AR), na seção Campos , clique no ícone Remove para remover a visualização Primary fields.
  6. Na seção Campos, clique em Add > Fields.
  7. Na lista de campos, selecione City, State,  e Street e clique em Adicionar.
  8. Usando o botão Drag handle, ordene os campos como Street, City e State. 
    Adding fields to the Service address AR View
  9. Clique em Voltar para retornar à janela Editar visualização: identificar localização.
  10. À direita do campo Service address (AR) (Service address), clique no ícone Configurar.
  11. Atualize o campo Field label, digite o Service address.
  12. Clique em Salvar.
  13. Clique em Enviar para salvar a visualização Identificar localização.
    The completed Identify location View

4 Configurar a visualização Identificar veículo

  1. No Ciclo de vida do caso de Solicitação de assistência, clique na etapa Identify vehicle  e, no painel de propriedades contextuais à direita, clique em Configurar visualização.
  2. Na janela Editar visualização: identificar veículo, na seção Fields, clique em Adicionar > Campos > Criar novo campo.
  3. Na janela Add field, no campo Name, digite   as Informações do veículo (AR).
  4. No campo Type, selecione Embedded Data.
  5. No campo Data object, selecione Vehicle information.
  6. No campo Options, selecione Single Record.
  7. Clique em Enviar para criar o relacionamento de dados de Informações do veículo (AR).
    The Vehicle information data relationship
  8. Na janela Editar visualização: identificar veículo, clique em Vehicle information (AR) (Vehicle information).
  9. Na seção Fields, clique no ícone Remove para remover a visualização Primary fields e clique em Add > Fields.
  10. Na lista de campos, selecione Color, Make, Model e Model year e clique em Adicionar.
  11. Arraste o campo Cor entre os campos Modelo e Ano do modelo.
    Adding fields to the Vehicle information AR View
  12. Clique em Back para retornar à janela Editar visualização: identificar veículo.
  13. À direita do campo Vehicle information (AR) (Vehicle information), clique no ícone Configurar.
  14. Atualize Field label como Informações do veículo.
  15. Clique em Salvar.
  16. Clique em Enviar para salvar a visualização Identificar veículo.
    The completed Identify vehicle View

5 Configurar a visualização Inserir dados de pagamento

  1. No Ciclo de vida do caso de Solicitação de assistência, clique na etapa Enter payment information  e, no painel de propriedades contextuais à direita, clique em Configurar visualização.
  2. Na janela Editar visualização: Inserir informações de pagamento, na seção Fields, clique em Adicionar > Campos > Criar novo campo.
  3. Na caixa de diálogo Add field, em Name, insira Payment information (AR).
  4. No campo Type, selecione Embedded Data.
  5. No campo Data object, selecione Dados de pagamento.
  6. No campo Options, selecione Single Record.
  7. Clique em Enviar para criar o relacionamento de dados de Dados de pagamento (AR).
    The Payment information (AR) data relationship.
  8. Na janela Editar visualização: inserir dados de pagamento, clique em Payment information (AR) (Payment information).
  9. Na seção Fields, clique no ícone Remove para remover a visualização Primary fields e clique em Add > Fields.
  10. Na lista de campos, selecione Card number, Card type e e clique em Adicionar.
  11. Usando o Drag handle reordene os campos como Card type, Card number e Expiration date. 
    The Payment information (AR) View
  12. Clique em Voltar para retornar à janela Editar visualização: Inserir dados de pagamento.
  13. À direita do campo Payment information (AR) (Payment information), clique no ícone Configurar.
  14. Na janela Configurar campo: dados de pagamento (AR) , atualize Field label para Dados de pagamento.
  15. Clique em Salvar.
  16. Clique em Enviar para salvar a visualização Inserir dados de pagamento.
    The completed Enter payment information View

6 Configurar a visualização Selecionar serviços executados

  1. No Ciclo de vida do caso de Solicitação de assistência , clique na etapa Select services performed  e, no painel de propriedades contextuais à direita, clique em Configurar visualização.
  2. Na janela Editar visualização: selecionar os serviços executados, na seção Fields, clique em Adicionar > Campos.
  3. Na lista de campos, selecione Selected services (AR) e clique em Add.
  4. Na janela Editar visualização: selecionar serviços executados, clique em Selected services (AR).
  5. Na caixa de diálogo Editar campo: Serviços selecionados (AR) , no campo Display as , selecione Repeating View.
  6. No campo Record view , selecione Selected service view.
    Configuration of the Selected services (AR) View
  7. Clique em Back para retornar à janela Editar visualização: Selecionar serviços executados.
  8. À direita do campo Selected Services (AR) clique no ícone Configurar.
  9. Na caixa de diálogo Configurar campo: Serviços selecionados (AR), no campo Field label, selecione Custom.
  10. No campo Custom field label, digite Selected services.
  11. Clique em Salvar.
  12. Na janela Editar visualização: selecionar serviços executados, clique em Add > Fields > Total of services > Add.
  13. À direita do campo Total de serviços, clique no ícone Configure.
  14. No campo Edit mode, selecione Read-only e clique em Salvar.
  15. Clique em Enviar para salvar a visualização Selecionar serviços executados.
    The configured Select services performed View
  16. Clique em Salvar para salvar o trabalho.

Confirm your work

  1. No Tipo de caso de solicitação de assistência, clique em Visualizar para abrir a janela do portal da Web.
    Highlighting the location of the Preview button in the App Studio header.
  2. Na janela do portal da Web, no painel de navegação, clique em Create > Assistance Request para criar uma nova instância do tipo de caso Solicitação de assistência.
    Highlighting the location to create an Assistance Request Case
  3. Na etapa Identificar problema, selecione um Service type e clique em Avançar.
    The Identify issue View at runtime.
  4. Na etapa Identificar cliente, selecione um Customer, como [email protected] e clique em Avançar.
    The Identify customer View at runtime.
  5. Na etapa Identificar localização, digite um endereço e clique em Avançar.
    The Identify location View at runtime.
  6. Na etapa Identificar veículo, insira as informações do veículo e clique em Enviar.
    The Identify vehicle View at runtime.
  7. Na etapa Inserir dados de pagamento, insira os dados de pagamento e clique em Enviar.
    The Enter payment information View at runtime.
  8. Na etapa Selecionar serviços executados, na lista Service , selecione um serviço e digite um valor no campo Quantity .
  9. Confirme se a seção Total of services exibe um valor.
    The Select services performed View at runtime.

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

Disponível na seguinte missão:

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

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