Pasar datos del componente web Lightning al flujo de pantalla

Pasar datos del componente web Lightning al flujo de pantalla

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

Gran idea o pregunta duradera:

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

Objetivos:

Despu茅s de leer este blog, podr谩:

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

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

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

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

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

Construir pantallas con componentes reactivos

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

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

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

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

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

Pr谩ctica guiada (nosotros hacemos):

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

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

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

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

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

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

lwcToScreenFlow.html

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

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

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

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

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

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

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

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


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

Paso 2.1: Definir propiedades de flujo

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

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

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

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

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

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

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

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

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

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

Prueba de concepto

Evaluaci贸n formativa:

隆Quiero saber de ti!

驴Qu茅 es una cosa que aprendiste de esta publicaci贸n? 驴C贸mo imagina aplicar este nuevo conocimiento en el mundo real? Si茅ntase libre de compartir en los comentarios a continuaci贸n.

Seguir leyendo

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

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

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

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

Seguir leyendo

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 .

Seguir leyendo

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 .

Seguir leyendo

Aprenda MOAR en Spring '22 con LWC en Tableau CRM Dashboards 鈽侊笍

En Spring '22, puede extender el poder de Lightning Web Components (LWC) a los tableros de Tableau CRM y crear aplicaciones de an谩lisis a煤n m谩s ricas y personalizadas. Las opciones con LWC y Tableau CRM son muchas. Puede crear extensiones reutilizables personalizadas, como gr谩ficos, widgets e incluso visualizaciones de datos de Tableau, y llevarlas directamente a [鈥

La publicaci贸n Aprenda MOAR en Spring '22 con LWC en Tableau CRM Dashboards apareci贸 primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Resumen r谩pido de la versi贸n de Salesforce Winter'22

脷ltima actualizaci贸n el 30 de septiembre de 2021 por Rakesh Gupta Actualmente, el lanzamiento de Winter'22 est谩 disponible bajo el programa de prelanzamiento. El y 27 de agosto, los Sandboxes se actualizar谩n, como resultado, su organizaci贸n obtendr谩 la apariencia del lanzamiento de Winter'22. En esta versi贸n, encontrar谩 muchas funciones nuevas, as铆 como nuevas mejoras relacionadas con

El Resumen r谩pido posterior a la versi贸n de Salesforce Winter'22 apareci贸 primero en Automation Champion .

Seguir leyendo

Aprenda MOAR con Summer '21: Acciones r谩pidas de LWC 鈽侊笍

Siga y complete una mezcla de prueba de Learn MOAR Summer '21 para administradores o desarrolladores antes del 31 de julio para obtener una insignia especial de la comunidad y participar para tener la oportunidad de ganar uno de los cinco cupones de certificaci贸n de Salesforce de $ 200 USD. Aprenda a participar y revise las Reglas oficiales visitando la p谩gina Trailhead Quests. Realice acciones r谩pidas [鈥

La publicaci贸n Learn MOAR with Summer '21: LWC Quick Actions apareci贸 primero en el Blog de desarrolladores de Salesforce .

Seguir leyendo