Crear y mostrar una llamada de cuenta atrás

Este tutorial ilustra cómo crear y mostrar una llamada durante 10 segundos, al tiempo que muestra la cuenta atrás para ella, cada vez que aparece un determinado elemento de la IU durante la automatización. Utilizaremos la aplicación Windy weather como ejemplo en el que se mostrará una llamada junto a su logotipo.

Requisitos previos

Este ejemplo se creó utilizando estos paquetes de actividades y versiones:

• UiPath.Callout.Activities 25.2.0
• UiPath.System.Activities 25.2.0
• UiPath.UIAutomation.Activities 25.2.1-preview

Pasos

1. Crea el archivo de llamada:
   1. Abre tu proyecto de Studio y, en el menú desplegable Nuevo , selecciona Formulario para crear un nuevo formulario.

      El archivo de formulario se utiliza aquí como llamada.

   2. Nombra la llamada como Basic callout.
   3. En el panel Componentes , expande la sección Básico y arrastra tres componentes Etiqueta/Encabezado al archivo de llamada.
      • Para el primer componente, introduce un texto predeterminado, como: Welcome to Windy.com!
      • Para el segundo componente, introduce un texto predeterminado, como: This pop-up will close in 10 seconds.
      • Para el tercer componente, déjalo sin cambios. Esta es la cuenta atrás, que se cambiará en tiempo de ejecución.
   4. Guarda los componentes y el archivo de llamada.
2. Abre el flujo de trabajo principal en tu proyecto.
   1. Añade una actividad Usar aplicación/navegador e introduce "https://www.windy.com/" en el campo URL del navegador .
   2. Añade una actividad Ejecutar desencadenadores locales . Esto habilita todos los flujos de trabajo de desencadenador y les permite ejecutarse cuando se produce su evento de desencadenamiento.
3. Abre el flujo de trabajo principal en tu proyecto.
   1. Añade una actividad Usar aplicación/navegador e introduce "https://www.windy.com/" en el campo URL del navegador .
   2. Añade una actividad Ejecutar desencadenadores locales . Esto habilita todos los flujos de trabajo de desencadenador y les permite ejecutarse cuando se produce su evento de desencadenamiento.
4. Crea un nuevo flujo de trabajo llamado Mostrar llamada básica y añade una actividad Desencadenador de eventos de aplicación .
   1. Selecciona Indicar destino en pantalla e indica el logotipo de Windy para que la automatización comience a supervisar.

      Para este ejemplo, indicamos el logotipo de Windy, que queremos supervisar.

   2. En la lista desplegable Tipo de evento , selecciona Aparecido.
   3. Añade una actividad Mostrar llamada .
      Esta actividad te permite seleccionar un archivo uiform , que puedes mostrar en un determinado elemento de la IU, así como pasar datos al archivo uiform , utilizando un diccionario de Argumentos .
      1. En la lista desplegable Seleccionar formulario , selecciona el archivo de llamada que creaste anteriormente.
         Para este ejemplo, seleccionamos Basic callout.
      2. Para el campo Elemento de IU , introduce el elemento de IU indicado para la actividad Desencadenador de eventos de aplicación , que es el logotipo de Windy, al que queremos vincular la llamada.
         Para acceder a ese elemento de destino, utiliza la expresión TriggerEventArgs.TargetElement . TriggerEventArgs es un argumento aquí, que se genera automáticamente al añadir una actividad de desencadenador a tu flujo de trabajo. En este caso, la actividad Desencadenador de eventos de la aplicación genera el argumento.
   4. Navega hasta Data Manager y crea una variable global, llamada secondsLeft.

      Esta variable se utiliza para realizar un seguimiento del tiempo restante para mostrar la llamada.

   5. Añade una actividad Asignar para asignar la duración de visualización de tu llamada. En el campo Guardar en , introduce la variable global recién creada (secondsLeft), y en el campo Valor para guardar , introduce 10.
5. Crea otro flujo de trabajo de desencadenador, llamado Actualizar contador, que desencadena la actualización de los segundos restantes dentro de la llamada.
   1. Añade una actividad Desencadenador de cambio de variable global para ejecutar este flujo de trabajo cada vez que cambie la variable global secondsLeft .
      En la lista desplegable Seleccionar variable global , selecciona secondsLeft y establece el Modo de programación en Secuencial.
   2. Añade una actividad Hacer mientras para actualizar el número de segundos restantes para la visualización de la llamada hasta que la variable secondsLeft se convierta en 0.
      1. En el cuerpo de la actividad Hacer mientras , añade una actividad Establecer valores de formulario . En la lista desplegable Seleccionar formulario , selecciona el archivo Basic Callout . Abre el diccionario Argumentos y, para el campo Valor de la clave secondsValue , introduce la siguiente expresión: "secondsLeft.ToString+" second(s) left."
      2. Añade una actividad de Retraso y establécela en un segundo.
      3. Añade una actividad Asignar para restar un segundo de la variable global secondsLeft .
      4. Establece la Condición de Hacer Mientras en secondsLeft <> 0.
   3. Añade una actividad Cerrar formulario y selecciona el archivo Basic Callout .
   4. Añade una actividad Detener desencadenadores locales para detener la ejecución de todos los flujos de trabajo de desencadenadores.

      Esta actividad es especialmente importante si tu proyecto consiste únicamente en flujos de trabajo de desencadenador. Sin incorporar esta actividad, los desencadenadores se ejecutarán de forma persistente en un bucle continuo sin detenerse.

Resultado

La automatización abre el sitio web de Windy y activa el flujo de trabajo Mostrar llamada básica una vez que aparece el logotipo. Cuando la variable global se establece en 10, el flujo de trabajo Actualizar contador comienza a ejecutarse, restando un segundo de la variable global y mostrándola en la llamada durante un segundo. Esto continúa hasta que no quedan segundos. Este proceso de tiempo de ejecución se visualiza en la siguiente imagen animada:

Figura 1. Imagen animada que muestra una llamada que muestra un temporizador

Ejemplo de flujo de trabajo

Para comprobar cómo se implementan los pasos de este tutorial, descarga el siguiente proyecto de ejemplo: Mostrar cuenta atrás de llamada para Windy.