We will learn to create a clock in Canvas App / Power App. Before we start, make sure to subscribe to CRM Crate so that you can stay up to date in the field of Power Apps.

Steps to create a clock in Canvas App / Power App

Follow the below given procedure for creating a new custom clock in Canvas App.

Step 1 – Insert a Timer Control for creating a clock in Canvas App

• Open a Canvas App as per the requirement in Power Apps Studio (https://make.powerapps.com/).
• In the App’s screen, insert a new Timer control as shown below.

Step 2 – Set “Duration” property of Timer control

• Our timer control should display the current value for each fraction of second. Thus we will set the duration of the Timer control to 1 second or 1000 milisecond.
• Navigate to the “Duration” property and set the value as “1000”.

Step 3- Configure the Timer to auto-set current time value after restart

• Since we have configured the Timer’s duration as “1000”, this means that out Timer will end and restart for every 1 second.
• Therefore, we will set the current DateTime stamp during the end of our Timer.
• Navigate to the “OnTimerEnd” property of the Timer control and configure it with the below given Power FX formula.

Set(varTimeData, Now())

Step 4 – Configure the AutoStart & Repeat property

• Our Timer should automatically start after every fraction of second.
• Thus, navigate to the “AutoStart” & “Repeat” property and set it to “true” as shown below.

Step 4 – Configure the Clock’s format

• Microsoft provides multiple DateTimeFormat such as LongTime, LongTime24, ShortTime, ShortTime24, UTC etc.
• Navigate to the “Text” property of the Timer’s control and configure the time format as per your requirement.
• In our scenario, we have configured our clock in three different formats as shown below.

Text(varTimeData, DateTimeFormat.ShortTime)

Text(varTimeData, DateTimeFormat.LongTime)

Text(varTimeData, DateTimeFormat.LongDateTime24)

Validate the implementation in Preview / Power Apps Studio

Once the clock is configured, play the Canvas App and validate whether the clock is working as per the implementation.

Thus, we learned to create a clock in Canvas App / Power App.

• LinkedIn
• Facebook
• Telegram