Aprenda a hacer que sus componentes web Lightning sean visualmente interactivos y fáciles de configurar en Experience Builder.
Los componentes web Lightning son fáciles de configurar en Experience Builder
The post Mejore la flexibilidad con editores y tipos de propiedades personalizadas en Experience Builder appeared first on Blog de desarrolladores de Salesforce.
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.
…
Light DOM es una función de Lightning Web Components que ha estado disponible de forma general en Lightning Experience, Experience Cloud, LWC OSS (código abierto) y todas las versiones de la aplicación móvil Salesforce desde Summer '23 .
Los componentes web Lightning, de forma predeterminada, se representan en DOM oculto , lo que proporciona una encapsulación y seguridad sólidas para sus componentes. Sin embargo, al mismo tiempo, evita el estilo global y bloquea las integraciones de terceros que introspeccionan el interior de sus componentes. Light DOM es una característica que se puede habilitar de forma granular en componentes seleccionados, de modo que Shadow DOM no los afecte.
Usemos un componente web Lightning muy simple como ejemplo.
<dx-code-block title language="html" code-block="
Hello Codey!
«>
En el ejemplo anterior, el DOM oculto predeterminado del componente evita que una regla CSS definida en el componente principal o el host alcance el elemento <p> . Además, no permite que el código JavaScript externo al componente consulte el elemento <p> mediante las API de consulta del navegador.
Para activar el DOM ligero para un componente, debe especificar el renderMode ligero en su archivo JavaScript y la directiva de plantilla lwc:render-mode en la etiqueta <template> del componente. Ambos cambios son necesarios debido a la forma en que se compilan los componentes web Lightning.
<dx-code-block title language="html" code-block="
Hello Codey!
«>
Cuando activa el DOM claro en un componente, el marcado del componente se adjunta al elemento anfitrión en lugar de a su árbol de sombra. Luego puede acceder al marcado desde otros componentes de la página como cualquier otro contenido en el host del documento que no esté protegido por Shadow DOM.
Los componentes DOM ligeros permiten el uso de API de consulta de navegador estándar como querySelector y querySelectorAll . En este caso, en lugar de usar this.template.querySelector , debes usar this.querySelector .
O más simplemente, a menudo puedes usar la directiva lwc:ref en ambos casos (componentes DOM sombreados y claros) y omitir el querySelector .
<dx-code-block title language="html" code-block="
Hello Codey!
«>
Light DOM es una opción para cada componente individual. Sus efectos no se aplicarán a otros componentes a menos que también opten por participar. Tenga en cuenta que los componentes base siempre se representan en DOM oculto.
Recomendamos habilitar DOM ligero si tiene bibliotecas que necesitan acceder a los componentes internos mediante API de consulta de navegador estándar, aplicar estilos globales o necesita más flexibilidad para implementar las mejores prácticas de accesibilidad, siempre y cuando el componente no exponga datos confidenciales. Cubriremos estos casos de uso con más profundidad en la siguiente sección.
No recomendamos habilitar DOM ligero para un componente si ese componente aparece o funciona con datos confidenciales. El uso de DOM ligero elimina la encapsulación de DOM en sombra y expone los componentes al raspado de DOM. Por lo tanto, tenga en cuenta esta importante consideración.
Light DOM permite varios casos de uso que anteriormente no eran compatibles.
Light DOM permite el uso de bibliotecas que necesitan acceso a los componentes internos. Un buen ejemplo de esto son las bibliotecas de análisis utilizadas en los sitios de Experience Cloud, como Google Analytics, ya que necesitan acceso a los componentes internos para obtener mejores resultados.
Podemos probar este caso de uso, incluido el componente helloCodey anterior, en un componente principal mascotChanger de la siguiente manera.
<dx-code-block title language="html" code-block="
«>
Tenga en cuenta que, aunque el párrafo consultado pertenece al componente helloCodey , podemos acceder a él con this.template.querySelector , porque pertenece al DOM ligero secundario. Sin embargo, si el componente helloCodey no tuviera habilitado el DOM ligero, querySelector habría devuelto null .
También puede acceder a los componentes internos del DOM ligero desde un script que se carga como un recurso estático en la página, siempre y cuando todos los componentes ancestros estén habilitados para el DOM ligero. Por ejemplo, en un sitio LWR Experience Cloud, que es DOM completamente ligero, puede agregar un recurso estático de JavaScript que encuentre los componentes internos helloCodey de la siguiente manera.
Otro ejemplo en el que esto puede resultar útil es implementar componentes complejos y profundamente anidados. En ese caso, es posible que prefiera tener un único componente DOM de sombra en el nivel superior y componentes DOM claros dentro para evitar gastos generales. Por ejemplo, un componente de tabla de datos personalizado puede tener solo un gran componente DOM de sombra alrededor de todo, en lugar de una sombra para cada fila y celda de la tabla.
Esta implementación facilita la consulta de sus propios elementos desde el componente de nivel superior de su jerarquía y también la implementación de la accesibilidad. Además, hay una ligera mejora en el rendimiento en algunos casos de uso al usar DOM claro sobre DOM sombreado, lo que se debe principalmente a la sobrecarga de simplemente crear nodos de sombra adicionales.
Light DOM también facilita el estilo global, ya que permite que los estilos CSS caigan en cascada en el marcado del componente. Por ejemplo, un componente DOM ligero puede establecer un estilo que se carga y luego se aplica una vez para todos los componentes DOM ligeros de la página. La inyección de estilos globales a través de DOM ligero solo se admite en sitios de Experience Cloud, editor de contenido CMS o Sales Enablement.
Por ejemplo, definamos un componente colorChanger de la siguiente manera.
<dx-code-block title language="html" code-block="
«>
El color de fondo azul se aplicará a los párrafos de todas las instancias del componente helloCodey en la página, ya que está habilitado para DOM claro.
En la mayoría de los casos, no querrás que tu estilo se filtre a otros componentes. Eso todavía es posible para componentes DOM ligeros. Solo necesita colocar esas reglas de estilo en un archivo *.scoped.css , para que tengan como alcance el componente DOM ligero. El CSS con alcance está escrito exactamente igual que el CSS normal, pero solo se aplicará a ese componente sin filtrarse.
Tenga en cuenta que si las reglas de estilo se cargan globalmente como recursos estáticos en una página de Lightning Experience o un sitio de Experience Cloud, se les quitará el alcance y se aplicarán tanto a los componentes DOM claros como también a los componentes DOM de sombra, ya que la sombra sintética no evitará que se filtren. Esta es una limitación que se solucionará una vez que la sombra nativa sea totalmente compatible (actualmente en Developer Preview ). Cuando la sombra nativa está habilitada, solo los componentes habilitados para DOM claro heredarán los estilos globales.
Light DOM permite que un componente haga referencia a la i d un elemento que vive en otro componente separado habilitado para Light DOM. Esto le permite vincular dos elementos utilizando los atributos i d y aria , lo que le otorga flexibilidad adicional para implementar las mejores prácticas de accesibilidad en sus proyectos. Mejoremos nuestro componente mascotChanger para demostrar esto.
<dx-code-block title language="html" code-block="
«>
<dx-code-block title language="html" code-block="
«>
<dx-code-block title language="html" code-block="
«>
Tenga en cuenta que Salesforce está trabajando actualmente con el W3C para agregar nuevos estándares, de modo que el DOM oculto nativo pueda participar en estos patrones de accesibilidad. Esto significa que, en el futuro, este caso de uso ligero de DOM no será necesario. Como parte de nuestros esfuerzos de accesibilidad, también patrocinamos a Igalia para implementar parcialmente ARIA Element Reflection , que ahora es totalmente compatible con Safari y parcialmente con Chrome. Si quieres saber más sobre este tema, echa un vistazo a nuestra propuesta cross-root-aria , el repositorio para el grupo de trabajo Modelo de objetos de accesibilidad .
La siguiente tabla resume los casos de uso y dónde se admiten.
| Experiencia en la nube | Experiencia relámpago | Aplicaciones móviles de Salesforce | LWC OSS/LWR en Node.js* | |
| Soporte de bibliotecas que necesitan acceso a las partes internas de los componentes. | Sí | Sí | Sí | Sí |
| Implementación más sencilla de componentes profundamente anidados | Sí | Sí | Sí | Sí |
| Estilo global | Sí | No | No | Sí |
| Implementación más flexible de las mejores prácticas de accesibilidad | Sí | Sí | Sí | Sí |
*Si se utiliza DOM de sombra nativo en lugar de sombra sintética . La sombra nativa es la opción predeterminada para LWC OSS y LWR en Node.js.
Cuando se trabaja con DOM ligero, hay algunas consideraciones adicionales a tener en cuenta, entre ellas:
En esta publicación de blog, revisamos qué es el DOM ligero, los casos de uso que permite y las consideraciones a tener en cuenta para decidir qué componentes habilitarán la función. Todos los ejemplos que se muestran en este blog se encuentran en un repositorio de GitHub que puedes probar tú mismo.
Para obtener más información sobre DOM ligero en la plataforma Salesforce, lea la documentación o, si está trabajando fuera de la plataforma, lea la documentación OSS .
Si decide seguir adelante y transformar sus componentes DOM ocultos en componentes DOM claros, consulte esta herramienta creada por Salesforce Engineering para simplificar la migración.
Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Puedes seguirla en Linkedin , Twitter o GitHub .
Añadir a holgura Suscríbete a RSS
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.
…
La IA generativa es una tecnología transformadora que aumenta la productividad de los desarrolladores, acelera el desarrollo de aplicaciones de software y reduce la barrera para que cualquiera aprenda a programar. En el TrailblazerDX de este año, anunciamos Einstein GPT para desarrolladores , la solución de inteligencia artificial generativa de Salesforce que libera la productividad de los desarrolladores y les permite desarrollar Salesforce más rápido . Hoy, estamos encantados de anunciar que Einstein GPT para desarrolladores ahora está en piloto cerrado.
Creado específicamente para lenguajes y marcos de Salesforce, Einstein GPT para desarrolladores puede generar código Apex utilizando lenguaje natural. El soporte para LWC llegará pronto. Nuestro objetivo es que esté disponible en Beta abierta en Dreamforce 23 , para que todos puedan tener acceso a la herramienta. En este blog, exploraremos cómo comenzar con Einstein GPT para el desarrollo de Apex y cómo su potencial puede revolucionar su proceso de desarrollo.
Las herramientas de codificación de IA generativa disponibles en la actualidad se entrenan principalmente en lenguajes públicos, como Java, Python y otros, así como en código disponible públicamente. Dado que los lenguajes específicos de Salesforce, como Apex y LWC, son propietarios, estas herramientas a menudo carecen de la capacitación necesaria para brindar recomendaciones precisas.
Además, las herramientas de codificación de IA son tan poderosas como el contexto que se les proporciona. Dado que estas herramientas de codificación públicas carecen del contexto de Salesforce de su organización, como los metadatos, las recomendaciones pueden ser inexactas o insuficientes para satisfacer sus necesidades. Por último, el uso de herramientas de inteligencia artificial disponibles públicamente expone su código privado más allá del límite de confianza de Salesforce y podría hacerlo público, una posible vulnerabilidad de seguridad.
Con Einstein GPT para desarrolladores, utilizamos CodeGen , nuestro propio modelo de código abierto para la síntesis de programas. Hospedamos CodeGen dentro del límite de confianza de Salesforce y lo hemos capacitado en lenguajes específicos de Salesforce como Apex y LWC. Con una base dinámica incorporada al proceso de generación de código, Einstein GPT enriquece sus recomendaciones utilizando sus metadatos y código. Nuestra capa de confianza de IA dentro de Einstein GPT garantiza que sus datos y código permanezcan seguros dentro de Salesforce y nunca se almacenen externamente.
Einstein GPT para desarrolladores se encuentra actualmente en una fase piloto cerrada. Nuestro plan es que esté disponible en Open Beta para Dreamforce 2023. Una vez que su organización esté habilitada para esta herramienta, puede instalar la extensión Einstein GPT en su VS Code Desktop usando un archivo VSIX compartido. Einstein GPT también estará disponible en Code Builder , nuestro IDE basado en web, que se espera que esté disponible de forma general en octubre. ¡Estén atentos a las actualizaciones!
Para utilizar la herramienta Einstein GPT para desarrolladores de forma eficaz:
Si está utilizando organizaciones borrador, active Einstein GPT para desarrolladores habilitando la función adicional de organización borrador. Simplemente edite y guarde el archivo config/project-scratch-def.json en su proyecto DX y agregue la función EinsteinGPTForDevelopers a su lista de funciones existente.
Por ejemplo:
Finalmente, puede comenzar a generar código Apex escribiendo un mensaje mediante el comando Paleta de comandos: SFDX: generar código con Einstein GPT (ver captura de pantalla a continuación) . Tenga en cuenta que debe estar dentro de un archivo Apex ( .cls ) para que aparezca el comando.
A continuación se muestra un mensaje de ejemplo:
Quiero crear una clase de Apex. Llamémoslo OpportunityQuerySelector. Cree un método llamado getSumOfOpportunityRecords que recupere la cantidad de registros de oportunidades vinculados a un registro de cuenta específico. El método debe aceptar accountId como parámetro. Siga las mejores prácticas de seguridad y asegúrese de que el código se ejecute en el modo de usuario.
Y luego el resultado se muestra a continuación.
Si bien el código generado anteriormente no requirió muchas ediciones, es posible que necesite personalizar la salida generada por Einstein GPT según sus necesidades durante el desarrollo. El panel Einstein GPT: Historial y comentarios dentro del IDE le permite compartir comentarios sobre el resultado generado. ¡Estos comentarios son imprescindibles para ayudarnos a capacitar a nuestro LLM y mejorar su resultado! Estamos emocionados de escuchar sus comentarios.
Recién estamos comenzando con la IA generativa para transformar su flujo de trabajo de desarrollo. Mira lo que viene pronto:
A medida que Einstein GPT para desarrolladores amplíe sus capacidades para admitir LWC, proporcionar finalización de código inteligente y brindar asistencia conversacional, podrá desarrollar la plataforma Salesforce más rápido que nunca. Nuestro objetivo es que esté disponible en Beta abierta en Dreamforce 2023 , para que todos puedan tener acceso a la herramienta. ¡Únase a nosotros en Dreamforce '23 para jugar y profundizar en Einstein GPT para desarrolladores!
Mohith Shrivastava es desarrollador defensor en Salesforce con una década de experiencia en la creación de productos a escala empresarial en la plataforma Salesforce. Mohith se encuentra actualmente entre los principales contribuyentes de Salesforce Stack Exchange, un foro de desarrolladores donde los desarrolladores de Salesforce pueden hacer preguntas y compartir conocimientos. Puedes seguirlo a través de LinkedIn .
Añadir a holgura Suscríbete a RSS
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.
…
Veamos un ejemplo en acción. Dreamhouse es una aplicación de muestra de bienes raíces ficticia que se puede usar para web y dispositivos móviles. Los agentes de bienes raíces, cuando están en el proceso de cerrar un trato, deben poder capturar el nombre y la firma del comprador para asociarlos con la propiedad que se vendió. Para hacer esto, los desarrolladores de Dreamhouse pueden utilizar un nuevo componente LWC de muestra que hemos creado. ¡Vamos a sumergirnos en él!
Para nuestro requisito Dreamhouse anterior, debemos poder recopilar el nombre y la información de la firma del LWC. Esto se puede hacer a través de tres pasos.
¡Vamos a sumergirnos en más detalles sobre los pasos!
Para comenzar, vaya a la sección NameAndSignatureCapture del directorio de muestra de LWC en GitHub. Luego, copie el componente signaturePad en la carpeta lwc de su proyecto. Después de copiar el código del componente de muestra, puede hacer referencia al componente escribiendo <c-signature-pad> y establecer sus atributos para configurarlo.
<dx-code-block title language="html" code-block="
«>
A continuación, los estilos de la interfaz también se pueden ajustar para satisfacer sus necesidades. Para nuestra demostración de Dreamhouse, importemos una nueva familia de fuentes. Para hacer esto, simplemente configure los estilos para su componente LWC como se ve a continuación.
También puede personalizar el diseño del LWC a su gusto haciendo referencia a la clase adecuada y los atributos HTML.
Por último, debemos asegurarnos de que la firma sea capturada correctamente por el LWC. A los efectos de nuestro ejemplo Dreamhouse, queremos poder guardar la firma proporcionada por el usuario final.
El SignaturePad LWC que proporcionamos se puede configurar para capturar datos y personalizar la interfaz a través de las API de JavaScript y sus atributos HTML correspondientes. Para hacer esto, simplemente invoque los métodos API y conéctelos a sus atributos HTML correspondientes en el <c-signature-pad> . Consulte la lista a continuación para el atributo HTML y las asignaciones de la API de JavaScript
| Funcionalidad | Descripción | Atributo HTML = "tipo" | API de JavaScript (Tipo) |
| Habilitar firma de nombre | Permite a los usuarios finales escribir su nombre y devuelve un texto para firmar generado automáticamente a medida que los usuarios escriben su nombre. | enable-name-signing=”booleano” | enableNameSigning(booleano) |
| Habilitar dibujo de firma | Le permite solicitar a los usuarios finales que dibujen su propia firma personalizada en el panel de firma proporcionado. | habilitar-firma-dibujo = "booleano" | enableSignatureDrawing (booleano) |
| Grosor de trazo característico | Personalice el grosor del trazo del lápiz en las capturas de firma electrónica. | trazo-grosor = "entero" | grosor del trazo (entero) |
| Color de la pluma de firma | Personalice el color de tinta del bolígrafo que se proporciona al usuario final. | bolígrafo-color=”Cadena” | plumaColor(Cadena) |
| Color de la almohadilla de firma | Personalice el color del pad de firma que ve el usuario final. | pad-color=”Cadena” | padColor(Cadena) |
| Color de fuente de la firma | Personaliza la fuente de la firma. | fuente-color = "Cadena" | font.color=Cadena |
| Configuración de una etiqueta de campo de entrada | Establezca una etiqueta para el nombre del campo de entrada. | nombre-entrada-etiqueta=”Cadena” | nombreInputLabel=”Cadena” |
| Configuración de una etiqueta de almohadilla | Establezca un nombre para la etiqueta sobre el panel de firma. | nombre-entrada-etiqueta=”Cadena” | nombreInputLabel=”Cadena” |
| Guardar firma | Permite guardar una firma autogenerada y/o personalizada. | onclick={guardar firma} | pad.getSignature() |
| Firma clara | Permite eliminar la firma anterior si es necesario volver a hacerlo. | onclick={clarar Firma} | pad.clearSignature() |
Tenga en cuenta que también agregamos un método clearSignature y saveSignature para permitir borrar y guardar firmas respectivamente. Puede hacer esto configurando sus propios métodos de JavaScript que se conectan a pad.setSignature() y pad.clearSignature() . Estos se pueden conectar a los componentes <lightning-button> . Veamos un ejemplo de esto a continuación.
Ahora que tenemos los métodos de JavaScript identificados, veamos algunos de ellos en acción. Esto se puede hacer usando el siguiente JavaScript.
{ if (font.family === "Great Vibes" && font.status === "unloaded") { // Ensure that the font is loaded so that signature pad could use it. // If you are using a different font in your project, don’t forget // to update the if-condition above to account for it. font.load(); } }); } saveSignature() { const pad = this.template.querySelector("c-signature-pad"); if (pad) { const dataURL = pad.getSignature(); if (dataURL) { // At this point you can consume the signature, for example by saving // it to disk or uploading it to a Salesforce org/record. // Here we just preview it in an image tag. this.imgSrc = dataURL; } } } clearSignature() { const pad = this.template.querySelector("c-signature-pad"); if (pad) { pad.clearSignature(); } this.imgSrc = null; }
} «>
Tenga en cuenta que agregamos un método clearSignature que se invoca cuando se hace clic en el botón Borrar, así como un método saveSignature que se invoca cuando se hace clic en el botón Guardar.
Algo a destacar sobre el componente es que responde completamente a los cambios de tamaño y orientación. También tenga en cuenta que el componente de captura de firmas ha sido diseñado para funcionar en la web, el panel táctil o el lápiz para dispositivos móviles o tabletas.
Además, Signature Capture LWC es compatible con la web y los dispositivos móviles y es la solicitud más común utilizada en la aplicación móvil Salesforce , así como en nuestra aplicación Mobile Test Harness . Eche un vistazo a la demostración a continuación para ver cómo se ejecuta en acción.
Esperamos que haya disfrutado de esta publicación de blog y que esté ansioso por usar las capacidades de captura de firma en su LWC para dispositivos móviles. Para empezar:
Para obtener más información sobre nuestras ofertas móviles, consulte los siguientes enlaces:
Ashwin Nair es un Product Manager en Salesforce que se enfoca en Salesforce Mobile. Actualmente está trabajando en Mobile Platform Experiences y ha estado en el espacio de desarrollo web y móvil durante más de siete años. Síguelo en LinkedIn .
Agregar a Slack Suscríbete a RSS
Última actualización el 19 de julio de 2023 por Rakesh Gupta
Después de leer este blog, podrá:
En el pasado, escribí algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?
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:
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 :
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.
Hay 3 pasos para resolver el requisito comercial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:
Al final, Janel's Flow se verá como la siguiente captura de pantalla:
Una vez que todo se vea bien, realice los siguientes pasos:
Al final, Janel's Flow se verá como la siguiente captura de pantalla:
Una vez que todo se vea bien, realice los siguientes pasos:
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").
Utilizaremos el componente lightning-flow para incrustar un flujo de pantalla en el componente lightning web. Desglosemos el código:
<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>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.
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 } }
}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.
¡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.
Última actualización el 17 de julio de 2023 por Rakesh Gupta
Después de leer este blog, podrá:
En el pasado, escribí algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?
Janel Parrish trabaja como desarrollador junior en Gurukul on Cloud (GoC). Janel tiene un requisito comercial para hacer lo siguiente:
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.
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 .
Hay 2 pasos para resolver el requisito empresarial de Janel utilizando Lightning Web Component y Screen Flow . Debemos:
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 .
Utilizaremos el componente de ubicación de entrada de rayos para aceptar valores de latitud y longitud. Desglosemos el código:
<plantilla> <relámpago-entrada-ubicación etiqueta="Coordenadas predeterminadas" latitud={latitud} longitud={longitud} onchange={handleChange}> </ubicación-de-entrada-del-relámpago>
</plantilla>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.
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])) ); }
}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>
Al final, Janel's Flow se verá como la siguiente captura de pantalla:
Una vez que todo se vea bien, realice los siguientes pasos:
¡Quiero saber de ti!
¿Qué es una cosa que aprendiste de esta publicación? ¿Cómo imagina aplicar este nuevo conocimiento en el mundo real? Siéntase libre de compartir en los comentarios a continuación.
Esta es una traducción 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.
…
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.
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.
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.
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.
Utiliza un componente Lightning sin anulaciones adicionales. Su código podría verse como el Ejemplo 1 a continuación.
<dx-code-block title language="html" code-block="
Save
«>
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.
<dx-code-block title language="html" code-block="
«>
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.
--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.<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
«>
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.
<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.
Está usando un componente personalizado que usa tokens personalizados. Su código podría verse como el Ejemplo 5 a continuación.
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.
<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, —slds-g-color-neutral-base-95: #f3f3f3 es el gancho de estilo SLDS más parecido.
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.
--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.--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.
--lwc tokens para cualquiera de estos componentes .
--lwc que se anula con el enlace de estilo actualizado --slds introducido.<dx-code-block title language="html" code-block="
«>
En este ejemplo, al anular —lwc-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.
--lwc con ganchos de estilo globales.--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 .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(—slds-g-color-neutral-base-50, #747474);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.
Agregar a Slack Suscríbete a RSS
Ú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 .
El adaptador de cable GraphQL está en fase piloto a partir de la versión Spring '23. Descubra cómo hace que acceder a los datos de los LWC sea más fácil que nunca.
La publicación Now in Pilot: GraphQL Wire Adapter for LWC apareció primero en el blog de desarrolladores de Salesforce .
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 .
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 .
Los desarrolladores valoran y confían en Salesforce Platform porque simplifica el proceso de creación de soluciones empresariales seguras. Al utilizar las herramientas y los servicios integrados de la plataforma para la automatización, la integración y más, los desarrolladores pueden lograr el éxito comercial más rápido. Los desarrolladores de Salesforce abordan problemas comerciales complejos escribiendo código y utilizando herramientas sin código que ofrecen funciones simples rápidamente. Los […]
La publicación Comenzar a crear aplicaciones de Salesforce ahora con un nuevo proyecto de Trailhead apareció primero en el blog de desarrolladores de Salesforce .
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 .
Última actualización el 16 de septiembre de 2022 por Rakesh Gupta Han pasado siete años desde que aprobé el examen de Desarrollador de plataformas I. En los últimos meses, muchas personas se pusieron en contacto conmigo para pedirme orientación y un camino para convertirme en un desarrollador de plataforma I profesional certificado. eso me da
La publicación Cómo aprobar el examen de certificación de desarrollador de plataforma de Salesforce I apareció primero en Automation Champion .
Ú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 .
Última actualización el 29 de julio de 2022 por Rakesh Gupta Como desarrollador de JavaScript recién acuñado certificado, estoy compartiendo mis experiencias de estudio con usted y quiero que sea el próximo en hacerlo. ¡Así que prepárate y sumérgete! Además de Trailhead Trailmix, creé en
La publicación Cómo aprobar el examen de certificación de desarrollador de JavaScript I de Salesforce apareció primero en Automation Champion .
Última actualización el 10 de julio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo se usa el componente web Lightning para mostrar un banner de alerta en las páginas Lightning para mostrar mensajes como una próxima notificación de lanzamiento interno/de Salesforce o un recordatorio para finalizar el fin de año? reuniones de seguimiento con los clientes? Objetivos:
La publicación Uso del componente web Lightning para mostrar un banner de alerta apareció primero en Automation Champion .
Última actualización el 7 de julio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo se accede a la identificación del registro actual, el nombre de la API del objeto actual y el ancho de la región del componente cuando se usa el componente web Lightning? Objetivos: Después de leer este blog, podrá: Acceder al actual
La publicación Get Record Id and Object API Name in Lightning Web Component apareció primero en Automation Champion .
Última actualización el 27 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo comprobar si el usuario actual tiene un permiso específico (Ejecutar informes) o no para personalizar el comportamiento de un componente? Objetivos: después de leer este blog, podrá: Verificar el permiso de usuario estándar para el usuario actual Verificar
La publicación Comprobar los permisos de usuario para el usuario que ha iniciado sesión en el componente web Lightning apareció primero en Automation Champion .
Última actualización el 25 de junio de 2022 por Rakesh Gupta Match My Email agrega otra función de la que carece Captura de actividad de Einstein. Si pregunta a los compradores B2B cuál es su método de comunicación preferido, el 62 % elige el correo electrónico. Ahora, mira a tu equipo: ¿cómo se comunican con los prospectos? Lo más probable es que encuentres
La publicación Create Salesforce Leads from Emails with Match My Email apareció primero en Automation Champion .
Ú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 .
Ú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 .
Última actualización el 21 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo usar etiquetas personalizadas en componentes web Lightning? Objetivos: después de leer este blog, podrá: Comprender el propósito de la etiqueta personalizada Crear etiquetas personalizadas y agregarle traducción Importar etiquetas personalizadas en
La publicación Acceder a etiquetas personalizadas en el componente web Lightning apareció primero en Automation Champion .
Ú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 .