Trabajar con un Ășnico registro
Lo que harĂĄ
Los guardaparques de Ursus Park necesitan su ayuda para rastrear osos que merodean en el parque. Ya ingresaron alguna informaciĂłn en Salesforce, pero necesitan que usted les ofrezca una experiencia de aplicaciĂłn personalizada.
CĂłmo crear el componente bear location (ubicaciĂłn del oso)
- En VS Code, haga clic con el botĂłn secundario en la carpeta
lwc
y, luego, en SFDX: Create Lightning Web Component (Crear componente web Lightning). - Asigne el nombre
bearLocation
al componente. - Modifique el archivo
bearLocation.js-meta.xml
y sustituya<isExposed>false</isExposed>
por estas lĂneas. AsĂ, garantiza que su componente solo pueda ubicarse en pĂĄginas de registro Bear (Oso). - Reemplace el contenido
bearLocation.html
por el siguiente marcado. Aspectos destacados del cĂłdigo:- Mostramos un componente de tarjeta con un tĂtulo dinĂĄmico en funciĂłn de la expresiĂłn
cardTitle
. - La tarjeta contiene un componente de mapa con marcadores definidos por
mapMarkers
.
- Mostramos un componente de tarjeta con un tĂtulo dinĂĄmico en funciĂłn de la expresiĂłn
- Sustituya el contenido de
bearLocation.js
por el siguiente. Aspectos destacados del cĂłdigo:- Importamos un adaptador
getRecord
que nos permite utilizar Lightning Data Service para recuperar registros sin tener que redactar cĂłdigo Apex. - Importamos una funciĂłn auxiliar
getFieldValue
para recuperar valores de campo. - Confeccionamos una lista de nombres de campo incluidos en el cĂłdigo fuente del objeto
Bear__c
en la constantebearFields
. Tenga en cuenta que este enfoque no es compatible con la integridad referencial. La existencia del objeto y de los campos no se puede verificar en el tiempo de compilaciĂłn. Esto significa queBear__c
o cualquiera de sus campos pueden eliminarse a pesar de que se utilicen en su cĂłdigo. Utilizamos otro enfoque que es compatible con la integridad referencial en nuestro siguiente componente. - La propiedad
recordId
decorada con@api
automĂĄticamente recibe el Id. de registro actual. - Utilizamos un decorador
@wire
en la funciĂłnloadBear
para recuperar datos y errores, y luego transferirlos a la funciĂłn.@wire
estĂĄ configurado para llamar a la funciĂłn del adaptadorgetRecord
con algunos parĂĄmetros. Esos parĂĄmetros son el Id. de registro y la lista de campos de registro que queremos recuperar. Gracias al decorador@wire
, se llama aloadBear
automĂĄticamente cuando se carga el componente o cuando cambia el Id. de registro. - En esta primera versiĂłn de nuestro componente no corregimos errores. Por ahora, omitiremos esa parte.
- Si no hay ningĂșn error, guardamos el nombre del oso y creamos un marcador de mapa con las coordenadas del oso.
- Importamos un adaptador
- Implemente el cĂłdigo actualizado en la organizaciĂłn. Haga clic con el botĂłn secundario en la carpeta default (predeterminada) y, luego, en SDFX: Deploy Source to Org (Implementar fuente en organizaciĂłn).
CĂłmo agregar el componente Bear location (UbicaciĂłn del oso) a la pĂĄgina de registro Bear (Oso)
Ahora que implementamos nuestro componente, vamos a agregarlo a una pĂĄgina para verlo.
- En su organizaciĂłn, vaya a la ficha Bears (Osos) y abra cualquier registro.
- Haga clic en Setup (ConfiguraciĂłn) (
) y seleccione Edit Page (Modificar pĂĄgina).
- En Custom Components (Componentes personalizados), busque su componente bearLocation y arrĂĄstrelo a la parte superior de la columna de la derecha.
- Haga clic en Save (Guardar).
- Como esta es la primera vez que modificamos la pĂĄgina de registro Bear (Oso) estĂĄndar, debemos activar la pĂĄgina actualizada de modo que nuestros usuarios puedan ver lo que hicimos. Haga clic en Activate (Activar).
- Haga clic en la ficha App Default (Predeterminado de la aplicaciĂłn).
- Haga clic en Assign as Org Default (Asignar como predeterminado de la aplicaciĂłn).
- Marque Ursus Park.
- Haga clic en Next (Siguiente), Next (Siguiente) y en Save (Guardar).
- Haga clic en Back (AtrĂĄs) para volver a la pĂĄgina de registro Bear (Oso) y revise su trabajo.
ÂĄBien hecho! Ahora podemos ver el oso en el mapa. Sigamos personalizando la pĂĄgina de registro Bear (Oso).
CĂłmo crear el componente Bear Supervisor (Supervisor del oso)
A cada guardaparque se le asigna la supervisiĂłn de determinados osos. Si ven a un oso haciendo algo indebido, los empleados del parque deben poder comunicarse rĂĄpidamente con el supervisor correspondiente. Para que esto sea posible, deberĂĄ agregar una tarjeta Bear Supervisor (Supervisor del oso) en la pĂĄgina de registro Bear (Oso).
- En VS Code, haga clic con el botĂłn secundario en la carpeta
lwc
y, luego, en SFDX: Create Lightning Web Component (Crear componente web Lightning). - Asigne el nombre
bearSupervisor
al componente. - Modifique el archivo
bearSupervisor.js-meta.xml
y sustituya<isExposed>false</isExposed>
por estas lĂneas. AsĂ, podrĂĄ ubicar su componente en las pĂĄginas de registro Bear (Oso). - Sustituya el contenido de
bearSupervisor.html
por: Aspectos destacados del cĂłdigo:- Utilizamos una directiva
if:true
para renderizar de manera condicional al supervisor una vez que se hayan cargado los datos del oso. - Mostramos una vista compacta del registro del supervisor (Contacto) con
lightning-record-form
. - Utilizamos una directiva
if:true
y la propiedaderror
para renderizar de manera condicional un mensaje de error si no podemos cargar el registro Bear (Oso).
- Utilizamos una directiva
- Sustituya el contenido de
bearSupervisor.js
por: Aspectos destacados del cĂłdigo:- Importamos el campo
Bear__c.Supervisor__c
mediante la importaciĂłn de un esquema, en lugar de usar una cadena fijada en el cĂłdigo fuente como hicimos anteriormente en el componente Bear Location (UbicaciĂłn del oso). El mayor beneficio de este enfoque es que garantiza la integridad referencial. - Recuperamos el registro Bear (Oso) con el decorador
@wire
y el adaptadorgetRecord
. - Exponemos una expresiĂłn
supervisorId
. La expresiĂłn utiliza la funciĂłngetFieldValue
para recuperar el valor del campo de supervisor.
- Importamos el campo
- Implemente el cĂłdigo actualizado en la organizaciĂłn. Haga clic con el botĂłn secundario en la carpeta default (predeterminada) y, luego, en SDFX: Deploy Source to Org (Implementar fuente en organizaciĂłn).
CĂłmo agregar el componente Bear Supervisor (Supervisor del oso) a la pĂĄgina de registro Bear (Oso)
Vamos a agregar nuestro nuevo componente a la pĂĄgina de registro Bear (Oso).
- En su organizaciĂłn, vaya a una pĂĄgina de registro Bear (Oso); para ello, haga clic en la ficha Bears (Osos) y, luego, en cualquier oso. Desde la pĂĄgina de registro Bear, haga clic en Setup (ConfiguraciĂłn) (
) y seleccione Edit Page (Modificar pĂĄgina).
- En Custom Components (Componentes personalizados), busque el componente bearSupervisor y arrĂĄstrelo debajo del componente bearLocation.
- Haga clic en Save (Guardar) y, luego, en Back (AtrĂĄs) para volver a la pĂĄgina de registro y revisar su trabajo.
AsĂ finaliza este paso. Vimos cĂłmo los componentes web Lightning pueden gestionar registros Ășnicos con el adaptador @wire
. Ahora, veamos las listas de registros.