El marco moderno del componente Lightning es un marco de interfaz de usuarioparadesarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio.Como es el caso concada nueva versión,laversiónmás recienteSummer’21 está repleto de características ricas incluyendo, el Rayo de componentes que acaba de agregar características!
Actualmente, el Summer’21 lanzamiento está disponible bajo el programa de prelanzamiento . Los días 07 y 08 de mayo , los Sandboxes se actualizarán, como resultado, su organización obtendrá la apariencia del lanzamiento de Summer ’21 . En caso de que no haya leído las 562 páginas completas de Salesforce Summer’21 notas de la versión, consulte el resumen rápido de la versión Summer’21 , Versión Pardot Summer’21: Las 5 funciones principales y las Diez gemas principales de Salesforce Lightning Experience escrito por mí.
Peinéa través de las notas de la versión y destacó la capacidad de añadir al componente Web Rayo características. Créame, ¡fue difícil detenerse en solo cinco! Para comenzar, aquí está mi opinión sobre las características más interesantes del componente Lightning del lanzamiento de Summer’21.
- Aplicar modificadores de acceso en las propiedades de Apex en el marcado de componentes Lightning (actualización, impuesta) : – Esta actualización hace que los componentes Lightning sean coherentes con el uso de las propiedades de Apex en otros contextos. Por ejemplo, una expresión de marcado ya no puede acceder a una propiedad de Apex con un captador de Apex privado. Esta actualización de la versión no afecta el uso de los establecedores de Apex.
Veamos un ejemplo de una clase de Apex con un captador privado para una propiedad de clase de contador.
public class EnforcePrivateGetter { @AuraEnabled contador de enteros públicos { obtención privada ; establecer; } @AuraEnabled public static EnforcePrivateGetter GetRepro2 () { Resultado de EnforcePrivateGetter = new EnforcePrivateGetter (); resultado . contador = 2 ; devolver resultado ; } }
Con la actualización habilitada, este componente de Aura no puede acceder al getter privado con la expresión {! v.apexObject.counter}. La misma restricción se aplica a un componente web Lightning.
<aura: component controller = "EnforcePrivateGetter" access = "global"> <aura: handler name = "init" value = "{! this}" action = "{! c.doInit}" /> <aura: atributo type = "EnforcePrivateGetter" name = "apexObject" /> contador = {! v.apexObject.counter} <br> </br> </ aura: componente>Aquí está el controlador de JavaScript.
({ doInit : function ( cmp , ev ) { var action = cmp . get ( "c.GetRepro2" ); acción . setCallback ( esto , función ( respuesta ) { var estado = respuesta . getState (); if ( estado === "ÉXITO" ) { cmp . set ( 'v.apexObject' , respuesta . getReturnValue ()); } de lo contrario si ( estado === "ERROR" ) { consola . log ( 'Error:' + JSON . stringify ( errores )); } }); $ A. enqueueAction ( acción ); } })
Con la actualización habilitada, la solución es eliminar el modificador de acceso privado en el captador y cambiar la definición de la variable de clase a:
contador de enteros públicos { get ; establecer; }
Para que una propiedad de Apex sea legible fuera de la clase de Apex, la propiedad no puede tener un modificador de acceso privado o protegido.
- Acceda de forma segura a los componentes de Aura (actualización) : – Esta actualización garantiza que un componente externo con acceso = «público» sea accesible solo para otros componentes dentro de su mismo espacio de nombres o para componentes internos de Salesforce. Esta actualización se aplicará en Winter ’22 .
- La solución de este problema puede revelar otros problemas que antes no se habían detectado. Por ejemplo, antes de esta actualización, una devolución de llamada que no estaba envuelta en $ A.getCallback () podía perder su contexto pero aún ejecutarse correctamente. Después de esta actualización, si una devolución de llamada pierde su contexto, la verificación de acceso falla con un error. Recomendamos realizar estos pasos de prueba en un entorno de zona de pruebas para evaluar el impacto de la actualización de la versión y corregir cualquier error de acceso a los componentes antes de que se habilite automáticamente en Winter ’22 .
- En Configuración, en el cuadro Búsqueda rápida, ingrese Publicar actualizaciones y , a continuación, seleccione Publicar actualizaciones .
- Para Enable Aura Component Access Fix, habilite la ejecución de prueba de actualización de lanzamiento.
- Pruebe las páginas con componentes personalizados y observe si hay mensajes de error, como Error en la comprobación de acceso . en el registro de la consola.
- Repare los componentes rotos.
- Cuando se complete la prueba manual, desactive la ejecución de la prueba de actualización de la versión y transfiera los cambios de código a producción.
- En producción, habilite la actualización de la versión o espere a que se habilite automáticamente en Winter ’22 .
- La solución de este problema puede revelar otros problemas que antes no se habían detectado. Por ejemplo, antes de esta actualización, una devolución de llamada que no estaba envuelta en $ A.getCallback () podía perder su contexto pero aún ejecutarse correctamente. Después de esta actualización, si una devolución de llamada pierde su contexto, la verificación de acceso falla con un error. Recomendamos realizar estos pasos de prueba en un entorno de zona de pruebas para evaluar el impacto de la actualización de la versión y corregir cualquier error de acceso a los componentes antes de que se habilite automáticamente en Winter ’22 .
- Habilitar recursos estáticos seguros para componentes Lightning (actualización, pospuesta) : – Esta actualización de lanzamiento se pospuso indefinidamente mientras cambiamos la implementación para reducir el impacto en el cliente. La actualización de lanzamiento no se aplicará en su forma actual. No lo habilites.
- Nuevos componentes web Lightning : estos componentes son nuevos y requieren API versión 52.0 y posterior.
- lightning-quick-action-panel : crea modales de acción rápida con el mismo estilo que el modal de Salesforce Lightning Design System (SLDS). Con este componente, puede personalizar las acciones de la pantalla y seguir teniendo una interfaz de usuario coherente en todas las acciones. Use lightning-quick-action-panel con el objetivo lightning__RecordAction para usar su componente personalizado como una acción rápida en una página de registro.
- lightning-service-cloud-voice-toolkit-api : este componente proporciona acceso a los oyentes de eventos y métodos para la API de Service Cloud Voice Toolkit, lo que permite que su componente escuche los eventos que tienen lugar durante las llamadas telefónicas con los agentes de servicio.
- Cree ganchos de estilo para componentes web Lightning : – Para exponer ganchos de estilo para sus componentes personalizados, use las propiedades personalizadas de CSS. Las propiedades personalizadas de CSS también facilitan la lectura y la actualización del código.
Para definir una propiedad personalizada de CSS en la hoja de estilo de un componente, anteponga la propiedad con – . Para insertar el valor de la propiedad, use var ()
:anfitrión { - color importante: rojo; } .importante { color: var (- color importante); }Las propiedades personalizadas de CSS seheredan . Las propiedades heredadas perforan la sombra DOM. Algunas propiedades de CSS, como el color , también se heredan. Debido a que las propiedades personalizadas de CSS se heredan, un consumidor puede establecer sus valores en un nivel superior en el árbol DOM y diseñar su componente.
Estas propiedades personalizadas de CSS crean ganchos de estilo para dos temas: claro y oscuro. Pase el valor de respaldo como un segundo parámetro opcional a var () .
/ * myComponent.css * / .luz { color de fondo: var (- light-theme-backgroud-color, lightcyan); color: var (- color de texto de tema claro, azul oscuro); } .oscuro { color de fondo: var (- color de fondo del tema oscuro, gris oscuro); color: var (- color-de-texto-tema-oscuro, blanco-fantasma); }Un consumidor puede establecer valores para los ganchos de estilo para cambiar los colores del tema.
/ * consumerComponent.css * / :anfitrión { --light-theme-backgroud-color: honeydew; --light-theme-text-color: verde oscuro; --dark-theme-background-color: granate; --dark-theme-text-color: marfil; }
¡Mejoras adicionales dignas de mención!
- Implemente una nueva etiqueta personalizada y un componente juntos : – Implemente una nueva etiqueta personalizada y una referencia a esa etiqueta personalizada en un componente web Lightning existente en una sola implementación. Anteriormente, implementó la nueva etiqueta personalizada y luego le agregó una referencia en un componente web Lightning existente en una segunda implementación.
- Supervise los cambios de componentes Lightning en la pista de auditoría de configuración : – Utilice la pista de auditoría para realizar un seguimiento cuando sus usuarios crean, cambian o eliminan un componente Lightning personalizado. El historial de auditoría es especialmente útil cuando varios desarrolladores trabajan en componentes.
…
Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2021/05/04/top-5-lightning-component-gems-of-salesforce-summer21-release/
