Criação e exibição de uma chamada de contagem regressiva

Este tutorial ilustra como criar e exibir uma chamada por 10 segundos, enquanto mostra a contagem regressiva para ela, sempre que um determinado elemento de interface gráfica aparecer durante a automação. Usaremos o aplicativo de tempo com Vento como um exemplo, em que uma chamada será exibida ao lado de seu logotipo.

Pré-requisitos

Esse exemplo foi criado usando os seguintes pacotes de atividades e versões:

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

Etapas

1. Crie o arquivo do texto explicativo:
   1. Abra seu projeto do Studio e, no menu suspenso Novo , selecione Formulário para criar um novo formulário.

      O arquivo de formulário é usado aqui como um texto explicativo.

   2. Nomeie o texto explicativo como Basic callout.
   3. No painel Componentes , expanda a seção Básico e arraste três componentes de Rótulo/Cabeçalho para dentro do arquivo de texto explicativo.
      • Para o primeiro componente, insira um texto padrão, como: Welcome to Windy.com!
      • Para o segundo componente, insira um texto padrão, como: This pop-up will close in 10 seconds.
      • Para o terceiro componente, deixe-o inalterado. Esta é a contagem regressiva, que será alterada no runtime.
   4. Salve os componentes e o arquivo da chamada.
2. Abra o fluxo de trabalho Principal em seu projeto.
   1. Adicione uma atividade Use Application/Browser e insira "https://www.windy.com/" no campo URL do Navegador .
   2. Adicione uma atividade Run Local Triggers . Isso habilita todos os fluxos de trabalho de gatilho e permite que eles sejam executados quando o evento de disparo ocorrer.
3. Abra o fluxo de trabalho Principal em seu projeto.
   1. Adicione uma atividade Use Application/Browser e insira "https://www.windy.com/" no campo URL do Navegador .
   2. Adicione uma atividade Run Local Triggers . Isso habilita todos os fluxos de trabalho de gatilho e permite que eles sejam executados quando o evento de disparo ocorrer.
4. Crie um novo fluxo de trabalho chamado Show Basic Callout e adicione uma atividade Application Event Trigger .
   1. Selecione Indicar destino na tela e indique o logotipo do Vento para a automação iniciar o monitoramento.

      Para este exemplo, indicamos o logotipo Vento, que queremos monitorar.

   2. Na lista suspensa Tipo de evento , selecione Apareceu.
   3. Adicione uma atividade Show Callout .
      Esta atividade permite que você selecione um arquivo uiform , que você pode exibir para um determinado elemento de interface gráfica, assim como passar dados para o arquivo uiform , usando um dicionário de argumentos .
      1. Na lista suspensa Selecionar formulário , selecione o arquivo de texto explicativo que você criou anteriormente.
         Para esse exemplo, selecionamos Basic callout.
      2. Para o campo Elemento de Interface Gráfica , insira o elemento de interface gráfica indicado para a atividade Application Event Trigger , que é o logotipo Vento, ao qual queremos vincular a chamada.
         Para acessar esse elemento de destino, use a expressão TriggerEventArgs.TargetElement . TriggerEventArgs é um argumento aqui, que é gerado automaticamente ao adicionar uma atividade de gatilho em seu fluxo de trabalho. Neste caso, a atividade Application Event Trigger gera o argumento.
   4. Navegue até o Data Manager e crie uma variável global chamada secondsLeft.

      Essa variável é usada para rastrear o tempo restante para exibir o texto explicativo.

   5. Adicione uma atividade Assign para alocar a duração de exibição para seu texto explicativo. No campo Salvar em , insira a variável global recém-criada (secondsLeft) e no campo Valor a ser salvo , insira 10.
5. Crie outro fluxo de trabalho de gatilho, chamado Atualizar contador, que dispara a atualização dos segundos restantes dentro do texto explicativo.
   1. Adicione uma atividade Global Variable Changed Trigger para executar esse fluxo de trabalho sempre que a variável global secondsLeft for alterada.
      Na lista suspensa Selecionar variável global , selecione secondsLeft e defina o Modo de agendamento como Sequencial.
   2. Adicione uma atividade Do While para atualizar o número de segundos restantes para a exibição da chamada até que a variável secondsLeft torne-se 0.
      1. No corpo da atividade Do While , adicione uma atividade Set Form Values . Na lista suspensa Selecionar formulário , selecione o arquivo Basic Callout . Abra o dicionário Argumentos e, para o campo Valor da chave secondsValue , insira a seguinte expressão: "secondsLeft.ToString+" second(s) left."
      2. Adicione uma atividade Delay e defina-a para um segundo.
      3. Adicione uma atividade Assign para subtrair um segundo da variável global secondsLeft .
      4. Defina a Condição da atividade Do While como secondsLeft <> 0.
   3. Adicione uma atividade Close Form e selecione o arquivo Basic Callout .
   4. Adicione uma atividade Stop Local Triggers para interromper a execução de todos os fluxos de trabalho de gatilho.

      Essa atividade é especialmente importante se seu projeto consistir apenas em fluxos de trabalho de gatilho. Sem incorporar essa atividade, os gatilhos serão executados persistentemente em um loop contínuo sem parar.

Resultado

A automação abre o site do Vento e aciona o fluxo de trabalho Mostrar texto explicativo básico assim que o logotipo aparece. Quando a variável global é definida como 10, o fluxo de trabalho Atualizar contador começa a ser executado, subtraindo um segundo da variável global e exibindo-a no texto explicativo por um segundo. Isso continua até não haver mais nenhum segundo. Esse processo de runtime é visualizado na seguinte imagem animada:

Figura 1. Imagem animada mostrando uma chamada exibindo um temporizador

Exemplo de fluxo de trabalho

Para verificar como as etapas neste tutorial são implementadas, baixe o seguinte projeto de exemplo: Exibir contagem regressiva do texto explicativo para Vento.