Obtenga el Id. de registro y el nombre de la API del objeto en el componente web Lightning

Última actualización el 7 de julio de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

• ¿Cómo accede a la identificación del registro actual, el nombre de la API del objeto actual y el ancho de la región del componente cuando usa el componente web lightning?

Objetivos:

Después de leer este blog, podrá:

• Acceda al Id. de registro actual en el componente web lightning
• Acceda al nombre de la API del objeto actual en el componente web lightning
• Acceda al ID de registro actual y al nombre de la API del objeto cuando use el componente web lightning en sitios de creación de experiencia
• Acceda al ancho de las regiones del componente cuando agrega un componente a una región en una página en el Generador de aplicaciones Lightning
• y mucho más

En el pasado se escribieron algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?

1. Comprobar los permisos de usuario para el usuario que ha iniciado sesión en el componente web Lightning
2. Agregar componentes web Lightning en Mobile y Lightning Experience como fichas

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Janel quiere saber cómo acceder y mostrar el Id. de registro actual, el nombre de la API del objeto y el ancho de las regiones del componente cuando agrega un componente a una región en una página en el Generador de aplicaciones Lightning.

Registro de acceso, contexto de objeto y ancho de componente consciente cuando el componente se usa en una página de registro Lightning

Si se usa un componente web lightning con una propiedad recordId en una página de registro Lightning, entonces la página establece recordId en el ID de 18 caracteres del registro. Cree una propiedad recordId pública declarándola mediante el decorador @api.

@api recordId;

Si se usa un componente web lightning con una propiedad objectApiName en una página de registro Lightning, entonces la página establece el nombre de API del objeto asociado con el registro que se está viendo. Cree una propiedad objectApiName pública declarándola mediante el decorador @api.

@api objetoNombreApi;

Si se usa un componente web Lightning con una propiedad flexipageRegionWidth en una página de registro Lightning, entonces la página pasa el ancho de la región al componente. Cree una propiedad flexipageRegionWidth pública declarándola mediante @api decorator .

@api flexipageRegionWidth;

Registro de acceso, contexto de objeto cuando el componente se usa en sitios de Experience Builder

A diferencia de las páginas de registros Lightning, los sitios de Experience Builder no vinculan automáticamente recordId y objectApiName a la plantilla de componentes.

Para acceder al ID de registro del registro actual, debe agregar recordId y objectApiName en una expresión en el archivo *.js-meta.xml del componente.

<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>55.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>lightningCommunity__Predeterminado</target> <target>relámpago__RecordPage</target> </objetivos> <configuraciones de destino> <targetConfig objetivos="lightningCommunity__Default"> <propiedad nombre="IdRegistro" tipo="Cadena" label="Identificación del registro" description="Pasar el ID de registro de la página a la variable del componente" predeterminado="{!recordId}" /> <propiedad nombre="objetoNombreApi" tipo="Cadena" label="Nombre del objeto" description="Pasar el nombre del objeto de la página a la variable del componente" predeterminado="{!objectApiName}"/> </targetConfig> </configuraciones de destino>
</LightningComponentBundle>

Enfoque de Campeón de Automatización (I-do):

Ahora es el momento de crear un componente web relámpago para acceder al ID de registro actual, el nombre de la API del objeto y el ancho de la región de Flexipage en una página de registro.

miscRecord .html

Para hacer referencia a recordId, objectApiName y flexipageRegionWidth en una plantilla, use la sintaxis {property } , que es la misma sintaxis que usamos para hacer referencia a cualquier propiedad de JavaScript.

<plantilla> <lightning-card title="Mostrar ID de registro y nombre de API de objeto"> <h2><b>ID de registro:</b> {recordId}</h2> <h2><b>Nombre de la API del objeto:</b> {objectApiName}</h2> <h2><b>Ancho de la región del componente:</b> {flexipageRegionWidth}</h2> </tarjeta-relámpago>
</plantilla>

MiscRecord .js

Este código JavaScript de muestra utiliza el decorador @api para crear propiedades recordId , objectApiName y flexipageRegionWidth públicas .

Cuando se invoca el componente web Lightning en un contexto de registro en Lightning Experience o la aplicación móvil, completará el valor de las propiedades públicas que definimos en Javascript, como se menciona a continuación.

1. El recordId se establece en el ID de 18 caracteres del registro.
2. El objectApiName se establece en el nombre de la API del objeto asociado con el registro.
3. La propiedad flexipageRegionWidth recibe el valor de ancho de la región en la que reside el componente en la página.

importar { LightningElement, api } desde 'lwc'; exportar clase predeterminada MiscRecord extiende LightningElement { @api recordId; @api objetoNombreApi; @api flexipageRegionWidth;
}

miscRecord.js-meta.xml

Se puede utilizar un componente web lightning para crear páginas personalizadas para Lightning Experience y la aplicación móvil Salesforce rápidamente con herramientas de apuntar y hacer clic. Asegúrese de agregar el objetivo correcto para ello.

Este archivo de configuración hace que el componente esté disponible para la página de registro de Lightning pero restringe la compatibilidad en escritorios

<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>55.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__RecordPage</target> </objetivos>
</LightningComponentBundle>

Prueba de concepto

Evaluación formativa:

¡Quiero saber de ti!

¿Qué es una cosa que aprendiste de esta publicación? ¿Cómo imagina aplicar este nuevo conocimiento en el mundo real? Siéntase libre de compartir en los comentarios a continuación.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/07/07/get-record-id-and-object-api-name-in-lightning-web-component-2/