Skip to main content
Junte-se a nĂłs na TDX em SĂŁo Francisco ou no Salesforce+ nos dias 5 e 6 de maio e assista Ă  Developer Conference for the AI Agent Era. Registre-se agora.

Trabalhar com um Ășnico registro

Nota

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.

O que vocĂȘ vai fazer

Os guardas do Ursus Park precisam da sua ajuda para rastrear ursos que andam pelo parque. Eles jĂĄ tĂȘm algumas informaçÔes inseridas no Salesforce, mas precisam que vocĂȘ dĂȘ a eles uma experiĂȘncia de aplicativo personalizado.

Criar o componente de localização de ursos

  1. No VS Code, clique com o botĂŁo direito do mouse na pasta lwc e clique em SFDX: Create Lightning Web Component (Criar componente Web do Lightning).
  2. DĂȘ ao componente o nome bearLocation.
  3. Edite o arquivo bearLocation.js-meta.xml e substitua <isExposed>false</isExposed> por estas linhas.
    <isExposed>true</isExposed>
    <targets>
    	<target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
    	<targetConfig targets="lightning__RecordPage">
    		<objects>
    			<object>Bear__c</object>
    		</objects>
    	</targetConfig>
    </targetConfigs>
    Isso faz com que seu componente possa ser colocado somente nas pĂĄginas de registro de urso.
  4. Substitua o conteĂșdo de bearLocation.html pela marcação a seguir.
    <template>
    	<lightning-card title={cardTitle} icon-name="standard:address">
    		<lightning-map map-markers={mapMarkers} zoom-level="12"></lightning-map>
    	</lightning-card>
    </template>
    Destaques do cĂłdigo:
    • Exibimos um componente de cartĂŁo com um tĂ­tulo dinĂąmico com base na expressĂŁo cardTitle.
    • O cartĂŁo contĂ©m um componente de mapa com marcadores definidos por mapMarkers.
  5. Substitua o conteĂșdo de bearLocation.js pelo que segue.
    import { LightningElement, api, wire } from 'lwc';
    import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
    // Set Bear object fields
    const NAME_FIELD = 'Bear__c.Name';
    const LOCATION_LATITUDE_FIELD = 'Bear__c.Location__Latitude__s';
    const LOCATION_LONGITUDE_FIELD = 'Bear__c.Location__Longitude__s';
    const bearFields = [
    	NAME_FIELD,
    	LOCATION_LATITUDE_FIELD,
    	LOCATION_LONGITUDE_FIELD
    ];
    export default class BearLocation extends LightningElement {
      @api recordId;
      name;
      mapMarkers = [];
      @wire(getRecord, { recordId: '$recordId', fields: bearFields })
      loadBear({ error, data }) {
        if (error) {
          // TODO: handle error
        } else if (data) {
          // Get Bear data
          this.name =  getFieldValue(data, NAME_FIELD);
          const Latitude = getFieldValue(data, LOCATION_LATITUDE_FIELD);
          const Longitude = getFieldValue(data, LOCATION_LONGITUDE_FIELD);
          // Transform bear data into map markers
          this.mapMarkers = [{
            location: { Latitude, Longitude },
            title: this.name,
            description: `Coords: ${Latitude}, ${Longitude}`
          }];
        }
      }
      get cardTitle() {
        return (this.name) ? `${this.name}'s location` : 'Bear location';
      }
    }
    Destaques do cĂłdigo:
    • Importamos um adaptador getRecord que nos permite usar o Lightning Data Service para recuperar registros sem ter que programar em Apex.
    • Importamos uma função auxiliar getFieldValue para recuperar valores de campo.
    • Montamos uma lista de nomes de campo codificados com base no objeto Bear__c na constante bearFields. Observe que essa abordagem nĂŁo dĂĄ suporte Ă  integridade referencial. A existĂȘncia do objeto e dos campos nĂŁo pode ser verificada no tempo de compilação. Isso significa que Bear__c ou seus campos poderiam ser excluĂ­dos mesmo que sejam usados no seu cĂłdigo. Usamos outra abordagem que dĂĄ suporte Ă  integridade referencial em nosso prĂłximo componente.
    • A propriedade recordId decorada com @api recebe automaticamente a ID de registro atual.
    • Usamos um decorador @wire na função loadBear para buscar dados e erros e transmiti-los Ă  função. @wire Ă© configurado para chamar a função de adaptador getRecord com alguns parĂąmetros. Esses parĂąmetros sĂŁo a ID do registro e a lista de campos de registro que desejamos recuperar. Graças ao decorador @wire, loadBear Ă© chamado automaticamente quando o componente Ă© carregado ou a ID de registro Ă© alterada.
    • Nessa primeira versĂŁo do nosso componente nĂŁo estamos tratando erros. Vamos ignorĂĄ-los por enquanto.
    • Se nĂŁo houver erros, salvaremos o nome do urso e criaremos um marcador de mapa com as coordenadas do urso.
  6. Implante o código atualizado na organização. Clique com o botão direito do mouse na pasta padrão e clique em SFDX: Deploy Source to Org (Implantar fonte na organização).

Adicionar o componente de localização de ursos à pågina de registro de urso

Agora que implementamos nosso componente, vamos adicionĂĄ-lo a uma pĂĄgina para exibi-lo.

  1. Na sua organização, navegue até a guia Bears (Ursos) e abra um registro.
  2. Clique em Setup (Configuração) (Engrenagem de configuração) e selecione Edit Page (Editar pågina).
  3. Em Custom Components (Componentes personalizados), encontre seu componente bearLocation e arraste-o para o topo da coluna direita.
  4. Clique em Save (Salvar).
  5. Como esta Ă© a primeira vez que alteramos a pĂĄgina padrĂŁo de registro de urso, precisamos ativar a pĂĄgina atualizada para que nossos usuĂĄrios possam ver o que fizemos. Clique em Activate (Ativar).
  6. Clique na guia App Default (PadrĂŁo do aplicativo).
  7. Clique em Assign as App Default (Atribuir como padrĂŁo do aplicativo).
  8. Marque Ursus Park.
  9. Clique em Next, Next, (Avançar, Avançar) e em Save (Salvar).
  10. Clique em Back (Voltar) a fim de retornar Ă  pĂĄgina de registro de urso e verificar seu trabalho.

Componente de localização de ursos na pågina de registro de urso

Muito bem! Agora podemos ver o urso no mapa. Vamos continuar a personalizar a pĂĄgina de registro de urso.

Criar o componente de supervisor de urso

Os guardas florestais sĂŁo atribuĂ­dos como supervisores de ursos especĂ­ficos. Se um urso Ă© visto fazendo algo inconsequente, os funcionĂĄrios do parque precisam poder contatar rapidamente o supervisor do urso. VocĂȘ vai ajudar adicionando um cartĂŁo de supervisor do urso na pĂĄgina de registro do urso.

  1. No VS Code, clique com o botĂŁo direito do mouse na pasta lwc e clique em SFDX: Create Lightning Web Component (Criar componente Web do Lightning).
  2. DĂȘ ao componente o nome bearSupervisor.
  3. Edite o arquivo bearSupervisor.js-meta.xml e substitua <isExposed>false</isExposed> por estas linhas.
    <isExposed>true</isExposed>
    <targets>
    	<target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
    	<targetConfig targets="lightning__RecordPage">
    		<objects>
    			<object>Bear__c</object>
    		</objects>
    	</targetConfig>
    </targetConfigs>
    Isso permite que seu componente seja colocado nas pĂĄginas de registro de urso.
  4. Substitua o conteĂșdo de bearSupervisor.html por:
    <template>
    	<lightning-card title="Supervisor" icon-name="standard:people">
    		<div class="slds-var-m-around_medium">
    			<!-- Show supervisor when bear is loaded -->
    			<template if:true={bear.data}>
    				<lightning-record-form
    					object-api-name="Contact"
    					record-id={supervisorId}
    					layout-type="Compact">
    				</lightning-record-form>
    			</template>
    			<!-- Data failed to load -->
    			<template if:true={bear.error}>
    				<div class="slds-text-color_error">
    					An error occurred while loading the bear record
    				</div>
    			</template>
    		</div>
    	</lightning-card>
    </template>
    Destaques do cĂłdigo:
    • Usamos uma diretiva if:true para renderizar condicionalmente o supervisor quando os dados do urso sĂŁo carregados.
    • Mostramos uma exibição compacta do registro de supervisor (Contato) com um lightning-record-form.
    • Usamos uma diretiva if:true e a propriedade error para renderizar condicionalmente uma mensagem de erro quando nĂŁo conseguimos carregar o registro de urso.
  5. Substitua o conteĂșdo de bearSupervisor.js por:
    import { LightningElement, api, wire } from 'lwc';
    import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
    // Import Bear object fields
    import SUPERVISOR_FIELD from '@salesforce/schema/Bear__c.Supervisor__c';
    const bearFields = [SUPERVISOR_FIELD];
    export default class BearSupervisor extends LightningElement {
    	@api recordId; // Bear Id
    	@wire(getRecord, { recordId: '$recordId', fields: bearFields })
      bear;
    	get supervisorId() {
    		return getFieldValue(this.bear.data, SUPERVISOR_FIELD);
    	}
    }
    Destaques do cĂłdigo:
    • Importamos o campo Bear__c.Supervisor__c por meio de uma importação de esquema em vez de usar uma sequĂȘncia de caracteres codificada como fizemos antes no componente de localização de ursos. A principal vantagem dessa abordagem Ă© que ela garante a integridade referencial.
    • Recuperamos o registro de urso usando o decorador @wire e o adaptador getRecord.
    • Expomos uma expressĂŁo supervisorId. A expressĂŁo usa a função getFieldValue para recuperar o valor do campo de supervisor.
  6. Implante o código atualizado na organização. Clique com o botão direito do mouse na pasta padrão e clique em SFDX: Deploy Source to Org (Implantar fonte na organização).

Adicionar o componente de supervisor de urso Ă  pĂĄgina de registro de urso

Vamos adicionar nosso novo componente Ă  pĂĄgina de registro de urso.

  1. Na sua organização, navegue até uma pågina de registro de urso clicando na guia Bears (Ursos) e clicando em um urso. Na pågina de registro de urso, clique em Setup (Configuração) (Engrenagem de configuração) e selecione Edit Page (Editar pågina).
  2. Em Custom Components (Componentes personalizados), encontre seu componente bearSupervisor e arraste-o para baixo do componente bearLocation.
  3. Clique em Save (Salvar) e em Back (Voltar) para retornar Ă  pĂĄgina de registro e verificar seu trabalho.

Componente de supervisor de urso na pĂĄgina de registro de urso

É tudo para esta etapa. Vimos como os componentes Web do Lightning podem lidar com registros Ășnicos usando o adaptador @wire. Agora vamos passar para as listas de registros.

Verificar etapa

+100 pontos

VocĂȘ concluirĂĄ este(a) projeto em sua prĂłpria organização prĂĄtica. Clique em Iniciar para começar, ou clique no nome da sua organização para escolher uma diferente.

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiĂȘncia com o Trailhead. Agora vocĂȘ pode acessar o novo formulĂĄrio de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback