Mejorar el aspecto de las pantallas
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Definir los botones de 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 ver solo algunas condiciones.
- Configurar un componente de pantalla para aceptar solo las entradas válidas.
En este módulo, ha creado un flujo que realiza muchas preguntas a los agentes de asistencia y luego crea un caso. Está bien, pero podemos mejorarlo. Podemos hacer que sea mejor, más sólido, más rápido... O por lo menos podemos hacer que sea más ordenado, fácil de usar y que respete mejor los requisitos de datos. Vamos a desbloquear todo el potencial de su flujo de pantalla.
Definir botones de pie de página en una pantalla
Los agentes de asistencia de Pyroclastic están teniendo problemas a la hora de ejecutar el flujo Create Case for Contact (Crear caso para contacto). Cuando hacen clic en Finish (Finalizar) en la última pantalla, el flujo se reinicia de repente y no saben qué hacer. A veces, se generan dos nuevos casos en lugar de uno. Después de un poco de investigación e intentar resolver el problema, Flo se da cuenta que el problema se produce cuando un agente hace clic en el botón Previous (Anterior) en la pantalla final. Eche un vistazo al flujo de nuevo.
Si un usuario hace clic en el botón Previous (Anterior), vuelve a la pantalla anterior, que en este caso es Questions Page 2 (Preguntas, página 2). Cuando el usuario hace clic en Next (Siguiente) para continuar, el flujo ejecuta de nuevo el elemento Create Case (Crear caso), pero no queremos que ocurra esto.
La práctica recomendada es hacer que los flujos sean lo más transparentes y fáciles de manejar posibles. Elimine botones innecesarios y asigne una etiqueta a cada botón que describa lo que ocurre cuando un usuario hace clic en él.
Vamos a personalizar los botones de las pantallas Questions Page 2 (Preguntas, página 2) y File Upload (Carga de archivos), y vamos a ocultar ese peligroso botón Previous (Anterior) de la pantalla File Upload (Carga de archivos).
- Abra el flujo Create Case for Contact (Crear caso para contacto).
- En el elemento Questions Page 2 (Preguntas, página 2), asegúrese de que no haya componentes seleccionados en el lienzo de la pantalla.
- En la barra lateral Screen Properties (Propiedades de la pantalla), haga clic en Configure Footer (Configurar pie de página).
- Para Next or Finish Button (Botón Siguiente o Finalizar), seleccione Use a custom label (Usar una etiqueta personalizada).
- Para Next or Finish Button (Botón Siguiente o Finalizar), introduzca
Create Case
(Crear caso).
- Haga clic en Done (Listo).
- En el elemento File Upload (Carga de archivos), asegúrese de que no haya componentes seleccionados en el lienzo de la pantalla.
- En la barra lateral Screen Properties (Propiedades de la pantalla), haga clic en Configure Footer (Configurar pie de página).
- Para Next or Finish Button (Botón Siguiente o Finalizar), seleccione Use a custom label (Usar una etiqueta personalizada).
- Para Next or Finish Button (Botón Siguiente o Finalizar), introduzca
Restart
(Reiniciar).
- En Previous Button (Botón Anterior), seleccione Hide Previous (Ocultar anterior).
- Haga clic en Done (Listo) y guarde el flujo.
Ahora, cuando se ejecuta la pantalla Questions Page 2 (Preguntas, página 2) del flujo, el botón Next (Siguiente) indica al usuario lo que ocurre exactamente al hacer clic en él: que el flujo crea un caso.
Cuando se ejecuta la pantalla File Upload (Carga de archivos) en el flujo, el botón Finish (Finalizar) muestra una etiqueta más clara Restart (Reiniciar) y el botón Previous (Anterior) está oculto.
Organizar componentes en filas y columnas
Flo ha incrustado el flujo Create Case for Contact (Crear caso para contacto) en la columna más ancha de una página Lightning de contacto. Ahora, la pantalla de flujo contiene un montón de espacio en blanco sin usar. Además, en la segunda pantalla hay bastantes preguntas, lo que ocupa demasiado espacio en vertical. ¿Cómo podemos usar el espacio de la pantalla de manera más eficiente?
El componente Section (Sección) permite dividir una pantalla de flujo en varias columnas para poder colocar componentes en paralelo y utilizar el espacio vacío en horizontal. En el componente Section (Sección), se define la cantidad de columnas y el ancho relativo de cada una de ellas.
Agregue componentes Section (Sección) a sus pantallas para utilizar todo ese espacio adicional.
Actualizar la pantalla de preguntas
- Abra el elemento Questions (Preguntas).
- Arrastre Section (Sección) desde la barra lateral Components (Componentes) hasta la parte superior del lienzo de la pantalla.
- En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna).
- Arrastre el componente de texto para mostrar SayThisText a la primera columna vacía.
El elemento resaltado en verde muestra la sección que está activa a medida que se mueve por el lienzo. Suelte el componente en la primera columna cuando aparezca resaltada.
- Arrastre el componente de área de texto largo Problem Description (Descripción del problema) a la primera columna, debajo de SayThisText.
- Arrastre el componente de texto Case Subject (Asunto del caso) hasta la segunda columna.
- Arrastre el componente de opción CloseCase hasta la segunda columna, debajo de ScreenSubject.
Este debería ser el aspecto del lienzo de su pantalla.
- Haga clic en Done (Listo).
Actualizar la pantalla Questions Page 2 (Preguntas, página 2)
- Abra el elemento Questions Page 2 (Preguntas, página 2).
- Arrastre Section (Sección) desde la barra lateral Components (Componentes) hasta la parte superior del lienzo de la pantalla.
- En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna).
- Defina Column 1 Width (Ancho de columna 1) en 9 de 12.
- Arrastre el componente de tabla de datos Point of Contact (Punto de contacto) a la primera columna.
- Arrastre el componente de botones de opción What priority would the customer assign to this case (Prioridad que asignaría el cliente a este caso) hasta la segunda columna.
- Arrastre otro componente Section (Sección) desde la barra lateral de componente hasta el lienzo de la pantalla, debajo del primer componente Section (Sección).
- En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna) dos veces.
La segunda sección contiene ahora tres columnas.
- Cambie el ancho de las columnas:
- Column 1 Width (Ancho de columna 1): 3 de 12
- Column 2 Width (Ancho de columna 2): 3 de 12
- Column 3 Width (Ancho de columna 3): 6 de 12 (la mitad)
- Arrastre el componente de búsqueda QA Reviewer (Revisor de control de calidad) hasta la primera columna de la segunda sección.
- Arrastre el componente de campo de registro Case Reason (Motivo del caso) hasta la segunda columna de la segunda sección.
- 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é franjas horarias podemos llamar al cliente para realizar un seguimiento si es necesario?) a la tercera columna de la segunda sección.
Este debería ser el aspecto del lienzo de la pantalla.
- Haga clic en Done (Listo) y guarde el flujo.
Para ver las nuevas pantallas organizadas en acción, guarde el flujo y haga clic en Run (Ejecutar). Qué bonita ha quedado esta pantalla, ¡es el Miguel Ángel de los flujos!
Controlar la aparición de los componentes
Al igual que los componentes de páginas Lightning, los componentes de pantalla de flujo pueden configurarse con visibilidad condicional. Cuando agrega la opción de visibilidad condicional a un componente, el flujo solo muestra el componente cuando se cumplen las condiciones especificadas. Estas condiciones pueden hacer referencia a cualquier cosa del flujo, incluidos otros componentes de la misma pantalla.
Los agentes de asistencia de Pyroclastic no necesitan ver las franjas de seguimiento a menos que seleccionen un motivo que vaya a requerir un seguimiento. Así que vamos a simplificar el flujo con un poco de visibilidad condicional.
- Abra el elemento Questions Page 2 (Preguntas, página 2) y seleccione el componente de grupo de casillas de verificación CallbackTimes.
- Haga clic en Set Component Visibility (Definir la visibilidad del componente).
- En When to Display Component (Cuándo mostrar el componente), seleccione All Conditions Are Met (AND) [Se cumplen todas las condiciones (AND)].
- En Resource (Recurso), seleccione caseVar> Reason (Motivo).
- Para Operator (Operador), seleccione Equals (Es igual a).
- En Value (Valor), introduzca
Equipment Complexity,Performance,Breakdown,Equipment Design,Other
.
Estos valores corresponden a todas las opciones de esta lista de selección, excepto Installation (Instalación) y Feedback (Comentarios). Al introducir todas las opciones separadas por comas, Salesforce trata cada valor como una opción válida. También puede definir When to Display Component (Cuándo 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 independiente.
- En la ventana emergente, haga clic en Done (Listo).
- Haga clic en Done (Listo) para cerrar el elemento de pantalla.
- Guarde el flujo.
Ahora, cuando Case Reason (Motivo del caso) esté establecido en un valor que no sea Installation (Instalación) o Feedback (Comentarios), aparecerá el componente CallbackTimes. Cambie el motivo del caso a Installation (Instalación) o Feedback (Comentarios) para que la pregunta desaparezca. Haga clic en el botón Run (Ejecutar), vaya a la segunda pantalla y pruébela usted mismo.
Mejorar la calidad de los datos en los componentes
Los agentes de asistencia de Pyroclastic tienen una última solicitud para el flujo Create Case for Contact (Crear caso para contacto). Algunas descripciones de casos son muy breves y no tienen información suficiente sobre la llamada. Flo le pide que implemente un requisito de mínimo de caracteres en el campo de descripción.
Por suerte, se puede agregar un proceso de validación a los componentes de la pantalla. Es como agregar una regla de validación a cada componente. No obstante, hay una diferencia importante.
- Las reglas de validación se activan cuando su fórmula devuelve el valor TRUE.
- Las validaciones de componentes de pantalla se activan cuando su fórmula devuelve el valor FALSE.
Vamos a agregar un mínimo de 20 caracteres al componente Problem Description (Descripción del problema).
- Abra el elemento Questions (Preguntas) y seleccione el componente Problem Description (Descripción del problema).
- En el panel de propiedades, haga clic en Validate Input (Validar entrada).
- En Error Message (Mensaje de error), escriba
Please add more detail.
(Incluya más detalles.). - En Formula (Fórmula), introduzca
LEN({!ScreenDescription}) >= 20
- Haga clic en Done (Listo) y guarde el flujo.
Ahora, cuando un usuario introduce una descripción con menos de 20 caracteres, aparece un mensaje de error en el flujo que impide que el usuario continúe hasta que se agregue más texto. Por supuesto, con esto no se garantiza que se agregue información relevante, pero al menos es un recordatorio amable difícil de ignorar.
En esta insignia, ha aprendido a crear un flujo de pantalla. A continuación, consulte la insignia Distribución de los flujos de pantalla para aprender a integrar flujos de pantalla cuando los usuarios los necesiten.
Recursos
- Ayuda de Salesforce: Flow Screen Output Component: Section (Componente de resultado de flujo de pantalla: sección)
- Ayuda de Salesforce: Flow Conditional Visibility Considerations (Consideraciones sobre la visibilidad condicional de los flujos)
- Ayuda de Salesforce: Validate User Input on Flow Screens (Validar la entrada de los usuarios en los flujos de pantalla)