Componente de área de texto enriquecido para Screen Flow

Última actualización el 10 de junio de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

• ¿Cómo agregar un campo de área de texto enriquecido a una pantalla de flujo?

Objetivos:

Después de leer este blog, podrá:

• Crear un componente web Lightning para flujo de pantalla
• Agregar un editor de propiedades personalizado para un componente de pantalla
• Agregar un componente web Lightning a una pantalla de flujo
• Asigne el valor del componente web lightning personalizado a un campo de área de texto (enriquecido)
• y mucho más

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Ella recibió un requerimiento de la gerencia que requiere que él construya un componente web Lightning para el flujo de pantalla que permita a los representantes ingresar notas de ventas en un área de texto enriquecido y luego almacenar la entrada en un campo de área de texto (enriquecido) en la cuenta.

¿Por qué necesitamos un componente personalizado para Rich Text Area for Screen Flow?

La razón es sencilla. Salesforce Flow no tiene un componente listo para usar para Rich Text Area. Es por eso que necesitamos un componente web relámpago para habilitar un componente de área de texto enriquecido en la pantalla de flujo.

Personalizar la interfaz de usuario del componente de pantalla y acción en Flow Builder

Desarrolle un editor de propiedades personalizado que proporcione una interfaz de usuario simplificada para un administrador cuando configure un componente de pantalla personalizado o una acción invocable en Flow Builder. Un editor de propiedades personalizadas es un componente web Lightning que proporciona una interfaz de usuario personalizada para ingresar valores de entrada.

Este ejemplo crea un editor de propiedades personalizadas para un componente de pantalla de flujo personalizado que muestra #líneas visibles , Etiqueta de campo, Longitud de campo, Obligatorio , Valor de campo . El administrador establece el valor de estos componentes mediante un control deslizante en el editor de propiedades personalizadas del componente de volumen. Cuando los usuarios ejecutan el flujo, la pantalla de flujo muestra o usa los valores del administrador.

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

Hay algunas soluciones posibles para el escenario empresarial anterior . Usaremos Lightning Web Component y Screen Flow para resolver el requisito.

Antes de discutir la solución, permítame mostrarle un diagrama de un flujo de proceso de alto nivel. Dedique unos minutos a repasar el siguiente diagrama de flujo y comprenderlo.

Comencemos a construir este proceso de automatización.

Práctica guiada (nosotros hacemos):

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

1. Cree un campo de área de texto (enriquecido) personalizado en la cuenta
2. Cree un componente de área de texto enriquecido para Screen Flow utilizando el componente web lightning
3. Pasos de flujo de Salesforce
   1. Definir propiedades de flujo para el flujo de pantalla
   2. Agregar una pantalla para mostrar el componente personalizado Búsqueda de cuenta y Área de texto enriquecido
   3. Agregue un elemento de registros de actualización para actualizar una cuenta
4. Agregue un flujo de pantalla a la página de inicio de Lightning

Paso 1: crear un campo de área de texto personalizado (enriquecido) en el objeto de cuenta

1. Haga clic en Configuración .
2. En el Administrador de objetos, escriba Cuenta .
3. Seleccione Campos y relaciones , luego haga clic en Nuevo .
4. Seleccione Área de texto (enriquecida) como tipo de datos y, a continuación, haga clic en Siguiente .
5. Ingrese Etiqueta de campo y haga clic en la tecla de tabulación, se completará el nombre de la API .
6. Como práctica recomendada, siempre ingrese una descripción .
7. # Líneas visibles : 25
8. Longitud : 32.768
9. Configure la Seguridad a nivel de campo para los perfiles , asegúrese de configurar este campo como de solo lectura.
10. No agregue este campo al diseño de página .
11. Haga clic en Guardar.

Paso 2: Cree un componente de área de texto enriquecido para el flujo de pantalla utilizando el componente web Lightning

En primer lugar, cree un componente web Lightning de área de texto enriquecido con el siguiente código. Si no sabe cómo crear un componente Lightning, consulte esta guía para desarrolladores Crear un componente web Lightning .

ScreenFlowRichText.html

ScreenFlowRichText.js

ScreenFlowRichText.js-meta.xml

ScreenFlowRichText.css

Copie el código de GitHub o instálelo usando esta URL .

Paso 3.1: Definir propiedades de flujo

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

Paso 3.2: agregue una pantalla para mostrar la búsqueda de cuentas y el componente personalizado del área de texto enriquecido

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. Mira el video para obtener instrucciones paso a paso y algunos consejos.

Paso 3.3: Agregar acción: actualizar registros

El siguiente paso es actualizar el registro de la cuenta para almacenar la nota de venta. Usaremos los registros de actualización   elemento.

1. En Flow Designer, haga clic en el icono + y seleccione el elemento Actualizar registros .
2. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
3. Para obtener información sobre cómo encontrar registros para actualizar y establecer sus valores , seleccione Especificar condiciones para identificar registros y establecer campos individualmente.
4. Objeto : Cuenta
5. Seleccione Se cumplen todas las condiciones (Y) .
6. Establecer condiciones de filtro
   1. Fila 1:
      1. Campo : Identificación
      2. Operador : Igual
      3. Valor : {!Cuenta.recordId}
7. Establecer valores de campo para los registros de oportunidad
   1. Fila 1:
      1. Campo : Sales_Note__c
      2. Valor : {!SalesNote.fieldValue}
8. Haga clic en Listo .

Al final, Rachel'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 : 55
5. Etiqueta de entrevista : Área de texto enriquecido {!$Flow.CurrentDateTime}
6. Haga clic en Guardar .

¡Casi ahí! Una vez que todo se vea bien, haga clic en el botón Activar .

Paso 4: agregue un flujo de pantalla a la página de inicio de Lightning

El siguiente paso es distribuir un flujo a los usuarios de la aplicación Lightning Experience o Salesforce incrustándolo en una página de inicio de Lightning.

Prueba de concepto

Mira el video para obtener instrucciones paso a paso.

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.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/06/10/rich-text-area-component-for-screen-flow-2/