|
1 | | ---- |
2 | | -page_type: sample |
3 | | -languages: |
4 | | -- powerapps-comma |
5 | | -products: |
6 | | -- powerapps |
7 | | -- canvas |
8 | | -name: Clock Time Picker Component |
9 | | -description: A re-usable component that allows you to select times through a user friendly and convenient UI. |
10 | | -urlFragment: ClockTimePickerComponent |
11 | | -ms.date: 1/12/2022 |
12 | | -author: Nati Turtledove |
13 | | -ms.author: pnp |
14 | | -level: beginner |
15 | | -ms.prod: power-apps |
16 | | ---- |
| 1 | +# Clock Time Picker Component |
17 | 2 |
|
18 | | -# Calendar Component |
19 | | - |
20 | | -## Summary |
21 | | - |
22 | | -A re-usable component that allows you to select times through a user friendly and convenient UI. |
23 | | - |
24 | | - |
25 | | - |
26 | | - |
27 | | - |
28 | | -## Applies to |
29 | | - |
30 | | -* [Microsoft Power Apps](https://docs.microsoft.com/powerapps/) |
31 | | - |
32 | | -## Compatibility |
33 | | - |
34 | | - |
35 | | - |
36 | | - |
37 | | - |
38 | | - |
39 | | - |
40 | | -## Authors |
41 | | - |
42 | | -Solution|Author(s) |
43 | | ---------|--------- |
44 | | -Clock Time Picker Component | [Nati Turtledove](https://github.com/NatiTurts) ([@NatiTurts](https://www.twitter.com/NatiTurts) ) |
45 | | - |
46 | | -## Version history |
47 | | - |
48 | | -Version|Date|Comments |
49 | | --------|----|-------- |
50 | | -1.0|Dec 1, 2022|Initial release |
51 | | - |
52 | | - |
53 | | -## Features |
54 | | - |
55 | | -This sample illustrates the following concepts: |
56 | | - |
57 | | -* The ability for users to interact with a clock to select a preferred time |
58 | | -* Allowing for users to select a time by clicking on the clock numbers |
59 | | -* Allowing for users to select a time from the dropdowns |
60 | | -* Allowing for users to select a time by increasing/deacreasing a selected hour and minute |
61 | | -* Allowing for users to select am or pm times |
62 | | -* Save the chosen time through an Output Property |
63 | | -* Reset the times after saved or cleared |
64 | | - |
65 | | -## Prerequisites |
66 | | - |
67 | | -### Using the component |
68 | | - |
69 | | -To use the component in this sample, you'll need to pass the components Output Properties to a local or global variable within the Canvas App. |
70 | | - |
71 | | -The component consists of the following Output Properties that can pass through data: |
72 | | -`Hour` - the selected hour in HH format. |
73 | | -`Minute` - the selected minute |
74 | | -`FullTime` - the full time selected in HH:mm format |
75 | | -`AMPM` - the selected Ante/Post Meridiem |
76 | | - |
77 | | -The two Input Properties are: |
78 | | -`SaveTime` |
79 | | -`Close` |
80 | | - |
81 | | -The pass the selected time from the clock component to a variable within the app, assign a `Set()` or `UpdateContext({})` function to the component Input Property `SaveTime`. When the `Save` button is pressed, the selected time will be passed through and the clock will reset. |
82 | | - |
83 | | -When the `Close` button is pressed, the clock will reset. |
84 | | - |
85 | | - |
86 | | - |
87 | | -## Data Sources |
88 | | - |
89 | | -None |
90 | | - |
91 | | -## Minimal Path to Awesome |
92 | | - |
93 | | -* [Download](./solution/ClockTimePickerComponent.msapp) the `.msapp` from the `solution` folder |
94 | | -* Use the `.msapp` file using **File** > **Open** > **Browse** within Power Apps Studio. |
95 | | -* Save and Publish |
96 | | - |
97 | | -## Using the Source Code |
98 | | - |
99 | | -You can also use the [Power Apps CLI](https://docs.microsoft.com/powerapps/developer/data-platform/powerapps-cli) to pack the source code by following these steps:: |
100 | | - |
101 | | -* Clone the repository to a local drive |
102 | | -* Pack the source files back into `.msapp` file: |
103 | | - ```bash |
104 | | - pac canvas pack --sources pathtosourcefolder --msapp pathtomsapp |
105 | | - ``` |
106 | | - Making sure to replace `pathtosourcefolder` to point to the path to this sample's `sourcecode` folder, and `pathtomsapp` to point to the path of this solution's `.msapp` file (located under the `solution` folder) |
107 | | -* Use the `.msapp` file using **File** > **Open** > **Browse** in Power Apps Studio. |
108 | | - |
109 | | -## Disclaimer |
110 | | - |
111 | | -**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.** |
112 | | - |
113 | | - |
114 | | -## Support |
115 | | - |
116 | | -While we don't support samples, if you encounter any issues while using this sample, you can [create a new issue](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=ClockTimePickerComponent&authors=@NatiTurts&title=ClockTimePickerComponent%20-%20). |
117 | | - |
118 | | -For questions regarding this sample, [create a new question](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=ClockTimePickerComponent&authors=@NatiTurts&title=ClockTimePickerComponent%20-%20). |
119 | | - |
120 | | -Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=ClockTimePickerComponent&authors=@NatiTurts&title=ClockTimePickerComponent%20-%20). |
121 | | - |
122 | | -## For more information |
123 | | - |
124 | | -- [Create a component for canvas apps](https://docs.microsoft.com/powerapps/maker/canvas-apps/create-component#components-in-canvas-apps) |
125 | | -- [Overview of creating apps in Power Apps](https://docs.microsoft.com/powerapps/maker/) |
126 | | -- [Power Apps canvas apps documentation](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/) |
127 | | - |
128 | | -<img src="https://telemetry.sharepointpnp.com/powerapps-samples/samples/ClockTimePickerComponent" /> |
| 3 | +This sample has been moved to [here](https://github.com/pnp/powerplatform-samples/tree/main/samples/clock-time-picker-component). |
0 commit comments