Se você já atuou em um grande projeto de Lightning, deve estar cansado de repetir o mesmo trecho de código toda vez que precisa interagir com uma Controller, não é mesmo? Então hoje quero te mostrar duas coisas legais, a primeira é o que o título do post diz, estender um componente do Lightning, e o que isso significa, isso significa que você pode aproveitar parte de um componente dentro de outro, mas fique tranquilo, isso fará sentido assim que começarmos a colocar a mão na massa, e segundo vamos fazer isso criando um componente que permitirá você fazer chamadas Apex com apenas 1 linha de código.

Entendendo o problema

Como eu disse antes, se você já trabalhou com grandes projetos em Lightning, muito provavelmente já precisou fazer uma chamada Apex para consumir dados do Salesforce, e se fez isso mais de uma vez, então você deve ter escrito o código abaixo algumas vezes, não é?

E sim, isso é chato e repetitivo, e tudo que é repetitivo pode ser de alguma forma, otimizado e essa é a ideia aqui hoje!

O resultado esperado

Bom, para facilitar a nossa vida, não seria mais fácil se pudéssemos simplesmente chamar uma classe do apex assim:

Ou ainda, imagine escrever a sua query SOQL diretamente no componente do Lightning e ter o resultado de uma forma mais simples impossível:

Parece mágico, não? pois é exatamente isso que iremos fazer hoje, então chega de enrolação e vamos colocar a mão na massa.

Criando nossa Controller do Apex

A primeira coisa que vamos precisar, é uma Controller do Apex, capaz de falar com nosso componente do Lightning, e fazemos isso utilizando o annotation @AuraEnabled, o objetivo dessa nossa classe é ser um Helper para a execução de nossas futuras SOQLs diretamente de um componente Lightning, então nossa classe ficará assim:

Como você pode ver, nossa classe é bem simples, o nosso método executeSOQL receberá a query, executar e devolver os dados para o Lightning, mas como toda classe precisa de uma cobertura de teste, eu não ia te deixar na mão né, mas isso você pode pegar direto no meu Github.

Criando o Lightning Component

Chegou a hora de criamos o nosso Lightning Component que será estendido futuramente, ele será o responsável por fazer o meio do caminho entre os seus componentes e o Apex, bom se você chegou até aqui, acredito que já deve ter criado o seu primeiro componente em Lightning, então vou ser mais direto ao assunto e pular direto para a parte prática, sem ficar demostrando passo a passo de itens de menu, mas se tiver dúvidas, fala ai nos comentários que eu te ajudo sem problemas, ok?

Então vamos lá, vou chamar o nosso componente de ApexExtension, nome bem criativo, eu sei, nosso .CMP ficará assim:

Note um ponto interessante nesse componente, que é o extensible=”true”, isso indica que um componente do Lightning pode ser estendido por outros componentes, um outro atributo interessante aqui é o abstract=”true” isso garante a segurança do nosso componente, evitando que ele seja instanciado diretamente, até porque ele sozinho não servirá para nada não é mesmo?

O Helper do nosso componente ficará assim:

Com isso, temos tudo pronto por aqui, agora é hora de consumir o que criamos, vamos lá?

Estendendo componente do Lightning

Agora é a hora em que a mágica acontece, vamos criar um componente que irá listar todos os contados de uma conta usando o novo método SOQL e também chamar o método de uma controller para obter o total de contatos associados a uma conta, e para isso vamos estender o componente que criamos antes, e utilizar os métodos novos que ganhamos \o/. Vale ressalvar que existem maneiras mais fáceis de fazer isso, mas o objetivo aqui é demostrar o uso do nosso Extender.

Abaixo como ficará nosso novo componente ContactList:

Note o atributo extends=”c:ApexExtension” ele é responsável por estender o componente com base no nosso componente criado anteriormente.

E nossa controller do Lightning ficará assim:

O nosso componente consome uma nova Apex Controller, quer será responsável por retornar o número total de contatos de uma conta, a nossa controller ficará assim:

Todos os códigos utilizados para esse exemplo estão disponíveis nesse Github.

Espero que isso os ajude a escrever componentes do Lightning com menos linhas e mais organizado.

 

Um forte abraço Trailblazers, e até o próximo post :)

 

Fernando Sousa

Fernando Sousa

Salesforce Solution Architect at Resource It Solution

Formado em Bacharelado em Sistemas da Informação pela Universidade de Taubaté (UNITAU) e MBA em Projeto de Aplicações para Dispositivos Móveis pelo IGTI – Instituto de Gestão em Tecnologia da Informação.

Comecei a programar bem cedo, por volta de 10 anos de idade, de maneira auto-didata passei por várias linguagens.

Em 2015 conheci a Salesforce, fazendo integração entre Salesforce e um Aplicativos Mobile,

Atualmente possuo as certificações Salesforce Salesforce Certified Platform Developer I e Salesforce Certified Platform App Builder

Com mais de 100 emblemas e 50.000 pontos no trailhead, conquistei o título de Ranger.

Acompanhe meu Trailhead aqui.

 

 

 

Pin It on Pinterest

Shares