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.
