Skip to content

Tag: Componente web Lightning

Einstein GPT para desarrolladores: ahora en versi贸n piloto 鈽侊笍

Einstein GPT para desarrolladores: ahora en versi贸n piloto 鈽侊笍

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.

Einstein GPT para desarrolladores: ahora en fase piloto | Blog de desarrolladores de Salesforce

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.

Einstein GPT para desarrolladores frente a otras herramientas de codificaci贸n de IA

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.

Comience con Einstein GPT para desarrolladores

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:

  1. Abra su VS Code, vaya a Archivo > Abrir carpeta en el men煤 y abra un proyecto de Salesforce DX existente o configure un nuevo proyecto.
  2. Para trabajar con Einstein GPT para desarrolladores, ejecute el comando SFDX: Autorizar una organizaci贸n para conectarse a una organizaci贸n sandbox o a una organizaci贸n borrador de Salesforce. Podr谩 utilizar Einstein GPT para desarrolladores dentro de este entorno.

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.

Transformando el proceso de desarrollo

Reci茅n estamos comenzando con la IA generativa para transformar su flujo de trabajo de desarrollo. Mira lo que viene pronto:

  • Compatibilidad con Lightning Web Component (LWC): genere c贸digo LWC basado en el procesamiento del lenguaje natural (NLP)
  • Finalizaci贸n predictiva de c贸digo en l铆nea: complete autom谩ticamente la siguiente l铆nea de c贸digo sugerida con metadatos contextuales del proyecto.
  • Verificaci贸n del rendimiento del c贸digo: escanee el c贸digo Apex y corrija errores de tiempo de ejecuci贸n durante el proceso de desarrollo
  • Asistencia conversacional: P铆dale a Einstein que genere c贸digo contextual y documentaci贸n, explique el c贸digo o resuelva problemas complejos.

Conclusi贸n

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!

Recursos adicionales

Sobre el Autor

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 .

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

Continue reading

Capture firmas electr贸nicas con componentes web Lightning en dispositivos m贸viles 鈽侊笍

Capture firmas electr贸nicas con componentes web Lightning en dispositivos m贸viles 鈽侊笍

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.

Capture firmas electr贸nicas con componentes web Lightning en dispositivos m贸viles | Blog de desarrolladores de Salesforce

驴Alguna vez ha necesitado recopilar una firma electr贸nica sobre la marcha? Tal vez necesite verificar un pago, asegurarse de que se procesen transacciones exitosas o incluso actualizar los registros despu茅s de que se haya completado un servicio. Una firma electr贸nica es 煤til como paso de verificaci贸n de muchas maneras. Permitir que los trabajadores de campo capturen firmas sobre la marcha es uno de los casos de uso m贸vil m谩s comunes que escuchamos de nuestros clientes. Por lo tanto, me complace compartir que hemos creado un componente web Lightning de muestra que le permite capturar firmas y adjuntarlas a un registro de Salesforce. Si bien creamos esto para casos de uso m贸vil, no hay nada que le impida usarlo tambi茅n en computadoras de escritorio con pantalla t谩ctil. Trabajar con el LWC de captura de firmas 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!

Configuraci贸n de la configuraci贸n de LWC

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.

  1. Configure su dise帽o HTML LWC
  2. Configura tus estilos LWC
  3. Conecte su interfaz con las API de JavaScript de LWC

隆Vamos a sumergirnos en m谩s detalles sobre los pasos!

1. Configure su dise帽o HTML de LWC

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="

“>

2. Configura tus estilos LWC

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.

3. Conecte su interfaz con las API de LWC

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=鈥漛ooleano鈥 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=鈥滳adena鈥 plumaColor(Cadena)
Color de la almohadilla de firma Personalice el color del pad de firma que ve el usuario final. pad-color=鈥滳adena鈥 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=鈥滳adena鈥 nombreInputLabel=鈥滳adena鈥
Configuraci贸n de una etiqueta de almohadilla Establezca un nombre para la etiqueta sobre el panel de firma. nombre-entrada-etiqueta=鈥滳adena鈥 nombreInputLabel=鈥滳adena鈥
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.

Conclusi贸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:

  • 隆Buceo en! Consulte nuestro repositorio GitHub de ejemplos m贸viles de LWC para ver y probar los ejemplos de LWC de las capacidades de captura de firmas en acci贸n. Luego, una vez que est茅 familiarizado con los flujos…
  • 隆Personal铆zalo! Tome las muestras de Signature Capture LWC y ampl铆elas para personalizarlas seg煤n las necesidades de su negocio.
  • 隆Alcanzar! Si tiene alguna pregunta, comentario o idea, puede conectarse con nosotros en nuestra comunidad Salesforce Mobile Trailblazer .

Para obtener m谩s informaci贸n sobre nuestras ofertas m贸viles, consulte los siguientes enlaces:

Sobre el Autor


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 .

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

Continue reading

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.

Continue reading

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.

Continue reading

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

Continue reading

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 .

Continue reading

Ahora en Pilot: adaptador de cable GraphQL para LWC 鈽侊笍

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 .

Continue reading

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 .

Continue reading

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 .

Continue reading

Comience a crear aplicaciones de Salesforce ahora con un nuevo proyecto de Trailhead 鈽侊笍

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 .

Continue reading

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 .

Continue reading

C贸mo aprobar el examen de certificaci贸n de desarrollador de la plataforma Salesforce I

脷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 .

Continue reading

隆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 .

Continue reading

C贸mo aprobar el examen de certificaci贸n de desarrollador de JavaScript I de Salesforce

脷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 .

Continue reading

Uso del componente web Lightning para mostrar un banner de alerta

脷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 .

Continue reading

Obtenga el Id. de registro y el nombre de la API del objeto en el componente web Lightning

脷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 .

Continue reading

Comprobar los permisos de usuario para el usuario que ha iniciado sesi贸n en el componente web Lightning

脷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 .

Continue reading

Cree clientes potenciales de Salesforce a partir de correos electr贸nicos con Match My Email

脷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 .

Continue reading

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 .

Continue reading

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 .

Continue reading

Acceda a etiquetas personalizadas en el componente web Lightning

脷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 .

Continue reading

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 .

Continue reading

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 .

Continue reading

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 .

Continue reading