Secciones plegables en Screen Flow

Última actualización el 24 de abril de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

• ¿Cómo se crea un flujo de pantalla con secciones plegables?

Objetivos:

Después de leer este blog, podrá:

• Agregar una sección al elemento de pantalla
• Haz que una sección en el flujo de la pantalla sea plegable
• y mucho más

Arda Turan trabaja como administradora de sistemas en Gurukul on Cloud (GoC) . Arda quiere crear un flujo de pantalla con secciones plegables como se muestra en la siguiente captura de pantalla:

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

Después del reciente lanzamiento, Salesforce ahora nos permite hacer que una sección sea plegable sin escribir ningún código.

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 compréndalo.

Comencemos a construir este proceso de automatización.

Práctica guiada (nosotros hacemos):

Hay 4 pasos para resolver el requisito comercial de Arda utilizando Screen Flow . Debemos:

1. Definir propiedades de flujo para el flujo de pantalla
2. Agregar una pantalla para capturar la entrada del usuario
   1. Agregue un componente de teléfono para capturar la entrada del usuario para el número de teléfono
   2. Agregue un componente de texto para capturar la entrada del usuario para la ciudad
3. Agregue una sección para mostrar los campos de información personal y hacerlo plegable
4. Agregue una sección para mostrar los campos de dirección de correo y hacerlo plegable  

Paso 1: Flujo de Salesforce: definir las propiedades del 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 2: agregue un elemento de pantalla para capturar la entrada del usuario

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.1: agregue un componente de teléfono para capturar la entrada del usuario para el número de teléfono

1. En la sección Entrada del Elemento de pantalla, arrastre y suelte el componente Teléfono en la pantalla.
2. Ingrese la siguiente información :
   1. Introduzca un nombre en el campo Nombre de la API ; la etiqueta se completará automáticamente.
   2. Obligatorio: {!$ConstanteGlobal.True}
3. Haga clic en Listo.

Paso 2.2: agregue un componente de texto para capturar la entrada del usuario para la ciudad

1. En la sección Entrada en Elemento de pantalla , arrastre y suelte el componente Texto en la pantalla.
2. Ingrese la siguiente información :
   1. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
   2. Seleccione la casilla de verificación Requerir .
3. Haga clic en Listo.

Paso 3: agregue una sección para mostrar los campos de información personal y hágalo plegable

1. En la sección Visualización en Elemento de pantalla , arrastre y suelte el componente Sección en la pantalla.
2. Ingrese la siguiente información :
   1. Seleccione la casilla de verificación Incluir encabezado .
   2. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
3. Haga clic en Listo.

Paso 4: agregue una sección para mostrar los campos de dirección postal y hágalo plegable

1. En la sección Visualización en Elemento de pantalla , arrastre y suelte el componente Sección en la pantalla.
2. Ingrese la siguiente información :
   1. Seleccione la casilla de verificación Incluir encabezado .
   2. Introduzca un nombre en el campo Etiqueta ; el nombre de la API se completará automáticamente.
3. Haga clic en Listo.

Al final, Arda'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. Introducir 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 : ejemplo de secciones plegables {!$Flow.CurrentDateTime}
6. Haga clic en Guardar .

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

Prueba de concepto

De ahora en adelante, cuando los usuarios ejecuten el Flujo, verán la sección plegable, como se muestra a continuación.

¡Qué maravilloso viaje de aprendizaje fue este! ¡Con poca creatividad, podemos empujar muchos límites! ¡Feliz viaje!

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/04/24/configure-collapsible-sections-in-screen-flow/