Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions samples/clock-time-picker-component/README.md
Original file line number Diff line number Diff line change
@@ -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.**

<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-samples/samples/clock-time-picker-component" aria-hidden="true" />
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions samples/clock-time-picker-component/assets/sample.json
Original file line number Diff line number Diff line change
@@ -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/"
}
]
}
]
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<CanvasApp xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Name>pnp_clockcomponent_ca797</Name>
<AppVersion>2025-07-15T21:06:45Z</AppVersion>
<Status>Ready</Status>
<CreatedByClientVersion>3.25072.2.0</CreatedByClientVersion>
<MinClientVersion>3.25072.2.0</MinClientVersion>
<Tags>{"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"}</Tags>
<IsCdsUpgraded>0</IsCdsUpgraded>
<GalleryItemId xsi:nil="true"></GalleryItemId>
<BackgroundColor>RGBA(0,176,240,1)</BackgroundColor>
<DisplayName>Clock Component</DisplayName>
<Description xsi:nil="true"></Description>
<CommitMessage xsi:nil="true"></CommitMessage>
<Publisher xsi:nil="true"></Publisher>
<AuthorizationReferences>[]</AuthorizationReferences>
<ConnectionReferences>{}</ConnectionReferences>
<DatabaseReferences>{}</DatabaseReferences>
<AppComponents>[]</AppComponents>
<AppComponentDependencies>[]</AppComponentDependencies>
<CanConsumeAppPass>1</CanConsumeAppPass>
<CanvasAppType>0</CanvasAppType>
<BypassConsent>0</BypassConsent>
<AdminControlBypassConsent>0</AdminControlBypassConsent>
<EmbeddedApp xsi:nil="true"></EmbeddedApp>
<IntroducedVersion>1.0</IntroducedVersion>
<CdsDependencies>{"cdsdependencies":[]}</CdsDependencies>
<IsCustomizable>1</IsCustomizable>
<BackgroundImageUri>/CanvasApps/pnp_clockcomponent_ca797_BackgroundImageUri</BackgroundImageUri>
<DocumentUri>/CanvasApps/pnp_clockcomponent_ca797_DocumentUri.msapp</DocumentUri>
<AdditionalUris>
<AdditionalUri>/CanvasApps/pnp_clockcomponent_ca797_AdditionalUris0_identity.json</AdditionalUri>
</AdditionalUris>
</CanvasApp>
Original file line number Diff line number Diff line change
@@ -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"}
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<ImportExportXml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" OrganizationVersion="9.2.25071.154" OrganizationSchemaType="Full" CRMServerServiceabilityVersion="9.2.25071.00154">
<Entities />
<Roles />
<Workflows />
<FieldSecurityProfiles />
<Templates />
<EntityMaps />
<EntityRelationships />
<OrganizationSettings />
<optionsets />
<CustomControls />
<EntityDataProviders />
<CanvasApps />
<Languages>
<Language>1033</Language>
</Languages>
</ImportExportXml>
89 changes: 89 additions & 0 deletions samples/clock-time-picker-component/sourcecode/Other/Solution.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<?xml version="1.0" encoding="utf-8"?>
<ImportExportXml version="9.2.25071.154" SolutionPackageVersion="9.2" languagecode="1033" generatedBy="CrmLive" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" OrganizationVersion="9.2.25071.154" OrganizationSchemaType="Full" CRMServerServiceabilityVersion="9.2.25071.00154">
<SolutionManifest>
<UniqueName>clocktimepickercomponent</UniqueName>
<LocalizedNames>
<LocalizedName description="clock-time-picker-component" languagecode="1033" />
</LocalizedNames>
<Descriptions>
<Description description="A re-usable component that allows you to select times through a user friendly and convenient UI." languagecode="1033" />
</Descriptions>
<Version>1.0.0.0</Version>
<Managed>0</Managed>
<Publisher>
<UniqueName>Microsoft_365_and_Power_Platform_Community</UniqueName>
<LocalizedNames>
<LocalizedName description="Microsoft 365 &amp; Power Platform Community" languagecode="1033" />
</LocalizedNames>
<Descriptions>
<Description description="Microsoft community sample publisher" languagecode="1033" />
</Descriptions>
<EMailAddress xsi:nil="true"></EMailAddress>
<SupportingWebsiteUrl>https://pnp.github.io/</SupportingWebsiteUrl>
<CustomizationPrefix>pnp</CustomizationPrefix>
<CustomizationOptionValuePrefix>89378</CustomizationOptionValuePrefix>
<Addresses>
<Address>
<AddressNumber>1</AddressNumber>
<AddressTypeCode>1</AddressTypeCode>
<City xsi:nil="true"></City>
<County xsi:nil="true"></County>
<Country xsi:nil="true"></Country>
<Fax xsi:nil="true"></Fax>
<FreightTermsCode xsi:nil="true"></FreightTermsCode>
<ImportSequenceNumber xsi:nil="true"></ImportSequenceNumber>
<Latitude xsi:nil="true"></Latitude>
<Line1 xsi:nil="true"></Line1>
<Line2 xsi:nil="true"></Line2>
<Line3 xsi:nil="true"></Line3>
<Longitude xsi:nil="true"></Longitude>
<Name xsi:nil="true"></Name>
<PostalCode xsi:nil="true"></PostalCode>
<PostOfficeBox xsi:nil="true"></PostOfficeBox>
<PrimaryContactName xsi:nil="true"></PrimaryContactName>
<ShippingMethodCode>1</ShippingMethodCode>
<StateOrProvince xsi:nil="true"></StateOrProvince>
<Telephone1 xsi:nil="true"></Telephone1>
<Telephone2 xsi:nil="true"></Telephone2>
<Telephone3 xsi:nil="true"></Telephone3>
<TimeZoneRuleVersionNumber xsi:nil="true"></TimeZoneRuleVersionNumber>
<UPSZone xsi:nil="true"></UPSZone>
<UTCOffset xsi:nil="true"></UTCOffset>
<UTCConversionTimeZoneCode xsi:nil="true"></UTCConversionTimeZoneCode>
</Address>
<Address>
<AddressNumber>2</AddressNumber>
<AddressTypeCode>1</AddressTypeCode>
<City xsi:nil="true"></City>
<County xsi:nil="true"></County>
<Country xsi:nil="true"></Country>
<Fax xsi:nil="true"></Fax>
<FreightTermsCode xsi:nil="true"></FreightTermsCode>
<ImportSequenceNumber xsi:nil="true"></ImportSequenceNumber>
<Latitude xsi:nil="true"></Latitude>
<Line1 xsi:nil="true"></Line1>
<Line2 xsi:nil="true"></Line2>
<Line3 xsi:nil="true"></Line3>
<Longitude xsi:nil="true"></Longitude>
<Name xsi:nil="true"></Name>
<PostalCode xsi:nil="true"></PostalCode>
<PostOfficeBox xsi:nil="true"></PostOfficeBox>
<PrimaryContactName xsi:nil="true"></PrimaryContactName>
<ShippingMethodCode>1</ShippingMethodCode>
<StateOrProvince xsi:nil="true"></StateOrProvince>
<Telephone1 xsi:nil="true"></Telephone1>
<Telephone2 xsi:nil="true"></Telephone2>
<Telephone3 xsi:nil="true"></Telephone3>
<TimeZoneRuleVersionNumber xsi:nil="true"></TimeZoneRuleVersionNumber>
<UPSZone xsi:nil="true"></UPSZone>
<UTCOffset xsi:nil="true"></UTCOffset>
<UTCConversionTimeZoneCode xsi:nil="true"></UTCConversionTimeZoneCode>
</Address>
</Addresses>
</Publisher>
<RootComponents>
<RootComponent type="300" schemaName="pnp_clockcomponent_ca797" behavior="0" />
</RootComponents>
<MissingDependencies />
</SolutionManifest>
</ImportExportXml>