Trabalhar com um Ășnico registro
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
- 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). - DĂȘ ao componente o nome
bearLocation
. - Edite o arquivo
bearLocation.js-meta.xml
e substitua<isExposed>false</isExposed>
por estas linhas. Isso faz com que seu componente possa ser colocado somente nas pĂĄginas de registro de urso. - Substitua o conteĂșdo de
bearLocation.html
pela marcação a seguir. 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
.
- Exibimos um componente de cartĂŁo com um tĂtulo dinĂąmico com base na expressĂŁo
- Substitua o conteĂșdo de
bearLocation.js
pelo que segue. 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 constantebearFields
. 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 queBear__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çãoloadBear
para buscar dados e erros e transmiti-los à função.@wire
é configurado para chamar a função de adaptadorgetRecord
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.
- Importamos um adaptador
- 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.
- Na sua organização, navegue até a guia Bears (Ursos) e abra um registro.
- Clique em Setup (Configuração) (
) e selecione Edit Page (Editar pĂĄgina).
- Em Custom Components (Componentes personalizados), encontre seu componente bearLocation e arraste-o para o topo da coluna direita.
- Clique em Save (Salvar).
- 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).
- Clique na guia App Default (PadrĂŁo do aplicativo).
- Clique em Assign as App Default (Atribuir como padrĂŁo do aplicativo).
- Marque Ursus Park.
- Clique em Next, Next, (Avançar, Avançar) e em Save (Salvar).
- Clique em Back (Voltar) a fim de retornar Ă pĂĄgina de registro de urso e verificar seu trabalho.
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.
- 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). - DĂȘ ao componente o nome
bearSupervisor
. - Edite o arquivo
bearSupervisor.js-meta.xml
e substitua<isExposed>false</isExposed>
por estas linhas. Isso permite que seu componente seja colocado nas pĂĄginas de registro de urso. - Substitua o conteĂșdo de
bearSupervisor.html
por: 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 propriedadeerror
para renderizar condicionalmente uma mensagem de erro quando nĂŁo conseguimos carregar o registro de urso.
- Usamos uma diretiva
- Substitua o conteĂșdo de
bearSupervisor.js
por: 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 adaptadorgetRecord
. - Expomos uma expressĂŁo
supervisorId
. A expressão usa a funçãogetFieldValue
para recuperar o valor do campo de supervisor.
- Importamos o campo
- 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.
- 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) (
) e selecione Edit Page (Editar pĂĄgina).
- Em Custom Components (Componentes personalizados), encontre seu componente bearSupervisor e arraste-o para baixo do componente bearLocation.
- Clique em Save (Salvar) e em Back (Voltar) para retornar Ă pĂĄgina de registro e verificar seu trabalho.
Ă 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.