Criar um componente de interface do usuário reutilizável com componentes Web do Lightning

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. 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.

Acompanhar com o Trail Together

Deseja acompanhar um especialista enquanto trabalha nesta etapa? Veja este vídeo que faz parte da série Trail Together.

(Este clipe começa na marca dos 46:56 minutos, caso você queira retroceder e ver o início da etapa novamente.)

Introdução

Os componentes Web do Lightning são elementos HTML personalizados que usam os padrões de Componentes Web e são criados com HTML e JavaScript moderno. Um componente Web do Lightning (LWC, do inglês Lightning web component) é executado no navegador nativamente e permite que os desenvolvedores personalizem a interface de usuário pronta para usar.

Criar e implantar um componente Web do Lightning

Em force-app/main/default, clique com o botão direito do mouse na pasta lwc e selecione SFDX: Create Lightning Web Component (Criar componente Web do Lightning).
Nomeie o componente Web do Lightning housingMap e selecione o diretório main/default/lwc.
Você verá os arquivos: um arquivo HTML, um arquivo JavaScript, um arquivo XML de metadados e um arquivo test.js.
No arquivo HTML, housingMap.html, copie e cole o código a seguir.

    <template>
  <lightning-card title="Housing Map">
    <!-- Explore all the base components via Base component library
    (https://developer.salesforce.com/docs/component-library/overview/components)-->
      <lightning-map map-markers={mapMarkers}> </lightning-map>
  </lightning-card>
</template>

Usamos um componente básico do Lightning lightning-map para plotar o conjunto de dados em um mapa. Os componentes básicos envolvem muitas funcionalidades. Neste exemplo, você não precisa escrever marcação HTML para produzir uma interface de usuário de mapa ou codificar tanto JavaScript para integrar ao Google Maps.

5. Salve o arquivo.

6. No arquivo JavaScript, housingMap.js, copie e cole o código a seguir.

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
        console.log(data);
    }
  }
}

O componente Web do Lightning invoca a classe do Apex HouseService que você escreveu na seção anterior para buscar os dados. Esse código mostra como recuperar dados invocando um método do Apex usando o decorador @wire.

Para permitir que um método do Apex seja usado em um LWC, anote-o com a anotação @AuraEnabled. Você pode importar o método @AuraEnabled para o LWC como uma função (mostrada na linha 2). Quando usado com o decorador @wire (linha 8), o componente recupera dados por meio do método.

Em seguida, vamos adicionar código para transformar os dados conforme necessário para o componente básico lightning-map. Substitua o código após if (data) {pelas seguintes linhas.

// Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;

O código final no arquivo housingMap.js deve ficar assim.

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
         // Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;
        }
    }
}

Salve o arquivo.

No arquivo XML, housingMap.js-meta.xml, faça as alterações de código para corresponder às linhas de 4 a 7.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 <apiVersion>59.0</apiVersion>
 <isExposed>true</isExposed>
  <targets>
 <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Observe que temos o atributo de destino definido como lightning__HomePage. Isso significa que os administradores terão o componente disponível para colocar na página inicial. Há destinos adicionais que os desenvolvedores podem adicionar aqui para expor os componentes de outras partes da interface de usuário do Salesforce. Às vezes, o destino de um componente inclui contexto adicional, como dados de entrada. Um excelente exemplo é um valor de ID de registro em uma página de registro. Os destinos identificados aqui são os que determinam se o componente pode usar esses diferentes contextos. Procure como outros tipos de destino funcionam na seção Recursos.

10. Salve o arquivo.

11. Clique com o botão direito do mouse e selecione SFDX: Deploy Source to Org (Implantar fonte na organização).

Adicionar o componente ao início do aplicativo

No Visual Studio Code, abra a paleta de comandos pressionando Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS/Linux).
Digite SFDX.
Selecione SFDX: Open Default Org (Abrir organização padrão).
Seu Trailhead Playground abre em um navegador separado.
Clique em , pesquise e selecione Dreamhouse.
Navegue até a guia Home (Início): Clique em "Home" (Início) no menu de navegação superior.
Clique em e selecione Edit Page (Editar página).
Arraste o componente Web do Lightning housingMap da área Custom (Personalizado) da lista Lightning Components (Componentes do Lightning) para a parte de cima da tela de página.
Clique em Save (Salvar).
Clique em Activate (Ativar).
Clique em Assign as Org Default (Atribuir como padrão da organização).
Clique em Save (Salvar).
Clique em Save (Salvar) novamente e clique em para retornar à página.
Atualize a página para exibir seu novo componente.

Página inicial com o componente Web do Lightning Housing Map.

A criação com componentes Web do Lightning no tempo de execução gerenciado do Salesforce é mais rápida porque:

Você escreve menos código para fazer mais com acesso a vários componentes básicos do Lightning (lightning-map e lightning-card no componente Housing Map foram exemplos de componentes básicos que usamos acima).
A conexão do lado do cliente com o serviço de dados do Apex de back-end é simplificada com os decoradores JavaScript (por exemplo, o decorador @wire que usamos no código acima) e módulos integrados (@salesforce/apex).

Este foi um exemplo muito simples de LWC. Quer ver um exemplo mais avançado de um componente Web do Lightning? Dê uma olhada nos componentes envolvidos na criação da página do explorador de propriedades na unidade Conhecer o aplicativo de exemplo do módulo do Trailhead Início rápido: Explorar o aplicativo de exemplo Dreamhouse. Aqui, usamos um componente Web do Lightning para personalizar completamente a experiência do usuário do aplicativo.

Página personalizada criada com componentes Web do Lightning.

Quer outra opção? Instale e explore o Aplicativo de exemplo Dreamhouse completo para saber mais sobre como criar um aplicativo de ponta a ponta na Salesforce Platform.

O que vem a seguir?

Este projeto deu a você uma visão geral de como é ser um desenvolvedor que trabalha com recursos da Salesforce Platform, como LWC e Apex. No entanto, isso não é tudo o que você pode fazer!

O Heroku é outro produto que nossos desenvolvedores podem usar se precisarem controlar totalmente a escalabilidade horizontal e vertical dos recursos do aplicativo. E com o conjunto de produtos Salesforce e Salesforce AppExchange, o céu é o limite para as oportunidades de aprendizado para você.

Você não está sozinho na jornada de aprendizado. Colabore, crie redes, faça conexões e aprenda o desenvolvimento do Salesforce com outros desenvolvedores do mundo todo no Grupo de desenvolvedores do Salesforce na Salesforce Trailblazer Community.

Procurando ajuda?

Descubra mais