diff --git a/power-apps/time-picker/README.md b/power-apps/time-picker/README.md new file mode 100644 index 0000000..762b74f --- /dev/null +++ b/power-apps/time-picker/README.md @@ -0,0 +1,31 @@ +# Time Picker + +Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input. + + +![time-picker](./assets/time-picker.gif) + + +## Authors + +Snippet|Author +--------|--------- +Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) ) + +## Minimal path to awesome + +1. Open your canvas app in **Power Apps** +2. Copy the contents of the **[YAML-file](./source/time-picker.yaml)** +3. Click on the three dots of the screen where you want to add the snippet and select "Paste code" + + + +## Code + **[YAML-file](./source/time-picker.yaml)** + + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + + diff --git a/power-apps/time-picker/assets/sample.json b/power-apps/time-picker/assets/sample.json new file mode 100644 index 0000000..7fe3d28 --- /dev/null +++ b/power-apps/time-picker/assets/sample.json @@ -0,0 +1,51 @@ +[ + { + "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", + "name": "pnp-powerplatform-snippets-time-picker", + "version": "1.0.0.0", + "source": "pnp", + "creationDateTime": "2025-04-29T00:00:00.000Z", + "updateDateTime": "2025-04-29T00:00:00.000Z", + "title": "Time Picker", + "shortDescription": "Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input.", + "longDescription": [ + "Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input." + ], + "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/time-picker/", + "products": [ + "Power Platform", + "Power Apps", + "powerplatform-snippets", + "power-apps-snippets" + ], + "tags": [ + ], + "categories": [ + ], + "metadata": [ + { + "key": "Product", + "value": "Power Apps" + }, + { + "key": "Type", + "value": "Snippet" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/49552cb8dfd123db7bec59a1bc6f36f27a9bea7d/power-apps/time-picker/assets/time-picker.gif", + "alt": "Preview PNG" + } + ], + "authors": [ + { + "gitHubAccount": "SteveBourdin", + "name": "Steve Bourdin", + "pictureUrl": "https://github.com/SteveBourdin.png" + } + ] + } +] diff --git a/power-apps/time-picker/assets/time-picker.gif b/power-apps/time-picker/assets/time-picker.gif new file mode 100644 index 0000000..d911043 Binary files /dev/null and b/power-apps/time-picker/assets/time-picker.gif differ diff --git a/power-apps/time-picker/source/time-picker.yaml b/power-apps/time-picker/source/time-picker.yaml new file mode 100644 index 0000000..2a190e5 --- /dev/null +++ b/power-apps/time-picker/source/time-picker.yaml @@ -0,0 +1,206 @@ +- cont_input: + Control: GroupContainer@1.3.0 + Variant: ManualLayout + Group: TimerPicker + Properties: + Fill: =RGBA(255, 255, 255, 0.7) + Height: =32 + Width: =130 + X: =763 + Y: =284 + Children: + - inp_timer: + Control: TextInput@0.0.54 + Properties: + Align: =Align.Center + FontColor: =If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),Color.Gray,Color.DarkBlue) + FontWeight: =FontWeight.Semibold + Height: =Parent.Height + Value: |- + =If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),"Choose Time", var_TimePicker_ChooseTime_Hour&" : "&var_TimePicker_ChooseTime_Min) + Width: =Parent.Width + - btn_timer: + Control: Classic/Button@2.2.0 + Properties: + BorderColor: =ColorFade(Self.Fill, -15%) + Color: =RGBA(255, 255, 255, 1) + DisabledBorderColor: =RGBA(166, 166, 166, 1) + DisabledFill: =Self.Fill + Fill: =RGBA(255, 255, 255, 0) + Font: =Font.'Open Sans' + Height: =Parent.Height + HoverBorderColor: =ColorFade(Self.BorderColor, 20%) + HoverColor: =RGBA(255, 255, 255, 1) + HoverFill: =Self.Fill + OnSelect: |- + =UpdateContext({var_TimePicker_ChooseTime : Not var_TimePicker_ChooseTime}) + PressedBorderColor: =Self.Fill + PressedColor: =Self.Fill + PressedFill: =Self.Fill + Text: ="" + Width: =Parent.Width + - ico_timer: + Control: Classic/Icon@2.5.0 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Color: =RGBA(0, 18, 107, 1) + Height: =ico_eraser.Height + Icon: =Icon.Clock + PaddingBottom: =5 + PaddingLeft: =5 + PaddingRight: =5 + PaddingTop: =5 + Width: =Self.Height + X: =Parent.Width-Self.Width + Y: =ico_eraser.Y + - ico_eraser: + Control: Classic/Icon@2.5.0 + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Color: =RGBA(0, 18, 107, 1) + Fill: =ColorFade(Color.Red,80%) + Height: =3*Parent.Height/4 + Icon: =Icon.Erase + OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:Blank(),var_TimePicker_ChooseTime_Min:Blank()}) + PaddingBottom: =5 + PaddingLeft: =5 + PaddingRight: =5 + PaddingTop: =5 + Visible: =IsBlank(var_TimePicker_ChooseTime_Hour)=false && IsBlank(var_TimePicker_ChooseTime_Min)=false + Width: =Self.Height + X: =Parent.Height/8 + Y: =Parent.Height/8 +- cont_selecttime: + Control: GroupContainer@1.3.0 + Variant: ManualLayout + Group: TimerPicker + Properties: + Fill: =RGBA(255, 255, 255, 0.85) + Height: =cont_input.Height*4 + Visible: =var_TimePicker_ChooseTime=true + Width: =cont_input.Width + X: =763 + Y: =316 + Children: + - gal_hours: + Control: Gallery@2.15.0 + Variant: Vertical + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Default: =LookUp(var_TimePicker_ChooseTime_ListHours,Hour=var_TimePicker_ChooseTime_Hour) + Height: =Parent.Height + Items: =var_TimePicker_ChooseTime_ListHours + ShowScrollbar: =false + TemplatePadding: =0 + TemplateSize: =Self.Height/6 + Width: =Parent.Width/2 + Children: + - lbl_hour: + Control: Label@2.5.1 + Properties: + Align: =Align.Center + BorderColor: =RGBA(0, 18, 107, 1) + Color: |- + =If( + ThisItem.Value = gal_hours.Selected.Value, + Color.White, + Color.Black + ) + Fill: |- + =If( + ThisItem.Value = gal_hours.Selected.Value, + Color.Blue, + RGBA( + 255, + 255, + 255, + 0 + ) + ) + Font: =Font.'Open Sans' + Height: =Parent.TemplateHeight + OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:ThisItem.Hour}) + Size: =11 + Text: =ThisItem.Hour + Width: =Parent.Width + - gal_mins: + Control: Gallery@2.15.0 + Variant: Vertical + Properties: + BorderColor: =RGBA(0, 18, 107, 1) + Default: =LookUp(var_TimePicker_ChooseTime_ListMins,Min = var_TimePicker_ChooseTime_Min) + Height: =Parent.Height + Items: =var_TimePicker_ChooseTime_ListMins + ShowScrollbar: =false + TemplatePadding: =0 + TemplateSize: =Self.Height/6 + Width: =Parent.Width/2 + X: =gal_hours.Width + Children: + - lbl_min: + Control: Label@2.5.1 + Properties: + Align: =Align.Center + BorderColor: =RGBA(0, 18, 107, 1) + Color: |- + =If( + ThisItem.Value = gal_mins.Selected.Value, + Color.White, + Color.Black + ) + Fill: |- + =If( + ThisItem.Value = gal_mins.Selected.Value, + Color.Blue, + RGBA( + 255, + 255, + 255, + 0 + ) + ) + Font: =Font.'Open Sans' + Height: =Parent.TemplateHeight + OnSelect: |- + =UpdateContext({var_TimePicker_ChooseTime_Min: ThisItem.Min}); + If( + IsBlank(var_TimePicker_ChooseTime_Hour) = false, + UpdateContext({var_TimePicker_ChooseTime: false}) + ) + Size: =11 + Text: =ThisItem.Min + Width: =Parent.Width + - tim_initialize: + Control: Timer@2.1.0 + Properties: + AutoStart: =true + BorderColor: =ColorFade(Self.Fill, -15%) + Color: =RGBA(255, 255, 255, 1) + DisabledBorderColor: =ColorFade(Self.BorderColor, 70%) + DisabledColor: =ColorFade(Self.Fill, 90%) + DisabledFill: =ColorFade(Self.Fill, 70%) + Fill: =RGBA(56, 96, 178, 1) + Font: =Font.'Open Sans' + HoverBorderColor: =ColorFade(Self.BorderColor, 20%) + HoverColor: =RGBA(255, 255, 255, 1) + HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%) + OnTimerStart: |- + =UpdateContext( + { + var_TimePicker_ChooseTime_ListHours: AddColumns( + Sequence(24), + Hour, + Text( + Value - 1, + "00" + ) + ), + var_TimePicker_ChooseTime_ListMins : AddColumns(Sequence(60),Min,Text(Value-1,"00")) + } + ) + PressedBorderColor: =Self.Fill + PressedColor: =Self.Fill + PressedFill: =Self.Color + Start: =true + Visible: =false + Y: =40