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

Esse tutorial ilustra como criar e exibir uma chamada por 10 segundos, enquanto mostra a contagem regressiva para ele, sempre que um determinado elemento de interface gráfica aparecer durante a automação. Usaremos o aplicativo de Clima aqui 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 uma chamada.
   2. Nomeie o texto explicativo como Basic callout.
   3. No painel Componentes , expanda a seção Básico e arraste três componentes do Rótulo/Cabeçalho para o arquivo do 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 sejam executados quando seu 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 sejam executados quando seu evento de disparo ocorrer.
4. Crie um novo fluxo de trabalho chamado Mostrar texto explicativo básico e adicione uma atividade Application Event Trigger .
   1. Selecione Indicar Destino na Tela e indique o logotipo do UiPath para que a automação inicie o monitoramento. Para este exemplo, indicamos o logotipo UiPath, que queremos monitorar.
   2. Na lista suspensa Tipo de evento , selecione Apareceu.
   3. Adicione uma atividade Show Callout . Essa atividade permite selecionar um arquivo uiform que você pode exibir para um determinado elemento de interface gráfica, além de passar dados para o arquivo uiform usando um dicionário de argumentos .

      1. Na lista suspensa Selecionar formulário , selecione o arquivo de chamada 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 Window, ao qual queremos vincular o texto explicativo.

         Para acessar esse elemento de destino, use a expressão TriggerEventArgs.TargetElement . TriggerEventArgs é um argumento aqui, que é gerado automaticamente ao adicionar uma atividade Trigger em seu fluxo de trabalho. Nesse 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 callout.
   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 salvar , insira 10.
5. Crie outro fluxo de trabalho de gatilho, chamado Atualizar contador, que dispara a atualização dos segundos restantes dentro da chamada.

   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 a quantidade de segundos restantes para a exibição do texto explicativo até que a variável secondsLeft se torne 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 de 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 como um segundo.
      3. Adicione uma atividade Assign para subtrair um segundo da variável global secondsLeft .
      4. Defina a Condição de Do While como secondsLeft <> 0.

   3. Adicione uma atividade Fechar formulário 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 persistentes em um loop contínuo sem parar.

Resultado

A automação abre o site do Window 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é que não reste nenhum segundo. Esse processo de runtime é visualizado na seguinte imagem animada:

Figura 1. Imagem animada mostrando um texto explicativo 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 Airy.