Skip to content

cascading-dropdown-component migration #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Katerina-Chernevskaya merged 2 commits into from
Jul 25, 2025
Merged

cascading-dropdown-component migration #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5c2767
cascading-dropdown-component migration
jan-chlebek Jul 15, 2025
ef4c94b
generated solution and updated readme
Katerina-Chernevskaya Jul 25, 2025
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
94 changes: 94 additions & 0 deletions samples/cascading-dropdown-component/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# Cascading Dropdown Component

## Summary

This is a Power Apps Canvas component that demonstrates how to implement a custom cascading dropdown control. This control handles a two-level cascading dropdown and can even be customized to handle a single selection or multiple selection of items.

![Preview](./assets/preview.png)

## Features

This sample app is a great way to learn some fundamental Power Apps concepts like:

* How to build a component and use component input and output properties
* How to show/hide elements
* How to leverage collections and split out collection items into a string

## 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
* [April Dunnam](https://github.com/aprildunnam) ([@aprildunnam](https://www.twitter.com/aprildunnam) )

## Version history

Version|Date|Comments
-------|----|--------
1.0|Oct 29, 2022|Initial release
2.0|July 15, 2025|Migration from powerapps-samples repository with solution repacking by [Jan Chlebek](https://github.com/jan-chlebek)

## Minimal path to awesome

### Using the solution zip

* [Download](./solution/cascading-dropdown-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.
* Open the app in edit mode and make sure the data source **Data source name** is connected correctly.

### 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 --processCanvasApps
```

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.


## Prerequisites

### Using the component

To use the component in this sample, you'll need to either hard code in the items you want to display in the 1st level and 2nd level menus or pull them in from your data source. The cascading effect is dependent on having a property in your 1st level items called "Name" and a property inyour 2nd level items called "ParentItem" which can be matched back to the name field of the 1st level items. Look at the default 1stLevelItems and 2ndLevelItems properties to see the format that the component is expecting.

## Data Sources

None


## 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=cascading-dropdown-component&authors=@aprildunnam&title=cascading-dropdown-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=cascading-dropdown-component&authors=@aprildunnam&title=cascading-dropdown-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=cascading-dropdown-component&authors=@aprildunnam&title=cascading-dropdown-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/cascading-dropdown-component" aria-hidden="true" />
Binary file added samples/cascading-dropdown-component/assets/preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions samples/cascading-dropdown-component/assets/sample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
[
{
"name": "pnp-powerplatform-samples-cascading-dropdown-component",
"source": "pnp",
"title": "Cascading Dropdown Component",
"shortDescription": "Power Apps Canvas Component for two-level cascading dropdowns",
"url": "https://github.com/pnp/powerplatform-samples/tree/main/samples/cascading-dropdown-component",
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/powerplatform-samples/tree/main/samples/calendar-component",
"longDescription": [
"Power Apps Canvas Component for two-level cascading dropdowns."
],
"creationDateTime": "2022-10-29",
"updateDateTime": "2025-07-15",
"products": [
"Power Apps",
"Power Platform",
"PowerPlatform-samples"
],
"tags": [
"Power Apps","Component","Canvas", "Cascading", "Dropdown"
],
"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/calendar-component/assets/preview.png",
"alt": "Preview PNG"
}
],
"authors": [
{
"gitHubAccount": "aprildunnam",
"name": "April Dunnam",
"pictureUrl": "https://github.com/aprildunnam.png"
}
],
"references": [
{
"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 added samples/cascading-dropdown-component/solution/cascading-dropdown-component.zip
View file
Open in desktop
Binary file not shown.
34 changes: 34 additions & 0 deletions ...s/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c.meta.xml
View file
Open in desktop
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_cascadingdropdown_a199c</Name>
<AppVersion>2025-07-15T21:46:28Z</AppVersion>
<Status>Ready</Status>
<CreatedByClientVersion>3.25072.2.0</CreatedByClientVersion>
<MinClientVersion>3.25072.2.0</MinClientVersion>
<Tags>{"primaryDeviceWidth":"640","primaryDeviceHeight":"1136","supportsPortrait":"true","supportsLandscape":"true","primaryFormFactor":"Phone","showStatusBar":"false","publisherVersion":"3.25072.2","minimumRequiredApiVersion":"2.2.0","hasComponent":"true","hasUnlockedComponent":"true","isUnifiedRootApp":"false","sienaVersion":"20250715T214628Z-3.25072.2.0"}</Tags>
<IsCdsUpgraded>0</IsCdsUpgraded>
<GalleryItemId xsi:nil="true"></GalleryItemId>
<BackgroundColor>rgba(50, 86, 160, 1)</BackgroundColor>
<DisplayName>Cascading Dropdown</DisplayName>
<Description>This component allows you to have a two level cascading dropdown control</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_cascadingdropdown_a199c_BackgroundImageUri</BackgroundImageUri>
<DocumentUri>/CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp</DocumentUri>
<AdditionalUris>
<AdditionalUri>/CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json</AdditionalUri>
</AdditionalUris>
</CanvasApp>
1 change: 1 addition & 0 deletions ...component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"__Version":"0.1","App":"64daa535-6352-4e72-852d-d385de2d4c4f","Test_7F478737223C4B69":"8f2e05a7-04e9-4176-aac4-ae33a9edc01f","Host":"d37b0893-582d-4049-bee7-cec755fe3bbb","CascadingDropdown":"b2f40f19-0392-4b72-9fae-805239f109e4","lblSelectedItem":"1ae0082c-c2e3-41eb-bb48-8414b5e04e48","iconCancel":"45a931bb-250a-45eb-9aa3-3e47ba68f5ee","iconDown":"257335d6-8b88-4556-8cbc-14f8c86984fe","galLvl1":"227d0e95-e241-441d-8aa1-4cb38ecd2410","galleryTemplate2":"cd8fde1e-c030-4aa3-8d60-b48b5d7987a3","Button1":"32add788-1491-47a1-ade5-d3e26af27e87","galLvl2":"bbb7a9dd-6112-4a7a-b5ed-2c3636f90ccb","galleryTemplate3":"fd4204ef-c49a-4cc1-a8cc-acd6202c1f46","Button1_1":"99923d08-c176-429e-9ec7-83986c3b8790","Screen1":"7189289c-3bea-4419-a16d-4afbc933a42b","CascadingDropdown_1":"61c3e695-4ab9-4951-aeb5-742244cc104f"}
Binary file added ...g-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_BackgroundImageUri
View file
Open in desktop
Binary file not shown.
Binary file added ...ng-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp
View file
Open in desktop
Binary file not shown.
18 changes: 18 additions & 0 deletions samples/cascading-dropdown-component/sourcecode/Other/Customizations.xml
View file
Open in desktop
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/cascading-dropdown-component/sourcecode/Other/Solution.xml
View file
Open in desktop
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>cascadingdropdowncomponent</UniqueName>
<LocalizedNames>
<LocalizedName description="cascading-dropdown-component" languagecode="1033" />
</LocalizedNames>
<Descriptions>
<Description description="Demonstrates how to create a custom control that can handle a two-level cascading dropdown picker " 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_cascadingdropdown_a199c" behavior="0" />
</RootComponents>
<MissingDependencies />
</SolutionManifest>
</ImportExportXml>