diff --git a/samples/cascading-dropdown-component/README.md b/samples/cascading-dropdown-component/README.md new file mode 100644 index 00000000..b2f94b2f --- /dev/null +++ b/samples/cascading-dropdown-component/README.md @@ -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.** + + diff --git a/samples/cascading-dropdown-component/assets/preview.png b/samples/cascading-dropdown-component/assets/preview.png new file mode 100644 index 00000000..d244c141 Binary files /dev/null and b/samples/cascading-dropdown-component/assets/preview.png differ diff --git a/samples/cascading-dropdown-component/assets/sample.json b/samples/cascading-dropdown-component/assets/sample.json new file mode 100644 index 00000000..8d021901 --- /dev/null +++ b/samples/cascading-dropdown-component/assets/sample.json @@ -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/" + } + ] + } +] \ No newline at end of file diff --git a/samples/cascading-dropdown-component/solution/cascading-dropdown-component.zip b/samples/cascading-dropdown-component/solution/cascading-dropdown-component.zip new file mode 100644 index 00000000..1089994a Binary files /dev/null and b/samples/cascading-dropdown-component/solution/cascading-dropdown-component.zip differ diff --git a/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c.meta.xml b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c.meta.xml new file mode 100644 index 00000000..d1b68620 --- /dev/null +++ b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c.meta.xml @@ -0,0 +1,34 @@ + + + pnp_cascadingdropdown_a199c + 2025-07-15T21:46:28Z + Ready + 3.25072.2.0 + 3.25072.2.0 + {"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"} + 0 + + rgba(50, 86, 160, 1) + Cascading Dropdown + This component allows you to have a two level cascading dropdown control + + + [] + {} + {} + [] + [] + 1 + 0 + 0 + 0 + + 1.0 + {"cdsdependencies":[]} + 1 + /CanvasApps/pnp_cascadingdropdown_a199c_BackgroundImageUri + /CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp + + /CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json + + \ No newline at end of file diff --git a/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json new file mode 100644 index 00000000..7a1b7c27 --- /dev/null +++ b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_AdditionalUris0_identity.json @@ -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"} \ No newline at end of file diff --git a/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_BackgroundImageUri b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_BackgroundImageUri new file mode 100644 index 00000000..c6faba36 Binary files /dev/null and b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_BackgroundImageUri differ diff --git a/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp new file mode 100644 index 00000000..a6f49be4 Binary files /dev/null and b/samples/cascading-dropdown-component/sourcecode/CanvasApps/pnp_cascadingdropdown_a199c_DocumentUri.msapp differ diff --git a/samples/cascading-dropdown-component/sourcecode/Other/Customizations.xml b/samples/cascading-dropdown-component/sourcecode/Other/Customizations.xml new file mode 100644 index 00000000..87666866 --- /dev/null +++ b/samples/cascading-dropdown-component/sourcecode/Other/Customizations.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + 1033 + + \ No newline at end of file diff --git a/samples/cascading-dropdown-component/sourcecode/Other/Solution.xml b/samples/cascading-dropdown-component/sourcecode/Other/Solution.xml new file mode 100644 index 00000000..65ffb518 --- /dev/null +++ b/samples/cascading-dropdown-component/sourcecode/Other/Solution.xml @@ -0,0 +1,89 @@ + + + + cascadingdropdowncomponent + + + + + + + 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