Mejorar la apariencia de las pantallas

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Definir los botones del pie de página de una pantalla de flujo.
  
• Dividir una pantalla de flujo en varias secciones y columnas.
  
• Configurar un componente de pantalla para mostrar solamente en determinadas situaciones.
  
• Configurar un componente de pantalla para aceptar solo entradas válidas.
  

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Esta insignia es solo una parte del proceso hacia el dominio de Flow Builder. De principio a fin, la ruta Crear flujos con Flow Builder le sirve de guía en el aprendizaje de todo sobre Flow Builder. Siga esta secuencia de insignias recomendada para desarrollar habilidades sólidas de automatización de procesos y convertirse en un experto en Flow Builder.

En este módulo, creó un flujo que realiza varias preguntas a los agentes de asistencia y luego crea un caso. Es bueno, pero podemos mejorarlo. Podemos optimizarlo, hacer que sea más eficiente y rápido... O bien, al menos, podemos hacerlo más ordenado, más fácil de usar y acorde a sus requisitos de datos. ¡Liberemos todo el potencial del flujo de las pantallas!

Establecer los botones del pie de página de una pantalla

Los agentes de asistencia de Pyroclastic tienen algunos problemas cuando ejecutan el flujo Create Case for Contact (Crear caso de contacto). Cuando hacen clic en Finish (Finalizar) en la última pantalla, el flujo se reinicia de manera inesperada desde el principio, y no saben qué hacer. A veces, generan dos casos nuevos en lugar de uno. Después de algunas pruebas de solución de problemas e investigación, Flo descubre que el problema ocurre cuando un agente hace clic en el botón Previous (Anterior) en la pantalla final. Volvamos a observar el flujo.

Si un usuario hace clic en el botón Previous (Anterior), regresa a la pantalla anterior: Questions Page 2 (Preguntas página 2). Cuando el usuario hace clic en Next (Siguiente) para continuar, el flujo ejecuta el elemento Create Case (Crear caso) una segunda vez (resultado que no queremos).

Es una mejor práctica hacer que los flujos sean lo más transparentes e infalibles posible. Elimine los botones innecesarios y asigne una etiqueta a cada botón que describa lo que sucede cuando un usuario hace clic en dicho botón. 

Personalicemos los botones en las pantallas Questions Page 2 (Preguntas página 2) y File Upload (Carga de archivos), y ocultemos ese botón Previous (Anterior) potencialmente peligroso en la pantalla File Upload (Carga de archivos).

1. Abra el flujo Create Case for Contact (Crear caso de contacto).
   
2. Abra el elemento Questions Page 2 (Preguntas página 2). Asegúrese de que no haya componentes seleccionados en el lienzo de pantalla.
   
3. En la barra lateral de las propiedades de pantalla, haga clic en Configure Footer (Configurar pie de página).
   
4. Para el botón Next (Siguiente) o Finish (Finalizar), seleccione Use a custom label (Usar una etiqueta personalizada).
   
5. En la etiqueta del botón Next (Siguiente) o Finish (Finalizar), introduzca Create Case (Crear caso).
   
6. Haga clic en Done (Listo).
   
7. En el elemento de pantalla File Upload (Carga de archivos), asegúrese de que no haya componentes seleccionados en el lienzo de pantalla.
   
8. En la barra lateral de las propiedades de pantalla, haga clic en Configure Footer (Configurar pie de página).
   
9. Para el botón Next (Siguiente) o Finish (Finalizar), seleccione Use a custom label (Usar una etiqueta personalizada).
   
10. En la etiqueta del botón Next (Siguiente) o Finish (Finalizar), introduzca Restart (Reiniciar).
    
11. Para el botón Previous (Anterior), seleccione Hide Previous (Ocultar anterior).
    
12. Haga clic en Done (Listo) y guarde el flujo.
    

Cuando el flujo ejecuta la pantalla Questions Page 2 (Preguntas página 2), el botón Next (Siguiente) le dice al usuario exactamente qué sucede cuando hace clic en él: el flujo crea un caso.

Cuando el flujo ejecuta la pantalla File Upload (Carga de archivos), el botón Finish (Finalizar) tiene la etiqueta Restart (Reiniciar) más clara y el botón Previous (Anterior) está oculto.

La sección Configure Footer (Configurar pie de página) también tiene opciones de configuración para el botón de pausa, pero no aparece a menos que esté habilitada en la configuración de toda la organización. El botón de pausa permite que los usuarios congelen su progreso en un flujo, lo cual guarda el flujo para reanudarlo después. Para obtener más información, consulte Preparar la organización para las entrevistas de flujo pausado en la Ayuda de Salesforce.

Organizar componentes en filas y columnas

Flo integró el flujo Create Case for Contact (Crear caso de contacto) en la columna más amplia de la página Lightning de un contacto. Ahora la pantalla del flujo tiene un gran espacio en blanco sin utilizar. Además, la segunda pantalla tiene bastantes preguntas, lo cual ocupa muchísimo espacio vertical. ¿De qué modo podemos usar el espacio de la pantalla para que sea más eficiente?

El componente de sección divide una pantalla de flujo en varias columnas, lo que le permite colocar los componentes lado a lado y utilizar ese espacio en blanco horizontal. En el componente de sección, debe definir la cantidad de columnas y el ancho relativo de cada una de ellas.

Agregue componentes de sección a las pantallas para usar ese espacio adicional.

Actualizar la pantalla de preguntas

1. Abra el elemento Questions (Preguntas).
   
2. Arrastre Section (Sección) desde la barra lateral de componentes hasta la parte superior del lienzo de pantalla.
   
3. En la barra lateral de la sección, haga clic en +Add Column (+Agregar columna).
   
   
4. Arrastre el componente para mostrar texto SayThisText hacia la primera columna Empty (Vacía).
   Lo que se ve resaltado en verde muestra qué sección está activa a medida que se desplaza por el lienzo. Suelte el componente en la primera columna cuando esté resaltada.
   
   
5. Arrastre el componente de área de texto largo Problem Description (Descripción del problema) hasta la primera columna, debajo de SayThisText (Diga este texto).
   
6. Arrastre el componente de texto Case Subject (Asunto del caso) hacia la segunda columna.
   
7. Arrastre el componente de conmutador CloseCase hacia la segunda columna, debajo de ScreenSubject (Asunto de la pantalla).
   El lienzo de pantalla debería verse del siguiente modo:
   
   
8. Haga clic en Done (Listo).
   

Actualizar la pantalla de preguntas de la página 2

1. Abra el elemento Questions Page 2 (Preguntas página 2).
   
2. Arrastre Section (Sección) desde la barra lateral de componentes hasta la parte superior del lienzo de pantalla.
   
3. En la barra lateral de la sección, haga clic en +Add Column (+Agregar columna).
   
4. Establezca el ancho de la columna 1 en 9 de 12.
   
5. Arrastre el componente de tabla de datos Point of Contact (Punto de contacto) hasta la primera columna.
   
6. Arrastre el componente de botones de opción What priority would the customer assign to this case (¿Qué prioridad asignaría el cliente a este caso?) hasta la segunda columna.
   
7. Arrastre otra sección desde la barra lateral de componentes hasta el lienzo de pantalla, debajo del primer componente de sección.
   
8. En la barra lateral de la sección, haga clic en +Add Column (+Agregar columna) dos veces.
   La segunda sección tiene tres columnas ahora.
   
9. Cambie el ancho de las columnas a lo siguiente:
   

• Ancho de la columna 1: 3 de 12
  
• Ancho de la columna 2: 3 de 12
  
• Ancho de la columna 3: 6 de 12 (media anchura)
  

10. Arrastre el componente de búsqueda QA Reviewer (Revisor de control de calidad) hasta la primera columna de la segunda sección.
    
11. Arrastre el componente de campo de registro Case Reason (Motivo del caso) hasta la segunda columna de la segunda sección.
    
12. Arrastre el componente de grupo de casillas de verificación In which timeslots can we call the customer for follow-up if needed (¿En qué franja horaria podemos llamar al cliente para hacer un seguimiento si es necesario?) hasta la tercera columna de la segunda sección.
    El lienzo de pantalla debería verse de la siguiente manera:
    
    
13. Haga clic en Done (Listo) y guarde el flujo.
    

Para ver cómo funcionan las pantallas recién organizadas, guarde el flujo y haga clic en Run (Ejecutar). Esta pantalla es tan estéticamente linda que debería considerarse el “Miguel Ángel de los flujos”.

Controlar cuándo aparecen los componentes

Al igual que los componentes de página Lightning, los componentes de pantalla de flujo admiten la visibilidad condicional. Cuando agrega visibilidad condicional a un componente, el flujo muestra el componente solo cuando están presentes las condiciones que se especifican. Estas condiciones pueden hacer referencia a cualquier elemento del flujo, incluidos otros componentes de la misma pantalla.

Los agentes de asistencia de Pyroclastic no necesitan ver la franja horaria de seguimiento a menos que seleccionen un motivo que probablemente requiera seguimiento. Así que simplifiquemos el flujo con una visibilidad condicional.

1. Abra el elemento Questions Page 2 (Preguntas página 2) y seleccione el componente de grupo de casillas de verificación CallbackTimes.
   
2. Haga clic en Set Component Visibility (Establecer visibilidad de componente).
   
3. En When to Display Component (Cuándo mostrar el componente), seleccione All Conditions Are Met (AND) [Se cumplen todas las condiciones (AND)].
   
4. Para Resource (Recurso), seleccione caseVar> Reason (Motivo).
   
5. Para Operator (Operador), seleccione Equals (Es igual a).
   
6. Para Value (Valor), introduzca Equipment Complexity,Performance,Breakdown,Equipment Design,Other (Complejidad del equipo, Desempeño, Desglose, Diseño del equipo, Otros).
   Estos valores son todas las opciones para esta lista de selección excepto Installation (Instalación) y Feedback (Comentarios). Cuando introduce todas las opciones deseadas separadas por coma, Salesforce trata cada valor como una opción válida. De manera alternativa, puede establecer When to Display Component (Cuánto mostrar el componente) en Any Condition is Met (OR) [Se cumple cualquier condición (OR)] y agregar cada opción viable como una condición por separado.
   
   
7. Haga clic en Done (Listo) en la ventana emergente.
   
8. Haga clic en Done (Listo) para cerrar el elemento de pantalla.
   
9. Guarde el flujo.
   

Ahora, cuando Case Reason (Motivo del caso) se establezca en un valor que no es Installation (Instalación) o Feedback (Comentarios), aparecerá el componente CallbackTimes. Si cambia Case Reason (Motivo del caso) a Installation (Instalación) o Feedback (Comentarios), la pregunta desaparecerá. Haga clic en el botón Run (Ejecutar), vaya a la segunda pantalla y pruébelo usted mismo.

Mejorar la calidad de los datos en los componentes

Los gerentes de asistencia de Pyroclastic tienen una última solicitud para el flujo Create Case for Contact (Crear caso de contacto). Algunas descripciones de casos son demasiado breves y no tienen suficiente información sobre la llamada. Flo le solicita que implemente un requisito de caracteres mínimos en el campo de descripción.

Afortunadamente, puede agregar una validación a los componentes de pantalla. Es como agregar una regla de validación a cada componente. Sin embargo, existe una gran diferencia.

• Una regla de validación se activa cuando su fórmula devuelve TRUE (Verdadero).
  
• Una validación de componente de pantalla se activa cuando su fórmula devuelve FALSE (Falso).
  

Agreguemos la cantidad mínima de 20 caracteres al componente de descripción del problema.

1. Abra el elemento Questions (Preguntas) y seleccione el componente Problem Description (Descripción del problema).
   
2. En el panel de propiedades, haga clic en Validate Input (Validar entrada).
   
3. Para Error Message (Mensaje de error), introduzca Please add more detail (Agregue más detalles).
4. Para Formula (Fórmula), introduzca LEN({!ScreenDescription}) >= 20.
   
   
5. Haga clic en Done (Listo) y guarde el flujo.
   

Cuando un usuario introduzca una descripción con menos de 20 caracteres, el flujo mostrará el mensaje de error y el usuario no podrá continuar hasta que agregue más texto. Claro que esto no garantiza que agregará detalles importantes, pero es una motivación sutil que es difícil pasar por alto.

En esta insignia, aprendió como crear un flujo de pantalla. A continuación, revise la insignia Distribución de los flujos de pantalla para saber cómo insertar flujos de pantalla en el lugar donde necesitan los usuarios.

Recursos

• Ayuda de Salesforce: Componente de salida de pantalla de flujo: Sección
• Ayuda de Salesforce: Consideraciones sobre la visibilidad condicional del flujo
• Ayuda de Salesforce: Validar la entrada del usuario en las pantallas de flujo