Gran idea o pregunta duradera:
- ¿Cómo mostrar diferentes mensajes según el perfil del usuario que inició sesión?
Objetivos:
Después de leer este blog, podrá:
- Renderizar elementos DOM condicionalmente
- Aplicar representación condicional en el componente web lightning (lwc)
- y mucho más
Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Comenzó a aprender el componente web lightning y se preguntaba si alguien podría ayudarla a comprender cómo mostrar diferentes mensajes en función de un perfil de usuario que haya iniciado sesión.
Si el perfil de usuario que inició sesión es Administrador del sistema, muestre un mensaje:
¡Bienvenido, usted es un administrador del sistema!
De lo contrario, muestra un mensaje:
¡Bienvenido, usted es un usuario comercial!
¿Qué es el renderizado condicional?
La representación condicional en el componente web lightning (lwc) es una forma de mostrar componentes o elementos en función de una condición específica. Por ejemplo, puede mostrar diferentes mensajes de saludo según la hora del día.
El renderizado condicional le permite renderizar diferentes componentes o elementos de lwc si se cumple una condición. En este tutorial, aprenderá sobre las diferentes formas en que puede usar la representación condicional en el componente web Lightning.
Lea este artículo para obtener información sobre cómo mostrar la información del usuario que ha iniciado sesión en el componente web Lightning.
Enfoque de Campeón de Automatización (I-do):
Usamos la representación condicional para representar un elemento DOM en una plantilla solo cuando se cumplen condiciones específicas. Para lograr esto en Salesforce Lightning Web Components, agregue if:true | directiva falsa a una etiqueta <template> anidada que encierra el contenido condicional.
renderizado condicional.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.
representación condicional .html
Cuando un usuario carga la página, la clase ConditionalRendering establece el valor de isSystemAdministrator propiedad. Si la propiedad isSystemAdministrator es verdadera , la directiva if:true representa la plantilla anidada, que muestra Bienvenido, usted es un administrador del sistema. La plantilla contiene dos etiquetas div que tienen mensajes diferentes.
representación condicional .js
Tenga en cuenta que JavaScript no manipula el DOM, simplemente cambia el valor de la propiedad isSystemAdministrator .
Prueba de concepto
Ahora bien, si un Usuario con perfil Administrador del Sistema carga la página de inicio, el componente web lightning mostrará el siguiente mensaje.
Ahora, si un Usuario con un perfil que no sea Administrador del Sistema carga la página de inicio, el componente web lightning mostrará el siguiente mensaje.
Tutorial de vídeo:
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/14/how-to-implement-conditional-rendering-in-lightning-web-component/
