Skip to main content

Funcionalidade dinâmica em elementos de IU

Design de IU dinâmica

O design de IU dinâmica é a prática de projetar uma interface de usuário que se adapte de acordo com a entrada do usuário. Ao projetar uma interface de usuário (IU) dinâmica, você controla os campos que os usuários veem e com os quais interagem, de acordo com as condições especificadas. O conteúdo da IU dinâmica é um elemento-chave de um design de IU orientada por intenção. As escolhas feitas pelos usuários determinam quais controles são exibidos para que apenas os campos relevantes sejam apresentados.

Por exemplo, ao enviar uma solicitação de empréstimo, os clientes especificam seu estado civil. Se os clientes selecionarem que são casados, o aplicativo exibirá os campos de entrada referentes ao parceiro do usuário.

No centro da imagem abaixo, arraste a linha vertical para ver a solicitação de empréstimo com Solteiro (Single) e Casado (Married) selecionados.

Os benefícios de utilizar o design de IU dinâmica incluem resposta em tempo real ao comportamento do usuário final, funcionalidade robusta disponível para a maioria das interações do usuário, redução da confusão visual na tela e menos atualizações de página inteira, resultando em melhor capacidade de resposta da IU.

Atributos dinâmicos dos elementos de IU

Para configurar o comportamento dinâmico dos elementos da IU, é possível manipular quando os elementos estão visíveis e desabilitados.

Visível

Configure a visibilidade de um campo ou layout para exibir o campo ou layout quando uma condição específica for satisfeita.

Por padrão, os elementos da IU têm uma configuração de visibilidade de Sempre (Always). Isso significa que o elemento da IU sempre é exibido na tela. A tabela abaixo contém outras opções de configuração de visibilidade.

Configuração de visibilidade Comportamento do elemento da IU Exemplo Descrição do exemplo
Sempre Sempre é exibido
Name field example
Você deseja que o campo Nome, onde o usuário do aplicativo insere seu nome, esteja sempre visível.
Condição (expressão) Exibir quando uma expressão (pode ser uma regra de condição) retorna verdadeiro. Utilize esta opção para expressões curtas que você não precisa reutilizar em todo o seu caso.
Visible condition expression with special meal selected

Se um usuário escolher a opção Refeição especial, a lista suspensa Tipo de refeição será exibida. Caso contrário, a lista suspensa não será exibida. Você determina que este é o único lugar onde precisa dessa expressão, assim sendo, é apropriado utilizar a opção Condição (expressão).

Condição (regra de condição) É exibido se uma regra de condição retorna verdadeiro. Utilize esta opção para regras de condição mais complexas ou reutilizadas durante todo o tipo de caso.
Visible when rule with married vs single selected
Você cria uma regra de condição, quando Estado civil = Casado, que planeja reutilizar. Você faz referência a essa regra de condição para que quando o usuário selecionar Married (Casado) como seu Marital Status (Estado Civil), o campo Name of Spouse (Nome do Cônjuge) fique visível. Caso contrário, Nome do Cônjuge não ficará visível.  
Se não estiver em branco É exibido se o valor do campo não estiver em branco
Visible if not blank with Next appointment date value
Ao confirmar uma consulta médica, os pacientes podem, de forma opcional, selecionar uma data para a próxima consulta. Caso os pacientes selecionem uma data, o campo Data da próxima consulta ficará visível. Se o paciente não selecionar uma data, o campo Next appointment date (Data da próxima consulta) ficará oculto.
Se não for zero É exibido se o valor do campo não for zero
Visible if not zero with order total value
Quando os clientes fazem uma compra online, o total do pedido é calculado. Se o campo Total do pedido for maior que zero, ele será exibido. Se o total do pedido calculado for zero, então Total do pedido ficará oculto. 

Desativado

Configure quando um campo ou layout é desabilitado para limitar o acesso do usuário a um campo. Um campo ou layout é desabilitado quando uma condição específica é satisfeita.

Por padrão, os elementos da IU nunca são desabilitados. Isso significa que os usuários sempre têm acesso aos elementos da IU. A tabela abaixo exibe opções para desabilitar elementos da IU.

Configuração de “desabilitar” Comportamento do elemento da IU Exemplo Descrição do exemplo
Nunca Nunca desabilitado
Name field example
Você deseja que um usuário sempre possa inserir seu nome no campo Nome.
Sempre Sempre desabilitado
Always disable the Account type field
Um cliente escolhe o tipo de conta ao abrir uma conta bancária. Após a criação da conta, o cliente pode ver, mas não pode modificar o tipo da conta. Você configura o campo Tipo de conta para ficar sempre desabilitado, de forma a atingir este comportamento.
Condição (expressão) Desabilitado quando uma expressão (pode ser uma regra de condição) retorna verdadeiro
Disable the Preferred contact method field based on a conditional expression
Caso o usuário selecione E-mail como Método de contato preferencial, o campo Número de celular será desabilitado. Caso o usuário selecione Text (Mensagem) de texto como Preferred Contact Method (Método de contato preferencial), o campo E-mail será desabilitado. Você determina que este é o único lugar onde precisa dessa expressão, assim sendo, é apropriado utilizar a opção Condição (expressão).
Condição (regra de condição) Desabilitado se uma regra de condição retorna verdadeiro.
Disable cosigner information based on a when rule
Você faz referência a uma regra de condição quando a idade for maior ou igual a 21, de modo que, quando um cliente solicitar um cartão de crédito, se o cliente for maior ou igual a 21 anos, o campo de Informações do fiador estará desabilitado.

Requisitado

Configure quando um campo ou layout é necessário para garantir que um usuário especifique um valor. Um campo ou layout é necessário quando uma condição específica é satisfeita.

Por padrão, os elementos da IU nunca são necessários, o que significa que o usuário pode seguir com o processamento do caso sem especificar um valor. A tabela abaixo exibe opções para tornar os elementos da IU necessários.

Configuração necessária Comportamento do elemento da IU Exemplo  Descrição do exemplo
Nunca Nunca necessário
Email field is never required, or always optional
Você deseja que o campo E-mail seja opcional, mas não necessário para os usuários.
Sempre Sempre necessário
Account type field is always required
Quando os clientes abrem uma conta bancária, devem escolher o tipo de conta. O campo Tipo de conta é sempre necessário.
Condição (expressão) Necessário quando uma expressão (pode ser uma regra de condição) retorna verdadeiro
Preferred contact method is required based on a conditional expression
Caso o usuário selecione E-mail como Método de contato preferencial, o campo E-mail é necessário. Caso o usuário selecione Mensagem de texto como Método de contato preferencial, o campo Mobile number (Número de celular) é necessário. Você determina que este é o único lugar onde precisa dessa expressão, assim sendo, é apropriado utilizar a opção Condição (expressão).
Condição (regra de condição) Obrigatório se uma regra de condição retorna verdadeiro
Cosigner information is conditionally required
Você faz referência a uma regra de condição quando a idade for inferior a 21, para que, quando um cliente solicitar um cartão de crédito, se o cliente tiver menos de 21 anos de idade, o campo Informações do fiador seja necessário. Caso contrário, fornecer informações do fiador é opcional.

Verifique o seu conhecimento com a seguinte interação:


This Topic is available in the following Module:

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