Skip to content

¡Las 5 principales joyas de componentes Lightning del lanzamiento de Salesforce Spring'21!

El marco moderno del componente Lightning 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 nueva versión, la versión más reciente Spring’21 está repleto de características ricas incluyendo, el Rayo de componentes que acaba de agregar características!

Actualmente, el Spring’21   lanzamiento está bajo el programa de prelanzamiento . Sobre el   y 08 y 09   de enero , los Sandboxes se actualizarán, como resultado, su organización obtendrá la apariencia del lanzamiento de Spring ’21 . En caso de que no haya leído las 491 páginas completas de Salesforce Spring’21   notas de la versión, consulte el resumen rápido de la versión Spring’21 escrito por mí.

Peinéa través de las notas de la versión y puso de relieve las capacidades añadidas a las características del componente de relámpago. 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 de la versión Spring’21.

  1. Cree una acción de componente web Lightning (piloto) : – Cree un componente web Lightning (LWC) y utilícelo como una acción rápida. Las acciones del componente web Lightning funcionan en paralelo en sus páginas junto con el componente Lightning y las acciones de Visualforce. Las acciones de LWC ofrecen ventajas como la capacidad de personalizar fácilmente encabezados y pies de página y crear acciones que no tienen representación en la interfaz de usuario.
  2. Agregue contenido de Salesforce CMS a componentes web Lightning personalizados : – Ahora puede configurar el contenido CMS para un componente web Lightning personalizado especificando type = ”ContentReference” para el tipo de propiedad del componente en el archivo .js-meta.xml. También puede configurar su componente para filtrar por un tipo de contenido específico. Por ejemplo, para mostrar solo imágenes publicadas desde su espacio de trabajo de CMS, especifique filter = ”cms_image”, de la siguiente manera:
     <property type = "ContentReference" name = "contentId" label = "Content ID" filter = "cms_image" />

    En Experience Builder, agregue el componente a la página y haga clic en Agregar contenido en las propiedades del componente. Agregue imágenes, documentos, artículos de noticias y más directamente a su sitio desde su espacio de trabajo de CMS.

  3. Habilitar recursos estáticos seguros para componentes Lightning (actualización, pospuesta) : – Esta actualización se pospone para Summer ’21. Se programó para la activación automática (aplicación) en Spring ’21. Para mejorar la seguridad, esta actualización sirve a todos los recursos estáticos del dominio de Visualforce en lugar del dominio Lightning. Este cambio evita que un script incluido en un recurso estático acceda al documento en el dominio Lightning debido a la política de seguridad del mismo origen.
    1. Para habilitar esta actualización, desde Configuración, en el cuadro Búsqueda rápida, ingreseRelease Updates , luego seleccione Release Updates . Para Habilitar recursos estáticos seguros para componentes Lightning, siga los pasos de prueba y activación.
    2. Este cambio se aplica a los componentes web Aura y Lightning en los sitios Lightning Experience, Salesforce Classic, Experience Builder y todas las versiones de la aplicación Salesforce.
  4. Cree editores de propiedades personalizadas de Flow Builder que accedan a salidas automáticas: – Con los editores de propiedades personalizadas ahora puede acceder a salidas automáticas, lo que facilita el uso de valores de variables ascendentes como opciones para campos de entrada más adelante en un flujo. Anteriormente, los editores de propiedades personalizadas solo podían acceder a los valores que los administradores asignaban manualmente a las variables de flujo. En su editor de propiedades personalizadas, exponga una propiedad pública llamada automaticOutputVariables . Cuando se inicializa el editor de propiedades personalizadas o cuando el administrador cambia un valor en el editor de propiedades personalizadas, Flow Builder pasa los valores almacenados automaticOutputVariables a automaticOutputVariables. Escriba lógica personalizada para que cuando un administrador establezca un valor para un campo, como un cuadro combinado o una lista de selección, los valores almacenados automáticamente aparezcan como opciones de entrada.
    // myCustomPropertyEditor.js import { LightningElement, api } from 'lwc'; export default class MyCustomPropertyEditor extends LightningElement { @api automaticOutputVariables; //Insert custom logic. }

    Por ejemplo, este editor de propiedades personalizadas obtiene una lista de campos de combinaciónautomaticOutputVariables y los muestra como opciones de entrada para el campo Teléfono. En este caso, los campos de combinación son componentes de teléfono estándar para Hogar y Móvil.


    La estructura de datos que se pasa al editor de propiedades personalizadas vai automaticOutputVariables describe los valores almacenados automáticamente. En nuestro ejemplo, el flujo tiene dos componentes de teléfono estándar con los nombres de API Home y Mobile , por lo que Flow Builder pasa estos datos al editor de propiedades personalizadas.

     "Home":[ { "apiName":"label", "dataType":"string", "description":"The label that appears above the phone field.", "hasDefaultValue":true, "isRequired":true, "label":"Label", "isInput":true, "isOutput":true, "maxOccurs":1, "defaultValue":"Home" }, { "apiName":"pattern", "dataType":"string", "description":"To require the value to follow a specific pattern, use the Inputs tab to set this attribute's value to a regular expression.", "hasDefaultValue":false, "isRequired":false, "label":"Pattern", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"placeholder", "dataType":"string", "description":"Text that appears in the field when it's empty. Use placeholder text to give users a hint about what to enter in the field.", "hasDefaultValue":false, "isRequired":false, "label":"Placeholder text", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"readonly", "dataType":"boolean", "description":"Prevents the user from modifying the value, but not from copying it.", "hasDefaultValue":false, "isRequired":false, "label":"Read Only", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"required", "dataType":"boolean", "description":"Requires the user to enter a value.", "hasDefaultValue":false, "isRequired":false, "label":"Required", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"value", "dataType":"string", "description":"The value of the phone field. To pre-populate the field, use the Inputs tab to set this attribute's value. To use the value elsewhere in your flow, use the Outputs tab to pass this attribute's value to a variable.", "hasDefaultValue":false, "isRequired":false, "label":"Value", "isInput":true, "isOutput":true, "maxOccurs":1 } ] "Mobile":[ { "apiName":"label", "dataType":"string", "description":"The label that appears above the phone field.", "hasDefaultValue":true, "isRequired":true, "label":"Label", "isInput":true, "isOutput":true, "maxOccurs":1, "defaultValue":"Mobile" }, { "apiName":"pattern", "dataType":"string", "description":"To require the value to follow a specific pattern, use the Inputs tab to set this attribute's value to a regular expression.", "hasDefaultValue":false, "isRequired":false, "label":"Pattern", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"placeholder", "dataType":"string", "description":"Text that appears in the field when it's empty. Use placeholder text to give users a hint about what to enter in the field.", "hasDefaultValue":false, "isRequired":false, "label":"Placeholder text", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"readonly", "dataType":"boolean", "description":"Prevents the user from modifying the value, but not from copying it.", "hasDefaultValue":false, "isRequired":false, "label":"Read Only", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"required", "dataType":"boolean", "description":"Requires the user to enter a value.", "hasDefaultValue":false, "isRequired":false, "label":"Required", "isInput":true, "isOutput":true, "maxOccurs":1 }, { "apiName":"value", "dataType":"string", "description":"The value of the phone field. To pre-populate the field, use the Inputs tab to set this attribute's value. To use the value elsewhere in your flow, use the Outputs tab to pass this attribute's value to a variable.", "hasDefaultValue":false, "isRequired":false, "label":"Value", "isInput":true, "isOutput":true, "maxOccurs":1 } ] }
  5. Personalice los marcadores y controle el comportamiento del mapa en el componente base del mapa de relámpagos : – Ahora puede hacer que su mapa se vea y se comporte de la manera que desee. Personalice las ubicaciones del mapa para usar su imagen SVG en lugar de los marcadores estándar de Google Maps, o defina un círculo, rectángulo o polígono sombreado alrededor de una ubicación. Modifique o deshabilite el comportamiento de zoom y arrastre, o deshabilite los controles del mapa por completo para crear un mapa estático.
    1. Por ejemplo, supongamos que desea crear un mapa de localización simple para mostrar a los clientes dónde encontrar su empresa. Puede quitar el zoom y Mapa | Botones de satélite, desactive el arrastre y agregue su propio SVG para usar una estrella para el marcador.
    2. En su componente, use el atributo de nuevas opciones para especificar propiedades que habiliten o deshabiliten los controles de la interfaz de usuario. Este ejemplo usa un objeto mapOptions en el JavaScript del componente para establecer los valores de propiedad.
    3. En mapOptions , establezca la propiedad disableDefaultUI , que deshabilita el zoom y elimina el mapa | Botones de satélite. Para deshabilitar la panorámica del mapa, establezca la propiedad arrastrable.
       <plantilla> <mapa-relámpago map-markers = {mapMarkers} opciones = {mapOptions} > </mapa-luz>
      </template>
    4. En mapMarkers , agregue la propiedad del icono de mapa a la definición del marcador y especifique la propiedad de ruta SVG para una estrella. Añadir fillColor y fillOpacity y propiedades para definir el color y la opacidad del relleno de imagen. Agregue la propiedad strokeWeight para establecer el grosor de línea del trazo dibujado alrededor de la imagen SVG. Opcionalmente, para determinar el tamaño de la imagen, establezca la propiedad de escala.
       importar { LightningElement } de 'lwc' ; exportar clase predeterminada LightningExampleMapCustomMarker extiende LightningElement { mapOptions = { 'disableDefaultUI' : true // cuando es true deshabilita los botones Mapa | Satélite, + | - zoom 'draggable' : false , // cuando es false evita la panorámica al arrastrar en el mapa }; mapMarkers = [ { ubicación : { Ciudad : 'San Francisco' , País : 'Estados Unidos' , Código Postal : '94105' , Estado : 'CA' , Calle : '425 Mission St' , }, mapIcon : { ruta : 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z' , fillColor : '# CF3476' , fillOpacity:. 5 , Peso del trazo : 1 , escala:. 10 , } } ];
      }

¡Mejoras adicionales dignas de mención!

  1. Aproveche la plantilla Build Your Own (LWR) para Experience Cloud : – La nueva plantilla Build Your Own (LWR) para Experience Cloud le permite desarrollar sitios que se cargan rápidamente y escalan bien para entregar su contenido CMS. Esta plantilla ligera, basada en Lightning Web Components (LWC), un modelo de programación que ofrece un rendimiento excepcional, admite soluciones totalmente personalizadas.
  2. Nuevos componentes web Lightning : – Ahora puede crear una interfaz de usuario fácilmente con estos componentes nuevos y modificados. Estos componentes básicos están generalmente disponibles.
    • rayo-formateado-fecha-hora
    • número con formato de rayo
    • relámpago-relativa-fecha-hora

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

Últimas novedades 
de EGA Futura
1954
Desde hace más de 25 años potenciamos a las Empresas de Iberoamérica

🎬 Video de EGA Futura » Qué es un Almacén?

🎬 Video de EGA Futura » Qué es el Stock de almacén?

🎬 Video de EGA Futura » Los 7 pecados capitales que llevarán al infierno a tus argumentos de MKT y ventas [Cómo evitarlo…

🎬 Video de EGA Futura » Por qué Jefes y Gerentes frecuentemente Fallan al motivar Empleados [y en particular a Vendedores]

🎬 Video de EGA Futura » Estrategia de Precios . Cómo funciona este misterioso proceso y cómo Maximizar las Ganancias de …

🎬 Video de EGA Futura » 👉Atrévete a Liderar (levántate fuerte y cambia el Destino de tu Trabajo)

🎬 Video de EGA Futura » 😑 ¿Odias a tu propia Empresa? Guía para dejar de ser un Perdedor (Y encontrar una Salida)

🎬 Video de EGA Futura » 🤑 7 Estrategias Clave para hacer Crecer tu Empresa [Michael Gerber]

🎬 Video de EGA Futura » Qué hacer si Mercado Libre SUSPENDE mi Cuenta? 🤬

🎬 Video de EGA Futura » Como USAR el Manual del Usuario de EGA Futura? [Sistema de Gestión Windows] 😍

🎬 Video de EGA Futura » Recursos Humanos Aprovecha las Fortalezas y construye el Equipo perfecto

🎬 Video de EGA Futura » 8 Reglas de Oro para crear una Empresa Nueva

🎬 Video de Juan Manuel Garrido » Que Clientes DEBO priorizar en mi Empresa?

🎬 Video de EGA Futura » Las relaciones son todo: Claves para la Influencia Estratégica [y el Éxito de Ventas]

🎬 Video de EGA Futura » La Quinta Disciplina de Peter Senge [Método de Transformación continua]

🎬 Video de Juan Manuel Garrido » Adicto al Trabajo y sin Tiempo para tu Familia?

🎬 Video de EGA Futura » Costo dentro de una empresa

🎬 Video de EGA Futura » Aspectos Legales de la Empresa

🎬 Video de EGA Futura » Areas funcionales de una empresa

🎬 Video de EGA Futura » Por qué Dropbox es un Éxito

🎬 Video de EGA Futura » El “Método Turbina” para Potenciar tu Empresa [Receta ganadora]

🎬 Video de Juan Manuel Garrido » Tu energía debe estar puesta en las cosas que puedas cambiar

🎬 Video de Juan Manuel Garrido » Software para #ordenar y #administrar tu #negocio

🎬 Video de EGA Futura » Los 10 Mandamientos del Éxito [Para construir una empresa o carrera exitosa]

🎬 Video de Juan Manuel Garrido » Tu empresa necesita tener métricas claras

¡Las 5 principales joyas de componentes Lightning del lanzamiento de Salesforce Spring'21!
¡Las 5 principales joyas de componentes Lightning del lanzamiento de Salesforce Spring'21!