Configuração de interface do usuário no App Studio

O modelo de IU oferece flexibilidade para que os desenvolvedores possam conectar com eficiência componentes de front-end com APIs de back-end. A camada de UI adere ao Princípio de separação de conceitos, que é o princípio de design de software que incentiva a modularidade, estipulando que um aplicativo deve ter partes distintas e cada parte resolve uma questão específica.

A Pega Platform aborda complexidades desnecessárias e IUs inconsistentes com um novo modelo de interface que pode ser usado para criar aplicativos com visualizações, modelos e widgets.

Na imagem a seguir, clique nos ícones de + para saber mais sobre os elementos de IU:

Para novos aplicativos que você cria na Pega Platform, o sistema gera automaticamente um conjunto de visualizações que você pode usar para começar instantaneamente a configurar a interface do usuário com o App Studio. Essas Visualizações são geradas usando Modelos. A Pega oferece vários tipos de Visualizações com modelos diferentes. 

Os modelos ajudam você a cuidar do layout e da responsividade de uma Visualização para oferecer a melhor experiência aos usuários. Por exemplo, modelos incluem pontos de interrupção, gerenciamento de espaços em branco e quebra de linha para garantir conformidade imediata com os padrões de acessibilidade mais recentes.

Cada tipo de Visualização (view) usa um modelo diferente. Dependendo do tipo e localização da sua Visualização, os modelos disponíveis e seu comportamento podem variar. O tópico a seguir contém informações que são importantes para sua compreensão dos modelos de visualização e para passar no exame de certificação: Modelos para Visualizações.

Um exemplo de Visualização que é gerada automaticamente usando um modelo é a Visualização de Página Inteira.

Quando você cria um novo tipo de caso (case type) ou objeto de dados (data object), a Pega Platform™ adiciona automaticamente uma visualização associada chamada Visualização de página inteira, que representa a estrutura visual para processar informações necessárias para a resolução do caso. Otimizado para quase qualquer caso ou objeto de dados, o layout de três painéis da Visualização de página inteira acomoda muitas informações, muitas das quais estão disponíveis sem rolar ou movimentar para outras visualizações. Você pode editar a Visualização de página inteira na guia UX do seu tipo de caso ou objeto de dados.

A Visualização de página inteira, ou a página do caso completo, representa um único caso na Pega Platform. Na imagem a seguir, clique nos ícones + para saber mais sobre as principais áreas de uma visualização de página inteira.

O painel de Resumo exibe informações críticas sobre um Caso. O posicionamento do painel de resumo garante que os usuários possam visualizar as informações mais críticas do registro no canto superior esquerdo da janela principal do aplicativo. Os usuários que leem da esquerda para a direita olham instintivamente o canto superior esquerdo de qualquer visualização para compreender o contexto e obter um senso de orientação.

O tamanho e a forma são propositalmente similares a um dispositivo móvel. Se você recolher o painel de Resumo na visualização de Caso Completo, a exibição muda para o modo responsivo. Esse modo é frequentemente usado em dispositivos com telas menores.

Por padrão, o painel de Resumo também inclui a Visualização de Detalhes e a Visualização do Pulse.

Detalhes

A visualização Detalhes é uma visualização opcional padrão que pode renderizar dados de caso somente de leitura, como campos importantes e outras informações. Por padrão, a visualização de detalhes é configurada para exibir campos primários. 

Pulse

A visualização Pulse é uma visualização padrão e opcional que exibe o Pulse, que permite aos usuários publicar, visualizar e responder a mensagens no contexto deste caso.

Verifique seu conhecimento com a seguinte interação:

Em uma Visualização de Página Inteira, você pode configurar uma Ação promovida. Ações Promovidas dão aos usuários acesso rápido a Ações frequentemente usadas, como Alterar estágio.

Uma Ação promovida é exibida como um botão no cabeçalho de um Caso. Adicionar uma Ação promovida é um padrão padrão de configuração que não exige construir ou adicionar um componente de botão.  As Ações Promovidas se comportam da seguinte forma:
 

• Cada Tipo de Caso permite uma Ação promovida.
• A Ação solicitada é a primeira Ação disponível para o Caso inteiro.

Um exemplo de uma Ação promovida chamada Alterar estágio, mostrada na imagem a seguir:

O tópico a seguir contém informações que são importantes para sua compreensão de Ações promovidas e para passar no exame de certificação: Configuração de Ações Promovidas em uma Visualização de Caso Inteiro.