Criar uma página de registro personalizada para o Lightning Experience e o aplicativo móvel Salesforce

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Criar uma página de registro de objeto personalizada para o Lightning Experience e o aplicativo móvel Salesforce.
  • Adicionar regras de visibilidade a um componente de página de registro.
  • Ativar a página de registro personalizada para seus usuários.

E essas páginas de registro do Lightning Experience? Você também pode personalizá-las!

Use o Criador de aplicativo Lightning para adicionar, remover ou reordenar componentes em uma página de registro a fim de dar aos usuários uma visualização personalizada de cada registro de objetos. E o que é mais legal: você pode personalizar uma página de registro e atribuí-la a aplicativos do Lightning específicos para dar a seus usuários acesso a uma página de registro personalizada especialmente para o contexto do aplicativo em que eles estão trabalhando.

Sua página de registro

Assim como uma página inicial, você pode criar uma página de registro personalizada de diversas maneiras: criá-la do zero usando um modelo, clonar uma de suas outras páginas de registro personalizadas ou editar uma página existente. Entretanto, ao contrário da página inicial, as páginas de registro personalizadas são compatíveis não só com o Lightning Experience para desktop, mas também com o aplicativo móvel Salesforce. Vamos criar uma página de registro usando um modelo e, depois, conferir como ela fica em um desktop e um telefone.

Criar uma página de registro do Lightning personalizada

Vamos criar uma página de registro de oportunidade personalizada.

Queremos ajustar o layout de página de registro um pouquinho para que você possa perceber como as coisas se encaixam. Quando estiver familiarizado com isso, poderemos começar para valer e personalizar suas páginas de registro da forma que você quiser. Vamos começar.

  1. Em Configuração, insira App Builder na caixa Busca rápida e selecione Criador de aplicativo Lightning.
  2. Clique em Novo.
  3. Selecione Página de registro e comece a seguir o assistente.
  4. Nomeie a página Nova página de oportunidade e selecione Oportunidade.
    Comece a digitar o nome de um objeto no campo Objeto para filtrar a lista e localizar o que está procurando com mais rapidez.
  5. Escolha o modelo Cabeçalho, subcabeçalho, barra lateral direita e clique em Concluir.
    No painel de componentes, você vê todos os componentes padrão disponíveis para as páginas de registro de oportunidade e eventuais componentes personalizados que instalou em sua organização.
  6. No menu de configurações ( Ícone de menu das configurações do painel de componentes do Criador de aplicativo Lightning), selecione Sempre mostrar ícones.
    Os ícones que aparecem na paleta mostram os fatores de forma que cada componente suporta. Por exemplo, se você adicionar o componente Feed do Chatter à sua página, ele será exibido quando você vir a página no desktop e no aplicativo móvel Salesforce. Isso não acontece com o Editor do Chatter, que é compatível apenas com desktop. Veremos esse comportamento na prática quando testarmos a página finalizada.
  7. Arraste o componente Painel de destaques até a região superior da página. Clique em Ver como isso funciona no painel de propriedades do componente a fim de descobrir de onde vem o conteúdo do painel de destaques.
  8. Adicione o componente de Caminho à região abaixo do painel de destaques.
  9. Adicione um componente do Chatter à região inferior à direita.
  10. Adicione um componente de Guias à região inferior à esquerda. Adicionar o componente de Guias O componente de Guias vem com algumas guias padrão. Vamos adicionar mais.
  11. No painel Detalhes do componente Guias, clique em Adicionar guia.
    padrão, outra guia Detalhes é adicionada. Mas como já temos uma, vamos mudá-la para algo diferente.
  12. Clique na segunda guia Detalhes.
  13. No menu suspenso Rótulo da guia, selecione Personalizado e dê à guia um novo rótulo: Itens recentesAdicionar uma nova guia
  14. Clique em Concluído.
  15. Crie uma guia Atividade.
  16. Arraste a guia Itens recentes para o início da lista de guias no painel de propriedades.
    A guia Itens recentes está agora na primeira posição no componente Guias. Você pode clicar em várias guias, mas nada muda porque elas ainda não têm componentes. Elas estão vazias. Vamos mudar isso.
  17. Selecione a guia Detalhes.
  18. Arraste um componente de Detalhe do registro para logo abaixo da guia Detalhes, na área destacada em verde. Adicionar um componente de detalhe
  19. Adicione um componente de Listas relacionadas à guia Relacionados, um componente de Atividades à guia Atividade e o componente de Itens recentes à guia Itens recentes.
  20. Selecione o componente de guias na tela e, no painel de propriedades, mude a ordem das guias para: Detalhes, Atividade, Itens recentes e Relacionadas.
    Você não pode arrastar as guias dentro do componente para movê-las. Você só pode ajustá-las no painel de propriedades.
  21. Clique em Salvar e em Ainda não.

Tornar sua página de registro dinâmica

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.

Vamos tentar fazer isso. Vamos 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. Adicione um componente em rich text acima do componente do Chatter na página.
  2. Digite este texto no componente: Uma oportunidade de um milhão de dólares foi fechada! É isso aí!
  3. Nas propriedades do componente, coloque o texto centralizado e em negrito, com fonte tamanho 18 e do tipo que achar melhor.
  4. Mantenha a opção 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 isso.
  5. Clique em Adicionar filtro.
  6. Defina Campo para Valor, se ainda não estiver.
  7. Defina Operador para Maior ou igual. Em Valor, insira 1000000Configurações de visibilidade do componente
  8. Clique em Concluído.
  9. Clique em Adicionar filtro novamente e crie outro filtro para o campo Estágio igual a Fechada ganha.
    Você pode fazer mais com regras de visibilidade do que apenas controlar se um componente é exibido com base em valores de campo. Como mencionamos, as páginas de registro personalizadas são compatíveis com o Lightning Experience tanto no desktop quanto no aplicativo móvel Salesforce. 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. Vamos configurar regras para que um componente apareça apenas quando a página é visualizada em um telefone.
  10. Adicione outro componente de rich text logo abaixo do primeiro.
  11. Digite este texto no componente: Este componente se destina apenas aos usuários em dispositivos móveis.
  12. Personalize o texto como quiser e clique em Adicionar filtro.
  13. Em Tipo de filtro, clique em Dispositivo.
  14. Defina o campo Valor como Telefone e clique em Concluído.
  15. Salve a página e clique em Ativação.

Distribuir sua própria página de registro personalizada para seus usuários

Tudo o que é bom tem que ser divulgado! Vamos ativar a página. É muito fácil.

Ativação da página de registro

Você tem quatro opções de ativação.
  • Tornar a página como padrão da organização para o objeto.
  • Tornar a página como página de registro de objeto padrão para aplicativos do Lightning específicos.
  • Atribuir a página a uma combinação de aplicativos do Lightning, tipos de registro e perfis.
  • Atribua a página a um fator de forma, como um desktop ou telefone.

Repare nesse último item da lista. Além de criar uma página personalizada para as necessidades dos seus usuários, você pode ir mais além e personalizar uma página considerando a forma como seus usuários a acessam. É possível criar páginas de registros exclusivamente personalizadas mostradas apenas aos usuários móveis, contendo somente o que eles precisam ver quando estão em trânsito ou em campo. Ao mesmo tempo, as páginas de registro exclusivas para desktop podem atender às necessidades dos usuários enquanto eles trabalham no PC ou laptop.

Vamos atribuir essa página a um aplicativo, tipo de registro e perfil específicos. Também queremos garantir que ela seja atribuída aos fatores de forma para desktop e telefone, para podermos vê-la em ambos os equipamentos.

  1. Clique na guia Aplicativo, Tipo de registro e Perfil.
  2. Clique em Atribuir a aplicativos, tipos de registro e perfis.
  3. Atribua a página ao aplicativo Vendas, ao fator de forma para desktop e telefone, ao tipo de registro Mestre e ao perfil Administrador do sistema.
  4. Analise as atribuições da página.
    A coluna Nova página é preenchida com o nome da página que estamos ativando: Nova página de oportunidade.
  5. Clique em Salvar.
Viu? Facílimo. Sua página de registro personalizada está ativa. Vamos conferir.
Nota

Nota

Você deve estar pensando: “Isso é ótimo, mas e se eu mudar de ideia? Como desativo a minha página personalizada?” Isso também é muito fácil. Clique em Ativação, clique na guia Aplicativo, tipo de registro e perfil e em Remover atribuições.

Viu o que você fez?

Você criou uma página e a ativou. Agora vamos ver com ela funciona na prática. Primeiro, vamos vê-la no desktop.

  1. Clique em Voltar no cabeçalho do Criador de aplicativo.
  2. No Iniciador de aplicativos (Ícone do Iniciador de aplicativos), encontre e selecione Vendas e clique na guia Oportunidades.
  3. Selecione uma oportunidade aberta com um valor abaixo de US$ 1.000.000.
    Talvez seja necessário atualizar a página de oportunidade para que as alterações na página de registro que você acabou de fazer apareçam.

    Veja como fica a página de registro personalizada com a empresa de exemplo, Dickenson Mobile Generators. Como atribuiu a página de registro ao perfil Administrador do sistema, você consegue vê-la, mas os outros usuários da sua organização, não. 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 páginas de conta de organizações sem fins lucrativos diferentemente das páginas de conta comercial padrão.
    Registro de oportunidade de exemplo
    Não consegue ver os componentes de rich text adicionados à página? Isso acontece por dois motivos. No caso de um dos componentes, é porque estamos vendo a página em um desktop. Vamos explicar isso em breve. No caso do outro componente, é porque a oportunidade não atende aos critérios que você definiu. Vamos alterar isso.

  4. Nas ações no nível da página do painel de destaques, selecione Editar.
  5. Mude o valor da oportunidade para acima de US$ 1.000.000, mude o estágio para Fechado e ganho e clique em 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.

    Eis o componente!

    Agora vamos ver a página no aplicativo móvel Salesforce.

  6. Abra o aplicativo no seu telefone.
  7. Se necessário, entre usando suas credenciais do Trailhead Playground.
  8. Abra o menu, toque no Iniciador de aplicativos e abra o aplicativo Vendas.
  9. Toque em Oportunidades e navegue até a oportunidade que você atualizou como Fechada ganha.
    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... Página de oportunidade no aplicativo móvel SalesforceAs guias em nosso componente de 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. Mas logo abaixo dele está algo que não vimos ao visualizar a página no desktop: o componente exclusivo para dispositivos móveis.
Você conseguiu! Você deu seus primeiros passos em um mundo maior.

Vamos passar para as páginas do aplicativo.