Skip to main content
Únase a nosotros en TDX, en San Francisco, o en Salesforce+ los días 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

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.
Nota

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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

Nota

Esta insignia es una parada en el camino hacia el dominio de Flow Builder. La ruta Crear flujos con Flow Builder le guía de principio a fin por todos los conceptos sobre Flow Builder. Siga esta secuencia recomendada de insignias para desarrollar capacidades sólidas de automatización de procesos y convertirse en experto de Flow Builder.

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.

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.

Una sección del flujo donde vemos la página 2 de las preguntas, seguida de Create Case (Crear caso) y la pantalla de carga de archivos.

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

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

El botón de la pantalla Questions Page 2 (Preguntas, página 2) con la etiqueta Create Case (Crear 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.

El botón de la pantalla File Upload (Carga de archivos) que tiene la etiqueta Restart (Reiniciar). No hay ningún botón con la etiqueta Previous (Anterior).

Nota

La sección Configure Footer (Configurar pie de página) también incluye ajustes para el botón Pause (Poner en pausa), pero este no aparece a menos que se active en la configuración de la organización. Con este botón, los usuarios pueden detener el progreso de un flujo y guardar el flujo para reanudarlo en otro momento. Para obtener más información, consulte Prepare Your Org for Paused Flow Interviews (Preparar la organización para entrevistas de flujo en pausa) de la Ayuda de Salesforce.

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

  1. Abra el elemento Questions (Preguntas).
  2. Arrastre Section (Sección) desde la barra lateral Components (Componentes) hasta la parte superior del lienzo de la pantalla.
  3. En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna).
    El lienzo de la pantalla con el componente Section (Sección) dividido en dos columnas.
  4. 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.
    Una columna de Section (Sección) resaltada en verde al arrastrar un componente hasta ella.
  5. Arrastre el componente de área de texto largo Problem Description (Descripción del problema) a la primera columna, debajo de SayThisText.
  6. Arrastre el componente de texto Case Subject (Asunto del caso) hasta la segunda columna.
  7. 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.
    El elemento Questions (Preguntas) con los componentes organizados en columnas según los pasos indicados anteriormente.
  8. Haga clic en Done (Listo).

Actualizar la pantalla Questions Page 2 (Preguntas, página 2)

  1. Abra el elemento Questions Page 2 (Preguntas, página 2).
  2. Arrastre Section (Sección) desde la barra lateral Components (Componentes) hasta la parte superior del lienzo de la pantalla.
  3. En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna).
  4. Defina Column 1 Width (Ancho de columna 1) en 9 de 12.
  5. Arrastre el componente de tabla de datos Point of Contact (Punto de contacto) a la primera columna.
  6. 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.
  7. 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).
  8. En la barra lateral Section (Sección), haga clic en +Add Column (+Agregar columna) dos veces.
    La segunda sección contiene ahora tres columnas.
  9. 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)
  1. Arrastre el componente de búsqueda QA Reviewer (Revisor de control de calidad) hasta la primera columna de la segunda sección.
  2. Arrastre el componente de campo de registro Case Reason (Motivo del caso) hasta la segunda columna de la segunda sección.
  3. 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.
    El elemento Questions Page 2 (Preguntas, página 2) con los componentes organizados en columnas según los pasos indicados anteriormente.
  4. 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!

La pantalla Questions Page 2 (Preguntas, página 2) cuando se ejecuta el flujo Create Case for Contact (Crear caso para contacto).

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.

  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 (Definir la visibilidad del 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. En Resource (Recurso), seleccione caseVar> Reason (Motivo).
  5. Para Operator (Operador), seleccione Equals (Es igual a).
  6. 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.
    La ventana emergente New Condition (Nueva condición) de la sección Set Component Visibility (Definir la visibilidad del componente) de la barra lateral, con los ajustes que se corresponden con los pasos anteriores.
  7. En la ventana emergente, haga clic en Done (Listo).
  8. Haga clic en Done (Listo) para cerrar el elemento de pantalla.
  9. 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.

Ejemplo 1: Si no hay ningún motivo del caso, no se muestran las franjas horarias. Ejemplo 2: Si se especifica el motivo del caso, se muestran las franjas horarias.

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

  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. En Error Message (Mensaje de error), escriba Please add more detail. (Incluya más detalles.).
  4. En Formula (Fórmula), introduzca LEN({!ScreenDescription}) >= 20
    La sección Validate Input (Validar entrada) de la barra lateral, con los ajustes correspondientes a los pasos anteriores.
  5. 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.

Cuando la descripción del problema no cumple los requisitos (solo tiene 16 caracteres), aparece el mensaje "Please add more detail" (Incluya más detalles).

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

Reto práctico

+500 puntos

Prepararse

Completará esta/este unidad en su propia organización de prácticas. Haga clic en Iniciar para empezar a trabajar o haga clic en el nombre de su organización para seleccionar otro diferente.

Su reto

Add Guidance to Your Flow
If you haven’t already completed the challenge in unit 4 (Add More Options to Your Screens), do that now. Otherwise, you won't be able to complete this challenge.
In the New Bot Opp flow, add input validation and a warning message that disappears when it’s no longer needed.
  • In the New Bot Opp flow’s Opp Fields screen, add input validation to the Estimated_Close_Date component:
    • Error Message: You can't backdate an opportunity.
    • Formula: {!Estimated_Close_Date} >= TODAY()
  • Add a Display Text component immediately below the Next_Steps component:
    • API Name: NextStepsWarning
    • Text: You didn't select any Next Steps. Your manager may visit you to confirm your plan of action.
  • Set the visibility of the NextStepsWarning component:
    • When to Display Component: All Conditions Are Met (AND)
    • Resource: Next_Steps
    • Operator: Is Null
    • Value: $GlobalConstant.True
  • Save and activate the flow.
Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios