Adicionar regras de visibilidade para as páginas dinâmicas

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Criar regras de visibilidade para componentes, campos e seções de campos.
  
• Descrever como as regras de visibilidade podem tornar suas páginas mais úteis para os usuários.
  

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e copie e cole os valores de português (Brasil). Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Acessibilidade

Esta unidade requer algumas instruções adicionais para usuários de leitores de tela. Para acessar uma versão detalhada do leitor de tela desta unidade, clique no link abaixo:

Abrir as instruções do leitor de tela do Trailhead.

Antes de começar

Esta unidade baseia-se na página de registro que você criou e personalizou nas duas unidades anteriores. Conclua essas unidades primeiro e use a mesma página de registro para navegar por esta unidade.

Adicionar regras de visibilidade para componentes

Você sabia que pode controlar quando um componente aparece em uma página de registro do Lightning? Você pode fazer isso adicionando condições de filtro e lógica de visibilidade de componente às propriedades.

As propriedades de visibilidade do componente aparecem quando você seleciona um componente em um registro, aplicativo ou página inicial no Criador de aplicativo Lightning. Esse comportamento se aplica a componentes padrão, componentes personalizados e componentes do AppExchange. Não é necessário fazer nada aos seus componentes personalizados. Tudo é feito pelo Criador de aplicativo Lightning. Se você não definir um filtro, o componente é exibido na página do Lightning como de costume. Ao definir um ou mais filtros e definir a lógica dos filtros para um componente, ele ficará oculto até que os critérios de lógica dos filtros sejam atendidos.

Experimente criar filtros para gerar uma exibição de componente em rich text quando o Valor de uma oportunidade for maior ou igual a US$ 1 milhão e o Estágio for Fechado e ganho.

1. Em Setup (Configuração), insira App Builder (Criador de aplicativo) na caixa Busca rápida e selecione Lightning App Builder (Criador de aplicativo Lightning).
   
2. Abra a New Opportunity Page (Nova página de oportunidade).
   
3. Adicione um componente em rich text acima do componente do Chatter na página.
   
4. Digite este texto no componente: A million dollar opportunity closed!Oh yeah! (Uma oportunidade de um milhão de dólares fechada! Oba!)
5. Nas propriedades do componente, coloque o texto centralizado e em negrito, com fonte tamanho 18 e do tipo que achar melhor.
   
6. Mantenha a opção Display as card (Exibir como cartão) selecionada.
   

Essa configuração torna o texto no componente mais legível nas páginas do Lightning ao adicionar um fundo branco em vez de transparente. Desative a configuração e ative-a novamente para ver como muda.

7. Clique em Add Filter (Adicionar filtro).
   
8. Defina Campo para Amount (Valor), se ainda não estiver.
   
9. Defina Operador para Greater Than or Equal (Maior ou igual). Em Valor, insira 1000000. 
   

10. Clique em Done (Concluído).
    
11. Clique em Add Filter (Adicionar filtro) novamente e crie outro filtro para o campo Stage (Estágio) igual a Closed Won (Fechado e ganho).
    

As regras de visibilidade vão bem além de controlar se o componente é ou não exibido com base nos valores de campo. As regras de visibilidade também podem controlar se os componentes aparecem em uma página com base no fator de forma (ou dispositivo) em que você está vendo a página. Configure regras para que um componente apareça apenas quando a página é visualizada em um telefone.

12. Adicione outro componente de rich text logo abaixo do primeiro.
    
13. Digite este texto no componente: This component is for mobile users only. (Este componente se destina apenas aos usuários em dispositivos móveis.)
14. Personalize o texto como quiser e clique em Adicionar filtro.
    
15. Em Tipo de filtro, clique em Dispositivo.
    
16. Defina o campo Valor como Telefone e clique em Concluído.
    
17. Salve a página.
    

Adicionar regras de visibilidade a campos e seções de campos

Você pode tornar as páginas de registro do Lightning ainda mais dinâmicas definindo filtros de visibilidade nos componentes Campo e Seção de campo. Por exemplo, você pode ocultar um campo ou conjunto de campos até que uma pessoa com um determinado perfil ou permissão visite a página. Ou você pode exibir um campo somente quando outro campo estiver definido com um valor especificado.

Crie uma regra de visibilidade para ocultar o campo Tracking Number (Número de rastreamento) na página de registro até que o campo Delivery/Installation Status (Status de entrega/instalação) seja definido como In progress (Em andamento) ou Completed (Concluído).

1. Clique na guia More Details (Mais detalhes) e selecione o campo Tracking Number (Número de rastreamento) na seção Additional (Informações adicionais).
   
2. No painel de propriedades, no campo Tracking Number (Número de rastreamento), clique em Add Filter (Adicionar filtro).
   
3. Crie um filtro de:
   

• Campo: Delivery/Installation Status (Status de entrega/instalação)
  
• Operador: Igual
  
• Valor: Em andamento
  

4. Clique em Done (Concluído).
   
5. Clique em Add Filter (Adicionar filtro) novamente e crie outro filtro:
   

• Campo: Delivery/Installation Status (Status de entrega/instalação)
  
• Operador: Igual
  
• Valor: Concluído
  

6. Clique em Done (Concluído).
   
7. Em Show component when (Mostrar componente quando), selecione Any filters are true (Quaisquer filtros são verdadeiros). Esta seleção garante que o campo será exibido quando um dos filtros for verdadeiro.
   
8. Salve a página. Você notou o novo ícone no campo Tracking Number (Número de rastreamento)? O ícone de olho indica que um componente ou campo tem filtros de visibilidade atribuídos a ele.
   

Tenha cuidado ao configurar regras de visibilidade em vários componentes na mesma região (como uma seção de acordeão, guia ou coluna de página). Se suas regras fizerem com que todos os componentes de uma região fiquem invisíveis quando a página for carregada para os usuários, a região ficará vazia.

Como parte deste módulo, você migrou uma página de registro para Formulários dinâmicos, moveu alguns campos e tornou a página mais dinâmica com regras de visibilidade. Mas o que isso significa para seus usuários? É hora de descobrir.

Viu o que você fez?

É hora de conferir seu trabalho manual. Primeiro, observe a página no computador.

1. Clique em Back (Voltar) no cabeçalho do App Builder (Criador de aplicativo).
   
2. No App Launcher (Iniciador de aplicativos) , encontre e selecione Sales (Vendas) e clique na guia Opportunities (Oportunidades).
   
3. Abra o modo de exibição de lista All Opportunities (Todas as oportunidades).
   
4. Selecione Dickenson Mobile Generators.
   É possível que você tenha que atualizar a página de oportunidades para que as mudanças recém-feitas na página de registro apareçam.
   

Veja como fica a página de registro. Como você atribuiu a página de registro ao perfil Administrador do sistema quando a ativou, você poderá vê-la, mas nenhum outro usuário na sua organização poderá. Você pode personalizar as diferentes experiências de usuário criando páginas de registro personalizadas e atribuindo-as por aplicativo, tipo de registro e perfil de usuário. Ofereça a seus gerentes de vendas uma visão diferente das oportunidades além dos seus representantes de vendas. Configure as páginas de contas de organizações sem fins lucrativos diferentemente das páginas de conta comercial padrão.

Na guia Details (Detalhes), você pode ver que a página está mais concisa do que antes, os campos estão mais organizados e como removeu alguns campos desta guia, a página carrega um pouco mais depressa.

E, se você clicar na guia More Details (Mais detalhes), poderá observar que o campo Tracking Number (Número de rastreamento) foi ocultado dos usuários. Isso ocorre porque os critérios do filtro de visibilidade ainda não foram atendidos. 

Ver as regras de visibilidade em ação

O filtro de visibilidade do campo Tracking Number (Número de rastreamento) é baseado no campo Delivery/Installation Status (Status de entrega/instalação) definido como In progress (Em andamento) ou Completed (Concluído). Veja o que acontece na página quando a regra de visibilidade é acionada.

1. Clique na guia More Details (Mais detalhes) se ainda não estiver lá.
   
2. Clique no  campo Delivery/Installation Status (Status de entrega/instalação) para abrir a edição inline.
   
3. Fique de olho na seção Additional Information (Informações adicionais) e altere o valor Delivery/Installation (Entrega/Instalação) para In progress (Em andamento). Você viu o campo Tracking Number (Número de rastreamento) aparecer? Quando os critérios de filtro da regra de visibilidade são atendidos, a regra é acionada e o campo é exibido.
   
4. Salve suas alterações.
   

Controlar se um componente ou campo é exibido com base nos valores dos campos é apenas uma coisa que você pode fazer com as regras de visibilidade. As regras de visibilidade também podem controlar se os componentes aparecem em uma página com base no perfil de usuário que está visualizando, nas permissões dele ou no formato (dispositivo) em que ele visualiza a página.

As regras de visibilidade nas seções de campo se comportam de maneira diferente das regras nos campos. As regras de visibilidade nos campos são avaliadas dinamicamente. As alterações feitas por um usuário durante a edição de um registro podem fazer com que os campos apareçam e desapareçam à medida que as regras de visibilidade são avaliadas. As regras de visibilidade nas seções de campo não são dinâmicas e não reagem ao que o usuário faz durante a edição. As regras de visibilidade da seção de campo são avaliadas somente depois que um registro é salvo.

Mas espere. Você adicionou dois componentes de rich text à página, mas eles não estão aparecendo. Por quê? No caso de um dos componentes, é porque estamos vendo a página em um desktop. Falaremos mais sobre isso em breve. No caso do outro componente, é porque a oportunidade não atende aos critérios que você definiu. Você pode mudar isso.

1. Nas ações no nível da página do painel de destaques, selecione Editar.
   
2. Mude o valor da oportunidade para acima de US$ 1.000.000, mude o estágio para Closed Won (Fechado e ganho) e clique em Save (Salvar).
   Uhu! Olha isso! Você nem precisou atualizar a página. Quando você salva as alterações e os critérios de filtragem são atendidos, a página é atualizada automaticamente para mostrar o componente de rich text e sua mensagem.
   

Agora, veja a página no aplicativo móvel Salesforce.

1. Abra o aplicativo no seu telefone.
   
2. Entre usando suas credenciais do Trailhead Playground.
   Não tem certeza de qual é seu nome de usuário e senha do Playground? Descubra como obtê-los no módulo Gerenciamento do Trailhead Playground.
   
3. Abra o menu, toque no App Launcher (Iniciador de aplicativos) e abra o aplicativo Vendas.
   
4. Toque em Opportunities (Oportunidades) e navegue até a oportunidade Dickenson Mobile Generators.
   O que você vê no início é o que se espera: ações, destaques do registro, caminho. Mas role um pouco a tela para baixo... 
   

As guias no componente Guias ficam empilhadas quando são visualizadas em um telefone. É possível tocar nelas para abri-las. Mas espere um pouco! Falta uma delas. Onde está a guia Atividade? Bem, o componente de Atividades não é compatível com telefones, então ele foi retirado da página. E, como isso fez com que a guia Atividade ficasse vazia, ela também foi retirada da página. Em direção ao fim está o componente que apareceu quando você atualizou a oportunidade para ser de mais de um milhão de dólares. Porém, logo abaixo dele está algo que você não viu ao visualizar a página no desktop: o componente rich text exclusivo para dispositivos móveis.

Recursos

• Ajuda do Salesforce: Dynamic Lightning Pages
  
• Ajuda do Salesforce: Considerações sobre regras de visibilidade de página do Lightning