diff --git a/samples/clock-time-picker-component/README.md b/samples/clock-time-picker-component/README.md new file mode 100644 index 00000000..de1d3415 --- /dev/null +++ b/samples/clock-time-picker-component/README.md @@ -0,0 +1,107 @@ +# Clock Time Picker Component + +## Summary + +A re-usable component that allows you to select times through a user friendly and convenient UI. + +![Preview](./assets/preview.png) +![Preview](./assets/preview.gif) + +## Applies to + +![Power Apps](https://img.shields.io/badge/Power%20Apps-Yes-green "Yes") +![Power Automate](https://img.shields.io/badge/Power%20Automate-No-red "No") +![Power BI](https://img.shields.io/badge/Power%20BI-No-red "No") +![Power Pages](https://img.shields.io/badge/Power%20Pages-No-red "No") +![Power Virtual Agents](https://img.shields.io/badge/Power%20Virtual%20Agents-No-red "No") +![Dataverse](https://img.shields.io/badge/Dataverse-No-red "No") +![AI Builder](https://img.shields.io/badge/AI%20Builder-No-red "No") +![Custom Connectors](https://img.shields.io/badge/Custom%20Connectors-No-red "No") +![Power Fx](https://img.shields.io/badge/Power%20Fx-No-red "No") + + +## Compatibility + +![Premium License](https://img.shields.io/badge/Premium%20License-Not%20Required-red.svg "Premium license not required") +![Experimental Features](https://img.shields.io/badge/Experimental%20Features-No-red.svg "Does not rely on experimental features") + + +## Contributors + +* [Nati Turtledove](https://github.com/NatiTurts) ([@NatiTurts](https://www.twitter.com/NatiTurts)) + +## Version history + +Version|Date|Comments +-------|----|-------- +1.0|Dec 1, 2022|Initial release +2.0|July 15, 2025|Migration from powerapps-samples repository with solution repacking by [Jan Chlebek](https://github.com/jan-chlebek) + +## Prerequisites + +### Using the component + +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. + +The component consists of the following Output Properties that can pass through data: +`Hour` - the selected hour in HH format. +`Minute` - the selected minute +`FullTime` - the full time selected in HH:mm format +`AMPM` - the selected Ante/Post Meridiem + +The two Input Properties are: +`SaveTime` +`Close` + +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. + +When the `Close` button is pressed, the clock will reset. + +## Minimal path to awesome + +### Using the solution zip + +* [Download](./solution/clock-time-picker-component.zip) the `.zip` from the `solution` folder +* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just packed. + +### Using the source code + +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: + +* Clone the repository to a local drive +* Pack the source files back into a solution `.zip` file: + + ```bash + pac solution pack --zipfile pathtodestinationfile --folder pathtosourcefolder + ``` + + Making sure to replace `pathtosourcefolder` to point to the path to this sample's `sourcecode` folder, and `pathtodestinationfile` to point to the path of this solution's `.zip` file (located under the `solution` folder) +* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just packed. + +## Features + +This sample illustrates the following concepts: + +* The ability for users to interact with a clock to select a preferred time +* Allowing for users to select a time by clicking on the clock numbers +* Allowing for users to select a time from the dropdowns +* Allowing for users to select a time by increasing/deacreasing a selected hour and minute +* Allowing for users to select am or pm times +* Save the chosen time through an Output Property +* Reset the times after saved or cleared + +## Help + +We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. + +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=clock-time-picker-component&authors=@NatiTurts&title=clock-time-picker-component%20-%20). + +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=clock-time-picker-component&authors=@NatiTurts&title=clock-time-picker-component%20-%20). + +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=clock-time-picker-component&authors=@NatiTurts&title=clock-time-picker-component%20-%20). + +## 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/samples/clock-time-picker-component/assets/preview.gif b/samples/clock-time-picker-component/assets/preview.gif new file mode 100644 index 00000000..ed268c3e Binary files /dev/null and b/samples/clock-time-picker-component/assets/preview.gif differ diff --git a/samples/clock-time-picker-component/assets/preview.mp4 b/samples/clock-time-picker-component/assets/preview.mp4 new file mode 100644 index 00000000..cb6e8be5 Binary files /dev/null and b/samples/clock-time-picker-component/assets/preview.mp4 differ diff --git a/samples/clock-time-picker-component/assets/preview.png b/samples/clock-time-picker-component/assets/preview.png new file mode 100644 index 00000000..55a9df1f Binary files /dev/null and b/samples/clock-time-picker-component/assets/preview.png differ diff --git a/samples/clock-time-picker-component/assets/sample.json b/samples/clock-time-picker-component/assets/sample.json new file mode 100644 index 00000000..0ba9fd0a --- /dev/null +++ b/samples/clock-time-picker-component/assets/sample.json @@ -0,0 +1,82 @@ +[ + { + "name": "pnp-powerplatform-samples-clock-time-picker-component", + "source": "pnp", + "title": "Clock Time Picker Component", + "shortDescription": "A re-usable component that allows you to select specific times in HH and hh formats through a user friendly and efficient UX.", + "url": "https://github.com/pnp/powerplatform-samples/tree/main/samples/clock-time-picker-component", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/powerplatform-samples/tree/main/samples/clock-time-picker-component", + "longDescription": [ + "A re-usable component that allows you to select specific times in HH and hh formats through a user friendly and efficient UX." + ], + "creationDateTime": "2022-12-04", + "updateDateTime": "2025-07-15", + "products": [ + "Power Apps", + "Power Platform", + "PowerPlatform-samples" + ], + "tags": [ + "CLOCK", "COMPONENT", "TIME" + ], + "categories": [ + "CANVAS" + ], + "metadata": [ + { + "key": "POWERAPPS-EXPERIMENTAL", + "value": "No" + }, + { + "key": "POWERAPPS-PREMIUM", + "value": "No" + }, + { + "key": "POWERAPPS-ONPREM", + "value": "No" + }, + { + "key": "POWERAPPS-CUSTOMCONNECTOR", + "value": "No" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/clock-time-picker-component/assets/preview.gif", + "alt": "Preview GIF" + }, + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/clock-time-picker-component/assets/preview.png", + "alt": "Preview PNG" + } + ], + "authors": [ + { + "gitHubAccount": "NatiTurts", + "name": "Nati Turtledove", + "pictureUrl": "https://github.com/NatiTurts.png" + } + ], + "references": [ + { + "name": "Create a component for canvas apps", + "description": "Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library", + "url": "https://docs.microsoft.com/powerapps/maker/canvas-apps/" + }, + { + "name": "Overview of creating apps in Power Apps", + "description": "Power Apps is a high-productivity development platform for business apps.", + "url": "https://docs.microsoft.com/powerapps/maker/" + }, + { + "name": "Power Apps canvas apps documentation", + "description": "Design and build a business app from a canvas in Microsoft Power Apps with data from a variety of sources without writing any code using traditional programming languages, such as C#.", + "url": "https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/" + } + ] + } +] \ No newline at end of file diff --git a/samples/clock-time-picker-component/solution/clock-time-picker-component.zip b/samples/clock-time-picker-component/solution/clock-time-picker-component.zip new file mode 100644 index 00000000..1af3db99 Binary files /dev/null and b/samples/clock-time-picker-component/solution/clock-time-picker-component.zip differ diff --git a/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797.meta.xml b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797.meta.xml new file mode 100644 index 00000000..fb9ca0fd --- /dev/null +++ b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797.meta.xml @@ -0,0 +1,34 @@ + + + pnp_clockcomponent_ca797 + 2025-07-15T21:06:45Z + Ready + 3.25072.2.0 + 3.25072.2.0 + {"primaryDeviceWidth":"1366","primaryDeviceHeight":"768","supportsPortrait":"true","supportsLandscape":"true","primaryFormFactor":"Tablet","showStatusBar":"false","publisherVersion":"3.25072.2","minimumRequiredApiVersion":"2.2.0","hasComponent":"true","hasUnlockedComponent":"true","isUnifiedRootApp":"false"} + 0 + + RGBA(0,176,240,1) + Clock Component + + + + [] + {} + {} + [] + [] + 1 + 0 + 0 + 0 + + 1.0 + {"cdsdependencies":[]} + 1 + /CanvasApps/pnp_clockcomponent_ca797_BackgroundImageUri + /CanvasApps/pnp_clockcomponent_ca797_DocumentUri.msapp + + /CanvasApps/pnp_clockcomponent_ca797_AdditionalUris0_identity.json + + \ No newline at end of file diff --git a/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_AdditionalUris0_identity.json b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_AdditionalUris0_identity.json new file mode 100644 index 00000000..f2d30da5 --- /dev/null +++ b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_AdditionalUris0_identity.json @@ -0,0 +1 @@ +{"__Version":"0.1","App":"bac3e726-0661-4326-b1f5-bccdde7bd5cb","Test_7F478737223C4B69":"964f5794-7deb-4553-ad16-f7b79091a3c9","Host":"006d2e1e-da33-4fc5-9662-7604c46517ab","Clock Time Picker":"85d200b4-5132-4c96-9579-a3ad21df62da","shp_ClockTimePicker_ManualBack":"07a50156-4e1e-4be5-a8a5-3b97f0ee8a2d","lbl_ClockTimePicker_HourTitle":"46c4f71f-2f75-4abf-b02e-b205d7b1479c","lbl_ClockTimePicker_MinuteTitle":"408c86f7-25e7-4e1b-a873-687eef2f4544","drp_ClockTimePicker_Hours":"f06c1a7d-066d-48d4-a0b1-baddb37c61b9","ico_ClockTimePicker_HourUp":"5ba971c3-9caa-4b91-a43f-034d6cc22c43","drp_ClockTimePicker_Minutes":"72c26e5e-c757-4041-a7d8-3729e2e05d80","ico_ClockTimePicker_MinuteUp":"55becddd-4bfa-4ee5-8b37-7df32ab3a423","ico_ClockTimePicker_HourDown":"2a5e0e9f-bec7-4578-9033-60cc5a163677","ico_ClockTimePicker_MinuteDown":"5a2bbbc7-5a29-42b9-9de8-af5daadd1118","shp_ClockTimePicker_ClockBack":"77b9b7bf-5504-4060-ba91-79571e511db4","shp_ClockTimePicker_HourBack":"0575df31-e192-4d46-94e8-6ff451303d2c","btn_ClockTimePicker_Hour":"9573669b-085d-4f1f-8395-d6b44e549e9d","btn_ClockTimePicker_Hour12":"b31b92fd-0474-40ee-b69b-a04106e2f3f7","btn_ClockTimePicker_Hour11":"fcbc8ede-bbb9-44ac-85f9-dd89a840286c","btn_ClockTimePicker_Hour1":"2ed36544-0ccc-4aeb-907f-75ee9ce9290d","shp_ClockTimePicker_MinuteBack":"8efc879e-bcd6-47e1-8357-4c35a3254d85","btn_ClockTimePicker_Minute":"226d4a03-a8d0-46b6-b9e7-54728f4177ef","btn_ClockTimePicker_Minute00":"1f25ac10-5f37-4bc0-a341-430208bbd1a7","btn_ClockTimePicker_Minute55":"d1a1b926-3561-42b1-8871-94160f3df24d","btn_ClockTimePicker_Minute5":"2dd8e4df-b3b4-4744-93a3-fa1ed8c80ff7","btn_ClockTimePicker_Hour10":"530e9aff-b5b3-4ab8-be02-16c56b64fda2","btn_ClockTimePicker_Hour2":"74a2968e-103f-4035-bdfc-688d7fdcae3b","btn_ClockTimePicker_Minute50":"6dd80235-6f7e-41eb-ac5e-b266d2339a94","btn_ClockTimePicker_Minute10":"d50f24db-849e-41fe-93b5-68011d2670d8","btn_ClockTimePicker_Hour9":"23375dd5-ace4-446b-b91c-321d7629e21a","btn_ClockTimePicker_Hour3":"3196a461-2328-4cc9-971b-5e16f944bac5","btn_ClockTimePicker_Minute45":"79f9dfdd-7092-49cf-b542-bd37b7a20280","btn_ClockTimePicker_Minute15":"6c042ecf-4c25-40ea-8ecc-e3bcad9f9e53","img_ClockTimePicker_Morning":"90011620-a989-4ebd-9392-5a287aa96135","tgl_ClockTimePicker_AMPM":"ba080eef-c316-44a7-ad2d-4983d4496482","img_ClockTimePicker_Night":"f65ad37e-a2ef-4b16-8548-7515c5cedd19","btn_ClockTimePicker_Minute40":"36c385cf-f1de-4320-a5d7-078f0f3ec763","btn_ClockTimePicker_Minute20":"4a409a30-6e29-4d50-8626-b6d6e1fe66a8","btn_ClockTimePicker_Hour8":"ff5a14e4-4f13-46be-b80d-0147a07aeadb","btn_ClockTimePicker_Hour4":"c6033712-c664-4fc6-917e-39a56a0066c1","btn_ClockTimePicker_Minute35":"a9d6975c-000f-4064-aa5f-216c40dfbdad","btn_ClockTimePicker_Minute25":"ce3e516b-7e61-419e-af68-45fdf99b8092","btn_ClockTimePicker_Minute30":"a0fbabf9-650e-40c3-9f29-50b978433ba2","btn_ClockTimePicker_Hour7":"1936d37f-1ce6-4680-a382-6be9660fd107","btn_ClockTimePicker_Hour5":"000e88ed-15db-4263-859e-d9cb1ce9e22d","btn_ClockTimePicker_Hour6":"b3bf7fe4-58cf-4bca-9eef-d83d09739ebc","ico_ClockClose":"cbbabf4d-e6a7-4e26-b6d1-975fe5f99add","ico_ClockSave":"2b5b8cad-6bf6-437a-b31e-1cdc8de71cec","grp_ClockTimePicker_AmPm":"3b96ae66-49fa-44c9-8fa9-c082dea86935","grp_ClockTimePicker_Minutes":"8be34458-5198-4f49-a105-c4db612ee0cd","grp_ClockTimePicker_Hours":"ce5eceac-54c1-40a4-9ec2-5e9ce23a6a96","grp_ClockTimePicker_SelectedHourMinute":"8c4eef9b-926b-4375-b26b-251a4b734ba2","grp_ClockTimePicker_ManualHours":"85a5fda5-a21a-4851-ac38-57a2ed913289","grp_ClockTimePicker_ManualMinutes":"9e41d99a-977a-4e24-9fce-52e3337f50c3","grp_ClockTimePicker_ComponentElemtns":"181a197a-2f81-4200-ab26-47c07e5ed12d","Screen1":"c6a80bc3-bffd-4eca-a0e1-7955e60b3756","Clock Time Picker_1":"6905a6e6-9214-4c3d-9525-7e0aae693264"} \ No newline at end of file diff --git a/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_BackgroundImageUri b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_BackgroundImageUri new file mode 100644 index 00000000..c67f0065 Binary files /dev/null and b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_BackgroundImageUri differ diff --git a/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_DocumentUri.msapp b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_DocumentUri.msapp new file mode 100644 index 00000000..c120c5e5 Binary files /dev/null and b/samples/clock-time-picker-component/sourcecode/CanvasApps/pnp_clockcomponent_ca797_DocumentUri.msapp differ diff --git a/samples/clock-time-picker-component/sourcecode/Other/Customizations.xml b/samples/clock-time-picker-component/sourcecode/Other/Customizations.xml new file mode 100644 index 00000000..87666866 --- /dev/null +++ b/samples/clock-time-picker-component/sourcecode/Other/Customizations.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + 1033 + + \ No newline at end of file diff --git a/samples/clock-time-picker-component/sourcecode/Other/Solution.xml b/samples/clock-time-picker-component/sourcecode/Other/Solution.xml new file mode 100644 index 00000000..f0a9b03b --- /dev/null +++ b/samples/clock-time-picker-component/sourcecode/Other/Solution.xml @@ -0,0 +1,89 @@ + + + + clocktimepickercomponent + + + + + + + 1.0.0.0 + 0 + + Microsoft_365_and_Power_Platform_Community + + + + + + + + https://pnp.github.io/ + pnp + 89378 + +
+ 1 + 1 + + + + + + + + + + + + + + + + 1 + + + + + + + + +
+
+ 2 + 1 + + + + + + + + + + + + + + + + 1 + + + + + + + + +
+ + + + + + + + \ No newline at end of file