Make A Time Picker In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/make-a-time-picker-in-power-apps/. Author: Matthew Devaney.

Make A Time Picker In Power Apps Posted by - Matthew Devaney on - November 16, 2020 90 Comments

I often wonder why there is not any Time Picker control included in Power Apps. Date and Time values are found in almost every app I’ve ever made and I’m not alone. At least 14,000 people have read this forum post looking for an answer. Yet, we still have to build it ourselves. In this article, I will show you how to make a Time Picker in Power Apps as shown in the image below. Building the Hours Gallery

A Time Picker control is something you will use over-and-over again so its best to build it as a canvas app component . Open Power Apps Studio and go to the Components screen. Create a new component called cmp_TimePicker .

The component cmp_TimePicker should have these properties. Fill : White Height : 430 Width : 285 Code language: HTTP ( http )

Next, add a new gallery to the component called gal_TimePicker_Hours .

The gallery should have the same height as the component and 1/3 of the width of the component to allow for hours, minutes and AM/PM. Use the properties below in the gallery. Fill : Transparent Height : Parent.Height TemplateSize : 60 Width : Parent.TemplateWidth/3 Code language: HTTP ( http )

To populate the gallery with Hours we can put a Sequence function in the Items property. We’ll format the number with a leading zero too for consistency.

ForAll(Sequence( 12 ), Text(Value, "[$-en-US]00" )) Code language: JavaScript ( javascript )

Now place a label called lbl_MobileTimePicker_Hours in the gallery with the code ThisItem.Value in the Text property to see the options for hours. Styling the Component

We should style the Hours gallery before moving onto the Minutes and AM/PM galleries. That way we can copy & paste the 1st gallery and code the style only once. Set the properties of lbl_TimePicker_Hours equal to the code shown below. Align : Center Color : Black Height : Parent.TemplateHeight Text : ThisItem.Value Width : Parent.TemplateWidth X : 0 Y : 0 Code language: HTTP ( http )

We want to change the color of the Hours gallery item to show what the user has selected. This component could be re-used in several apps so its a good idea to create new properties to control the label’s color and fill. Make two new input properties called SelectedColor and SelectedFill .

Then add this code to the properties for cmp_TimePicker . SelectedColor : White SelectedFill : DodgerBlue Code language: HTTP ( http )

Now that we’ve setup everything that’s needed our goal will be to make the TimePicker component behave like this.

Write this code in each respective property of lbl_TimePicker_Hours to get the desired result. Color : If ( ThisItem .IsSelected , cmp_TimePicker .SelectedColor , Black ) HoverColor : Self .Color PressedColor : Self .Color Fill : If ( ThisItem .IsSelected , cmp_TimePicker .SelectedFill , Transparent ) HoverFill : If (! ThisItem

.IsSelected , ColorFade ( cmp_TimePicker .SelectedFill , 70%)) PressedFill : Self .HoverFill Code language: CSS ( css )

Finally, to hide the scrollbar change the ShowScrollbar property of the gallery to false . The Hours gallery is now completed. Minutes & AM/PM Galleries

To create the minutes gallery copy & paste the hours gallery directly beside it. Rename the gallery to gal_TimePicker_Minutes .

Replace any code in the Items property with this code to generate the minutes values from 00 to 59.

ForAll(Sequence( 60 ), Text(Value -1 , "[$-en-US]00" )) Code language: JavaScript ( javascript )

To create the AM/PM gallery copy and paste once more and rename the gallery to gal_TimePicker_AMPM .

Put this code in the Items property of the gallery instead. [ "AM" , "PM" ] Code language: JSON / JSON with Comments ( json )

With all of the galleries created the last control to add is a label called lbl_TickerPicker_Border which will act as a border. Make sure the label is at the bottom of the tree view.

Use this code in the following properties of the label. BorderColor : Black BorderThickness : 4 Height : Parent.Height Width : Parent.Width X : 0 Y : 0 Code language: HTTP ( http ) Output A Time Value

Our component needs to output a time value once a user makes their selection. To do this click and highlight all three galleries…

… then write this code in the OnSelect property to set a variable to store the time.

Set ( varTimeValue, Time( Value(gal_TimePicker_Hours.Selected.Value) - If( Value(gal_TimePicker_Hours.Selected.Value)= 12 , 12 ) + If( gal_TimePicker_AMPM.Selected.Value = "PM" , 12 , 0

), Value(gal_TimePicker_Minutes.Selected.Value), 0 ) ) Code language: JavaScript ( javascript )

Now when you click on values in the gallery the time will be updated. To see how it works you can temporarily put a label inside the gallery with varTimeValue as the Text property. Delete the label once you’re done testing.

Create a new property called Value to give the ability to reference your time value in the app.

Then put this code in the Value property of cmp_TimePicker. varTimeValue Positioning Gallery Items

When the hours, minutes or AM/PM are clicked inside the gallery I want them to snap to the top of the component. We will need a new property called Default to accomplish this. Make sure to check the box that says Raise OnReset when value changes.

The Default value of cmp_TimePicker should be 01:00 AM unless otherwise defined. Do this by using Time(1, 0, 0) in the property.

Next comes some fairly complex code to define the selection positioning for each gallery. Put this code in the Default property of the Hours gallery. If ( cmp_TimePicker. Default =Blank() And varTimeValue=Blank(), // value when no default is supplied {Value: "01" },

// value when default is supplied or hours were clicked

With( { wTime: Coalesce( varTimeValue, cmp_TimePicker. Default ) }, LookUp( Self .AllItems.Value, Value = Text(

If (Mod(Hour(wTime), 12 )= 0 , 12 , Mod(Hour(wTime), 12 )), "[$-en-US]00" ) ) ) ) Code language: PHP ( php )

Then write this code in the Default property of the Minutes gallery.

With( { wTime: Coalesce( varTimeValue, cmp_TimePicker. Default ) }, LookUp(

Self .AllItems.Value, Value = Text( Minute(wTime), "[$-en-US]00" ) ) ) Code language: PHP ( php )

And use this code in the Default property of the AMPM gallery. With ( {

wTime : Coalesce ( varTimeValue, cmp_TimePicker.Default ) }, If (

Hour ( varTimeValue ) < 12, { Value : "AM" }, { Value : "PM" } ) ) Code language: CSS ( css )

When the user clicks the gallery we must reset it in order to show the clicked values at the top. Put this code in the OnReset property of cmp_TimePicker to do just that.

Reset(gal_TimePicker_Hours); Reset(gal_TimePicker_Minutes); Reset(gal_TimePicker_AMPM); Set (varTimeValue, Blank()) Code language: JavaScript ( javascript ) Using The Time Picker In An App

Now that we’ve completed the component lets try using it in an app. Place a new text box on the screen that we can display the time value in. I’ve added a clock icon to this text box to indicate a time value.

Add the Time Picker component and position it beside the text box.

To show the selected time inside the text input copy & paste this code into the text input’s Default property. Text ( cmp_Sample_MobileTimePicker .Value , ShortTime ) Code language: CSS ( css )

Insert a new label onto the screen to act as an overlay. When the user clicks it the component should disappear. Make sure the label is above the text input and below the Time Picker in the tree view.

Put this code in the following properties for the overlay.

OnSelect: Set (varShowTimePicker, false ) Visible : varShowTimePicker Code language: JavaScript ( javascript )

Use this code in the OnSelect property of the Text Input. Set (varShowTimePicker, true ) Code language: JavaScript ( javascript )

Then change the Visible property of the Time Picker to this code. varShowTimePicker

All of your hard work has paid-off. Now you have an awesome looking reusable time picker. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Make A Time Picker In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Flow Pen Input Matthew Devaney Power Automate

Save Docusign Document To SharePoint With Power Automate