Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

Trabajar con un Ășnico registro

Nota

Nota

ÂżEs su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre parĂ©ntesis para navegar. Copie y pegue solo los valores en inglĂ©s, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organizaciĂłn en español (LATAM), recomendamos que (1) cambie la configuraciĂłn local a Estados Unidos, (2) cambie el idioma a inglĂ©s (segĂșn estas instrucciones) y, luego, (3) haga clic en el botĂłn “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener mĂĄs informaciĂłn sobre cĂłmo aprovechar la experiencia de Trailhead en otros idiomas.

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)

  1. 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).
  2. Asigne el nombre bearLocation al componente.
  3. Modifique el archivo bearLocation.js-meta.xml y sustituya <isExposed>false</isExposed> por estas lĂ­neas.
    <isExposed>true</isExposed>
    <targets>
    	<target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
    	<targetConfig targets="lightning__RecordPage">
    		<objects>
    			<object>Bear__c</object>
    		</objects>
    	</targetConfig>
    </targetConfigs>
    AsĂ­, garantiza que su componente solo pueda ubicarse en pĂĄginas de registro Bear (Oso).
  4. Reemplace el contenido bearLocation.html por el siguiente marcado.
    <template>
    	<lightning-card title={cardTitle} icon-name="standard:address">
    		<lightning-map map-markers={mapMarkers} zoom-level="12"></lightning-map>
    	</lightning-card>
    </template>
    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.
  5. Sustituya el contenido de bearLocation.js por el siguiente.
    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';
      }
    }
    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 constante bearFields. 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 que Bear__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Ăłn loadBear para recuperar datos y errores, y luego transferirlos a la funciĂłn. @wire estĂĄ configurado para llamar a la funciĂłn del adaptador getRecord 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 a loadBear 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.
  6. 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.

  1. En su organizaciĂłn, vaya a la ficha Bears (Osos) y abra cualquier registro.
  2. Haga clic en Setup (ConfiguraciĂłn) (Engranaje de Setup (ConfiguraciĂłn)) y seleccione Edit Page (Modificar pĂĄgina).
  3. En Custom Components (Componentes personalizados), busque su componente bearLocation y arrĂĄstrelo a la parte superior de la columna de la derecha.
  4. Haga clic en Save (Guardar).
  5. 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).
  6. Haga clic en la ficha App Default (Predeterminado de la aplicaciĂłn).
  7. Haga clic en Assign as Org Default (Asignar como predeterminado de la aplicaciĂłn).
  8. Marque Ursus Park.
  9. Haga clic en Next (Siguiente), Next (Siguiente) y en Save (Guardar).
  10. Haga clic en Back (AtrĂĄs) para volver a la pĂĄgina de registro Bear (Oso) y revise su trabajo.

Componente Bear location (UbicaciĂłn del oso) en la pĂĄgina de registro Bear (Oso)

ÂĄ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).

  1. 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).
  2. Asigne el nombre bearSupervisor al componente.
  3. Modifique el archivo bearSupervisor.js-meta.xml y sustituya <isExposed>false</isExposed> por estas lĂ­neas.
    <isExposed>true</isExposed>
    <targets>
    	<target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
    	<targetConfig targets="lightning__RecordPage">
    		<objects>
    			<object>Bear__c</object>
    		</objects>
    	</targetConfig>
    </targetConfigs>
    AsĂ­, podrĂĄ ubicar su componente en las pĂĄginas de registro Bear (Oso).
  4. Sustituya el contenido 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>
    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 propiedad error para renderizar de manera condicional un mensaje de error si no podemos cargar el registro Bear (Oso).
  5. Sustituya el contenido 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);
    	}
    }
    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 adaptador getRecord.
    • Exponemos una expresiĂłn supervisorId. La expresiĂłn utiliza la funciĂłn getFieldValue para recuperar el valor del campo de supervisor.
  6. 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).

  1. 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) (Engranaje de Setup (ConfiguraciĂłn)) y seleccione Edit Page (Modificar pĂĄgina).
  2. En Custom Components (Componentes personalizados), busque el componente bearSupervisor y arrĂĄstrelo debajo del componente bearLocation.
  3. Haga clic en Save (Guardar) y, luego, en Back (AtrĂĄs) para volver a la pĂĄgina de registro y revisar su trabajo.

Componente Bear Supervisor (Supervisor del oso) en la pĂĄgina de registro Bear (Oso)

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.

Verificar paso

+100 puntos

CompletarĂĄ esta/este proyecto en su propia organizaciĂłn de prĂĄcticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organizaciĂłn para seleccionar una diferente.

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantarĂ­a saber mĂĄs sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

MĂĄs informaciĂłn Continuar a Compartir comentarios