Gran idea o pregunta duradera:
- ¿Cómo mostrar la información del usuario que ha iniciado sesión en el componente web Lightning?
Objetivos:
Después de leer este blog, podrá:
- Enlace de datos en una plantilla
- Mostrar información de usuario que ha iniciado sesión en el componente web lightning (lwc)
- Obtener detalles de uso del componente web lightning (lwc) JavaScript
- Entender cuándo usar el decorador de alambre
- configurar un componente web Lightning para Lightning App Builder
- y mucho más
Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Comenzó a aprender sobre el componente web lightning y se preguntaba si alguien podría ayudarla a entender cómo mostrar la siguiente información del usuario conectado en un componente web lightning:
- Identificación de usuario
- Nombre completo
- Role
- Perfil
- Nombre del gerente
Similar a la siguiente captura de pantalla:
¿Qué es el enlace de datos en el componente web Lightning?
El enlace de datos conecta una interfaz de usuario de la aplicación a un objeto de datos (código). Permite la propagación de cambios al reflejar las modificaciones de la interfaz de usuario en el código y viceversa. Puede ser unidireccional o
Técnicamente, un enlace de datos conecta datos de propiedades en la clase de JavaScript del componente a un elemento en la plantilla. Los enlaces de datos se crean agregando llaves {} a un componente en una plantilla.
Por ejemplo, en el siguiente código, la propiedad textSource en la plantilla está vinculada a la propiedad textSource en la clase de JavaScript.
<!--enlace de datos.html--> <plantilla> {fuente del texto} </plantilla>
//enlace de datos.js importar { LightningElement } desde 'lwc'; exportar clase predeterminada BindingExample extiende LightningElement { textSource = 'Texto establecido a través del enlace de datos'; }
¿Qué es el decorador de cables en el componente web Lightning?
El decorador de cables en el componente web Lightning utiliza un servicio de cable reactivo para leer los datos de Salesforce. Un @wire toma el nombre de un adaptador de cable y un objeto opcional específico del adaptador de cable. Puede usar un $ para marcar la propiedad de un objeto de configuración como reactiva.
La propiedad @wire es útil para consumir los datos o un error. En el componente web Lightning de Salesforce, se puede usar @wire:
- a una propiedad
- Como una función
@wire(getRecord, { recordId: '$recordId', campos: CAMPOS }) contacto;
¿Configurar un componente web Lightning para el Generador de aplicaciones Lightning?
Antes de que pueda usar su componente web Lightning personalizado en una página Lightning en Lightning App Builder, debe seguir algunos pasos.
El archivo <component>.js-meta.xml define los valores de metadatos para el componente, incluida la configuración de diseño para los componentes destinados a su uso en Lightning App Builder. Actualice el archivo de configuración a:
- Haga que su componente se pueda utilizar en Lightning App Builder
- Defina en qué tipos de páginas Lightning se puede usar su componente web Lightning
- Configure las propiedades de su componente.
- Establezca los objetos admitidos de su componente.
Enfoque de Campeón de Automatización (I-do):
Mientras trabaja en el componente web Lightning, es posible que deba mostrar la interfaz de usuario que ha iniciado sesión. Salesforce proporciona una manera de obtener la ID del usuario actual directamente sin llamar a una clase de Apex.
Hay una forma en el componente web lightning en la que puede obtener los detalles del usuario actual sin llamar a un método de vértice del lado del servidor. Veamos en la acción cómo lograrlo.
logInUserDetails.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 todos los tipos de páginas Lightning, pero restringe la compatibilidad en la página de inicio solo para escritorios.
logInUserDetails.html
Para hacer referencia a un Id. de usuario, nombre, función, perfil y administrador en una plantilla, use la sintaxis {propiedad } , que es la misma sintaxis que usamos para hacer referencia a cualquier propiedad de JavaScript.
logInUserDetails.js
El siguiente código javascript importa el Id. de usuario actual, el nombre , la función , el perfil y los detalles del administrador y lo asigna a las propiedades respectivas Id. de usuario, Nombre de usuario, Nombre de rol de usuario, Nombre de perfil de usuario, Nombre de administrador de usuario para proporcionar acceso a la plantilla HTML.
Antes de eso, necesitamos importar los siguientes módulos de alcance
importar { getRecord } desde 'lightning/uiRecordApi'; //este módulo de alcance obtiene los detalles del registro
importar Id desde '@salesforce/user/Id'; //este módulo de ámbito importa el ID de usuario actual
importar nombre de '@salesforce/schema/User.Name'; //este módulo de ámbito importa el nombre completo del usuario actual
importar RoleName desde '@salesforce/schema/User.UserRole.Name'; //este módulo de ámbito importa el nombre de rol de usuario actual
importar ProfileName desde '@salesforce/schema/User.Profile.Name'; //este módulo de ámbito importa el nombre de perfil de usuario actual
importar ManagerName desde '@salesforce/schema/User.Manager.Name'; //este módulo de alcance importa el nombre del administrador de usuarios actual
Puede copiar el código de GitHub o Instalar usando esta URL .
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/06/13/get-information-about-the-logged-in-user-in-lightning-web-component-2/
