¡Las 5 mejores gemas del componente Lightning del lanzamiento de Salesforce Spring'22!

Última actualización el 19 de enero de 2022 por Rakesh Gupta

El marco moderno de Lightning Web Component es un marco de interfaz de usuario para desarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio. Como es el caso con cada lanzamiento , el último lanzamiento de Spring'22 está repleto de funciones ricas que incluyen , ¡ las funciones del componente Lightning recientemente agregadas!

Actualmente, el lanzamiento de Spring'22 está disponible en el programa de versión preliminar . En caso de que no hayas leído las 540 páginas completas de Salesforce Spring'22   notas de la versión, echa un vistazo a la Spring'22 liberar resumen rápido , Pardot Winter'22 de lanzamiento: 10 características principales y los diez mejores gemas de Salesforce Rayo Experiencia escritos por mí.

Revisé las notas de la versión y destaqué las capacidades agregadas a las características del Componente web Lightning. Créanme, ¡fue difícil detenerse en solo cinco! Para comenzar, esta es mi opinión sobre las características más geniales del componente Lightning del lanzamiento de Spring'22.

1. Asegure sus componentes mejor, más fuerte y más rápido con Lightning Web Security (disponible de forma general) : – Lightning Web Security (LWS) es una nueva arquitectura de seguridad del lado del cliente para sus componentes web Lightning personalizados. La arquitectura se define por menos restricciones y más funcionalidad, al tiempo que proporciona un sandboxing sólido y una postura de seguridad para hacer cumplir el aislamiento del espacio de nombres. El resultado es una seguridad sólida, flexible y utilizable para sus componentes web Lightning. Esta función, ahora disponible de forma general, incluye algunos cambios desde la versión beta.
   1. Desde Configuración, en el cuadro Búsqueda rápida, ingrese Sesión y luego seleccione Configuración de sesión . En la página Configuración de sesión, seleccione Usar Lightning Web Security para componentes web Lightning .
2. Comienza la habilitación de Lightning Web Security : – Salesforce planea habilitar la configuración de la organización Lightning Web Security (LWS) de forma continua en organizaciones de producción que solo tienen componentes Lightning web personalizados. Si su organización también tiene componentes Aura personalizados o no tiene componentes personalizados, Lightning Web Security no estará habilitado en Spring '22 .
3. Asegúrese de que su código funcione en Lightning Web Security con nuevas herramientas : – Pruebe nuestras nuevas herramientas para desarrolladores para asegurarse de que el código JavaScript de su componente Lightning web funcione con Lightning Web Security (LWS).
   1. Consola de seguridad web Lightning : evalúe su código en Consola de seguridad web Lightning mientras se ejecuta con LWS habilitado y deshabilitado. Esta herramienta puede ayudarlo a determinar si un problema con su código JavaScript está relacionado con su interacción con LWS.
   2. LWS Distortion Viewer : vea información sobre las modificaciones de seguridad, conocidas como distorsiones, en LWS Distortion Viewer. LWS aplica distorsiones al código que se ejecuta en un espacio aislado para ayudar a prevenir comportamientos que no son seguros. Esta herramienta puede ayudarlo a aprender cómo modificar su código JavaScript para evitar distorsiones que afecten sus componentes.
4. Personalice su tabla de datos con nuevas funciones : – Mejore la interacción del usuario con sus tablas de datos. Cambie programáticamente un campo enfocado al modo de edición desde un elemento externo como un botón. Muestre un icono de candado en los campos que no se pueden editar. Utilice un icono como encabezado de columna sin una etiqueta de columna. Asigne a una columna una ID única para habilitar el uso de un nombre de campo en varias columnas.
   1. Los siguientes ejemplos se aplican a lightning-datatable , el nuevo método y las propiedades también funcionan en lightning:datatable usando la sintaxis Aura.
   2. Programe un elemento externo como un botón para dirigir al usuario a la primera celda editable en su componente de tabla de datos. Use el openInlineEdit() para abrir el panel de edición en línea en la celda actualmente activa o en la próxima celda editable en la tabla de datos.

       /* withInlineEdit.js */ import { LightningElement } from 'lwc'; export default class DatatableWithInlineEdit extends LightningElement { data = []; columns = columns; rowOffset = 0; handleClick() { const dt = this.template.querySelector('lightning-datatable'); dt.openInlineEdit(); } }

      Para distinguir los campos editables de los campos de solo lectura, puede marcar los campos de solo lectura con un icono de candado. Para especificar que el campo de una columna es de solo lectura y mostrar un icono de candado, establezca editable en false y displayReadOnlyIcon en true en la definición de columna asociada.

       const columns = [ { label: 'Label', fieldName: 'name', editable: false, displayReadOnlyIcon: true }, { label: 'Website', fieldName: 'website', type: 'url', editable: false, displayReadOnlyIcon: true, }

      Para mostrar un icono en lugar de una etiqueta en el encabezado de una columna, oculte la etiqueta de la columna. Especifique un iconName y establezca hideLabel en true . La label sigue siendo necesaria y se utiliza para el título del icono y alternativeText atributos de texto alternativo.

       const columns = [ { label: 'Ordering', fieldName: 'id', type: 'orderingButtons', fixedWidth: 90, iconName: 'utility:trending', hideLabel: true, }, // other column data ];

      En algunas situaciones, varias columnas hacen referencia al mismo fieldName pero tienen diferentes fieldApiNames y diferentes formas de trabajar con la información del campo. Para dar a una columna una identificación única cuando se usa el mismo nombre de campo para dos columnas, use el atributo columnKey lugar de fieldName en una de las definiciones de columna.

       get columns() { return [ // Column using 'fieldName' as identifier { label: 'Lead', fieldName: 'leadId', ... }, // Column using 'columnKey' as identifier { label: 'Company', columnKey: 'leadCompany', fieldName: 'leadId', ... } ] }

5. Habilitar integraciones de terceros con Light DOM (Beta) : – Los componentes web Lightning se representan en shadow DOM de forma predeterminada, lo que brinda una encapsulación sólida pero presenta desafíos para el estilo global y muchas integraciones de terceros. Con DOM ligero, el marcado de su componente se adjunta al elemento anfitrión en lugar de a su árbol de sombra. Luego puede acceder a él como a cualquier otro contenido en el host de documentos.
   1. Light DOM permite que herramientas de terceros atraviesen el DOM, habilitando las API de consulta de navegador estándar como querySelector y querySelectorAll , sin atravesar la raíz oculta. También facilita el estilo global para que pueda aplicar una marca personalizada a sus componentes y componentes secundarios fácilmente. Para permitir que un componente se represente en DOM ligero, establezca renderMode el campo estático en su clase de componente.

       import { LightningElement } from 'lwc'; export default class LightDomApp extends LightningElement { static renderMode = 'light'; // the default is 'shadow' }

      Utilice la directiva de plantilla lwc:render-mode <template> de su componente.

       <template lwc:render-mode='light'> <my-header> <p>Hello World</p> </my-header> </template>

      Cuando habilita Light DOM en un componente, ya no representa sus elementos en el árbol #shadow-root

       <my-app> <my-header> <p>Hello World</p> </my-header> </my-app>

      Un componente DOM ligero puede contener un componente DOM de sombra. De manera similar, un componente DOM de sombra puede contener un componente DOM ligero. Sin embargo, los componentes Lightning base siempre se renderizan en DOM oculto. No se admite la restricción de DOM ligero a espacios de nombres específicos.

      LWC no analiza los estilos automáticamente por usted. Para implementar la encapsulación de estilo en un componente DOM ligero, use un *.scoped.css , que aplica CSS solo a los elementos del componente.

¡Vale la pena mencionar mejoras adicionales!

Evaluación formativa:

¡Quiero saber de ti!

¿Cuáles son tus gemas favoritas de Spring'22 Lightning Component? ¿Te importa compartir? Puede descargar las notas de la versión en formato HTML !, para archivos PDF.

Házmelo saber tuiteándome en @automationchamp o búscame en LinkedIn.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/01/19/top-5-lightning-component-gems-of-salesforce-spring22-release/