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=‚ÄĚUTF-8‚Ä≥?>
<LightningComponentBundle xmlns=‚ÄĚhttp://soap.sforce.com/2006/04/metadata‚ÄĚ>
<apiVersion>58.0</apiVersion>
<isExposed>verdadero</isExposed>
<target>rel√°mpago__RecordPage</target>
</objetivos>
</LightningComponentBundle>

Prueba de concepto

Evaluación formativa:

¬°Quiero saber de ti!

¬ŅQu√© es una cosa que aprendiste de esta publicaci√≥n? ¬ŅC√≥mo imagina aplicar este nuevo conocimiento en el mundo real? Si√©ntase libre de compartir en los comentarios a continuaci√≥n.

Seguir leyendo