Original

Visão Geral

O Timer é utilizado para tomar ações ou alterar algum aspecto da aplicação baseados no tempo. 

O controlador pode ser utilizado de várias forma diferentes dependendo da necessidade da organização, neste artigo vamos explorar algumas opções de utilização. 

Adicionando Timer 

O controle é adicionado pela barra de ferramentas na guia Input selecionando Timer.

Configurações Padrão

Com a adição do controle, clicando sobre o botão iniciar e parar a contagem progressiva do tempo.  
Como todo controle no Powerapps ele suporta uma alteração de propriedades e pode ser usado em outros controles e objetos. 

Adicionando Controle em Botão

No primeiro cenário será usado botões separados para iniciar e controlar o cronometro, na primeira tela foram adicionados, dois botões chamados btnTimerStart e btnTimerReset que serão utilizados para iniciar e zerar o cronometro e um Timer chamado tmrManual. 
Será utilizado uma variável global chamada varTimerControl, para alterar as configurações do cronometro. No primeiro nó da aplicação clique nos três pontos e acesse a propriedade Run OnStart. 

Para criar a variável é utilizado a função Set, para inicar a variável global com o valor da false

Set(varTimerControl,false)

No btnTimerStart será o botão de controle inicio e pausa do cronometro, na propriedade OnSelect adicione a função

If(varTimerControl=true,Set(varTimerControl,false),Set(varTimerControl,true))

Para implementar o ação no cronometro, selecione o tmrManual e adicione a propriedade Start, altere o valor padrão de false para o valor da variável criada no Run OnStart. 

varTimerControl

Para desabilitar o padrão do cronometro de iniciar quando clicar sobre ele, altere a propriedade DisplayMode de Edit para View.

Inicie a aplicação selecionando o botão de inicio o cronometro deve iniciar e parar. 

No botão btnTimerReset adicione a ação de zerar o cronometro, selecione a propriedade OnSelect e adicione a função

Reset(tmrManual)

Nomeando os Botões

Em seguida para exibir aos usuários as funções dos botões, altere as propriedades de Text. 

Para o btnTimerReset será alterado para "Reset", 

O botão btnTimerStart possui duas funções, o de inicio e pause do cronometro, podemos adicionar uma função If para exibir os textos dependendo da ação do botão. Na propriedade texto

If(varTimerControl=true,Set(varTimerControl,false),Set(varTimerControl,true))

Trabalhando com Contagem Regressiva 

Outra forma de trabalho do cronometro é na forma regressiva, pode duplicar a tela existente e renomear os objetos da app o Timer para tmrCountdown, o botão de inicio btnTimerStartCountdown e o botão de reset btnTimerResetCountdown



Para alterar o comportamento do cronometro basta alterar a propriedade Text e utilizar outra propriedade do Timer chamada Duration. Clique no Timer tmrCountdown e selecione a propriedade Text, e adicione na formula. 

Text(Time(0, 0, (tmrCountdown.Duration - Self.Value)/1000), "[$-en-US]hh:mm:ss")

Com a alteração o controlador do cronometro será atualizado com o marcador 00:00:06, que é o valor padrão do propriedade Duration. 

Um ponto de atenção é que os valores são representados em milesegundos, 

O cronometro também pode ser usado para alterar a exibição de outros controladores, adicione um segundo controler do tipo Ratting rtgCountdown

Para garantir a quantidade de estrelas iguais ao tempo total do cronometro altere a propriedade Max para o valor

tmrCountdown.Duration/1000

O objetivo é exibir a passagem de segundos e alterar a quantidade de estrelas preenchidas, em Default adicione 

(tmrCountdown.Duration - tmrCountdown.Value)/1000

Quando o cronometro chega a zero, todas as estrales estão apagadas, mas o botão de inicio não volta para o nome de Start.

Para corrigir o nome do botão podemos usar uma propriedade do Timer chamada OnTimerEnd, selecione o tmrCountdown e altere a propriedade para modificar a variável de controle para false.

Set(varTimerControl,false)

Podemos adicionar uma caixa de texto dentro da aplicação para permitir ao usuário modificar o tempo do cronometro, adicione um controle de Text Input e configure o nome txtTimerInput. 

Para utilizar o valor do txtTimerInput como duração do cronometro selecione o tmrCountdown e altere a propriedade Duration para utilizar o valor digitado na caixa de texto.

Value(txtTimerInput.Text)*1000

Modificando o tempo do texto são alterados os valores no cronometro e também na quantidade de estrelas do rtgCountdown

Ainda podemos garantir que os usuários não consigam adicionar caracteres não numéricos na caixa de texto. 
Para isto existe uma propriedade que pode ser usada para garantir que a caixa aceite somente valores numéricos, selecione o txtTimerInput e na propriedade Format configure a opção. 

TextFormat.Number

Artigos Relacionados

Power Platform: Guia de Sobrevivencia
PowerApps Controls: Timer

Referências

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-timer
https://powerusers.microsoft.com/t5/Building-Power-Apps/Configurable-countdown-timer-with-progress-bar/td-p/130005