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?

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:

Debería mostrar un flujo de pantalla llamado 'parterFlow' cuando el tipo de cuenta es 'Socio tecnológico'.
Debería presentar un flujo de pantalla llamado 'customerFlow' cuando el tipo de cuenta es 'Cliente – Directo'.
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 :

getRecord : este método le permite obtener datos de registro.
getRecordCreateDefaults : este método proporciona los valores predeterminados que utiliza Salesforce al crear un nuevo registro.
getRecordUi : obtiene los detalles de diseño de un registro, como qué campos se muestran, cómo se muestran, etc.
createRecord : este método le permite crear un nuevo registro.
deleteRecord – Le permite eliminar un registro.
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:

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
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
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)

Haga clic en Configuración .
En el cuadro Búsqueda rápida, escriba Flujos .
Seleccione Flujos , luego haga clic en Nuevo flujo .
Seleccione el flujo de pantalla y haga clic en Crear y configurar el flujo.
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

En Caja de herramientas , seleccione Administrador y, a continuación, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
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
Haga clic en Listo.

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

En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
Ingrese la siguiente información :
1. Ingrese la etiqueta, el nombre de la API se completará automáticamente.
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:

Haga clic en Guardar .
Ingrese la etiqueta de flujo, el nombre de la API se completará automáticamente.
Haga clic en Mostrar avanzado .
Versión de API para ejecutar el flujo : 58
Etiqueta de entrevista : customerFlow {!$Flow.CurrentDateTime}
Haga clic en Guardar .

Paso 2.1: Definir propiedades de flujo (partnerFlow)

Haga clic en Configuración .
En el cuadro Búsqueda rápida, escriba Flujos .
Seleccione Flujos , luego haga clic en Nuevo flujo .
Seleccione el flujo de pantalla y haga clic en Crear y configurar el flujo.
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

En Caja de herramientas , seleccione Administrador y, a continuación, haga clic en Nuevo recurso para almacenar el nombre de la cuenta.
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
Haga clic en Listo.

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

En Flow Designer, haga clic en el icono + y seleccione el elemento Pantalla .
Ingrese la siguiente información :
1. Ingrese la etiqueta, el nombre de la API se completará automáticamente.
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:

Haga clic en Guardar .
Ingrese la etiqueta de flujo, el nombre de la API se completará automáticamente.
Haga clic en Mostrar avanzado .
Versión de API para ejecutar el flujo : 58
Etiqueta de entrevista : flujo de socio { !$Flow.CurrentDateTime}
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.

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()

Tag: Componente web Lightning

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

Comience con Einstein GPT para desarrolladores

Transformando el proceso de desarrollo

Conclusión

Recursos adicionales

Sobre el Autor

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

Configuración de la configuración de LWC

1. Configure su diseño HTML de LWC

2. Configura tus estilos LWC

3. Conecte su interfaz con las API de LWC

Conclusión

Sobre el Autor

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

Gran idea o pregunta duradera:

Objetivos:

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

Práctica guiada (nosotros hacemos):

Paso 1.1: Definir propiedades de flujo (customerFlow)

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

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

Paso 2.1: Definir propiedades de flujo (partnerFlow)

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

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

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

embedFlowToLWC.html

embedFlowToLWC.js

embedFlowToLWC.js-meta.xml

Prueba de concepto

Evaluación formativa:

Gran idea o pregunta duradera:

Objetivos:

Construir pantallas con componentes reactivos

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

Práctica guiada (nosotros hacemos):

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

lwcToScreenFlow.html

lwcToScreenFlow.js

lwcToScreenFlow.js-meta.xml

Paso 2.1: Definir propiedades de flujo

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

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

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

Prueba de concepto

Evaluación formativa:

¿Cuál es el motivo de la actualización?

¿Cuándo está ocurriendo la actualización?

¿Qué es lo que hay que hacer?

1. Componente base Lightning/Aura

¿Qué es lo que hay que hacer?

Ejemplo 1

2. Componente personalizado con plano SLDS

¿Qué es lo que hay que hacer?

Ejemplo 2

3. Componente personalizado con plano parcial de SLDS

¿Qué es lo que hay que hacer?

Ejemplo 3

4. Componente personalizado con tokens o clases SLDS

¿Qué es lo que hay que hacer?

Ejemplo 4

5. Componente personalizado con fichas personalizadas

¿Qué es lo que hay que hacer?

Ejemplo 5

6. Componente personalizado con valores codificados

¿Qué es lo que hay que hacer?

7. Componente base con anulación --lwc

¿Qué es lo que hay que hacer?

Ejemplo 7

Mejores prácticas

Más recursos

Sobre el Autor

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

Categories

7. Componente base con anulación `--lwc`