pnp · Laskewitz · Jun 5, 2025 · May 26, 2025 · Jun 1, 2025 · Jun 1, 2025
diff --git a/power-apps/animated-accordions/README.md b/power-apps/animated-accordions/README.md
@@ -0,0 +1,33 @@
+# Animated Accordions
+
+Animated accordion component implemented using native components in Power Apps Canvas. Great for FAQs, navigation menus, interactive forms, and any other foldable UI objects that require content organization.
+
+> [!WARNING]
+> All native Power Apps snippets offer limited performance in Studio mode. If you see any performance issues, test via published app/player mode first!
+
+### Animated Accordion
+Basic accordion dedicated to FAQ content. Row items are dynamically generated on Gallery items, all content is passed directly to text fields.
+![preview](./assets/animated-accordion-demo.gif)
+
+### Animated Form
+Manually built container set, inspired on top of the idea of an animated accordion. It can scale to any number of items. Great for building forms and menus.
+![preview](./assets/animated-form-demo.gif)
+
+
+## Authors
+
+Author|Socials
+--------|---------
+Jan Chlebek | [LinkedIn](https://www.linkedin.com/in/jan-chlebek/) - ([GitHub](https://github.com/jan-chlebek) )
+
+## Minimal path to awesome
+
+1. Open your Power App in edit mode
+2. Copy the contents of either the **[animated-accordion.pa.yaml](./source/animated-accordion.pa.yaml)** or **[animated-form.pa.yaml](./source/animated-form.pa.yaml)** depending on your preference
+3. Right-click on the screen where you want to add the snippet and select `Paste`
+
+## 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-snippets/power-apps/animated-accordions" aria-hidden="true" />
diff --git a/power-apps/animated-accordions/assets/animated-accordion-demo.gif b/power-apps/animated-accordions/assets/animated-accordion-demo.gif
diff --git a/power-apps/animated-accordions/assets/animated-accordion-demo.mp4 b/power-apps/animated-accordions/assets/animated-accordion-demo.mp4
diff --git a/power-apps/animated-accordions/assets/animated-form-demo.gif b/power-apps/animated-accordions/assets/animated-form-demo.gif
diff --git a/power-apps/animated-accordions/assets/animated-form-demo.mp4 b/power-apps/animated-accordions/assets/animated-form-demo.mp4
diff --git a/power-apps/animated-accordions/assets/sample.json b/power-apps/animated-accordions/assets/sample.json
@@ -0,0 +1,58 @@
+[
+    {
+        "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+        "name": "pnp-powerplatform-snippets-animated-accordions",
+        "version": "1.0.0.0",
+        "source": "pnp",
+        "creationDateTime": "2025-05-22T00:00:00.000Z",
+        "updateDateTime": "2025-05-22T00:00:00.000Z",
+        "title": "Animated Accordions",
+        "shortDescription": "Animated accordion component implemented using native components in Power Apps Canvas.",
+        "longDescription": [
+            "Animated accordion component implemented using native components in Power Apps Canvas. Great for FAQ, navigation menus, interactive forms and any other foldable UI objects that require content organization."
+        ],
+        "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/animated-accordions/",
+        "products": [
+            "Power Platform",
+            "Power Apps",
+            "powerplatform-snippets",
+            "power-apps-snippets"
+        ],
+        "tags": [
+        ],
+        "categories": [
+        ],
+        "thumbnails": [
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/main/power-apps/animated-accordions/assets/animated-accordion-demo.gif",
+                "alt": "Preview GIF - Animated Accordion"
+            },
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/main/power-apps/animated-accordions/assets/animated-form-demo.gif",
+                "alt": "Preview GIF - Animated Form"
+        }
+        ],
+
+        "metadata": [
+            {
+                "key": "Product",
+                "value": "Power Apps"
+            },
+            {
+                "key": "Type",
+                "value": "Snippet"
+            }
+        ],
+        "authors": [
+            {
+                "gitHubAccount": "jan-chlebek",
+                "name": "Jan Chlebek",
+                "pictureUrl": "https://github.com/jan-chlebek.png"
+            }
+        ]
+    }
+]
diff --git a/power-apps/animated-accordions/source/animated-accordion.pa.yaml b/power-apps/animated-accordions/source/animated-accordion.pa.yaml
@@ -0,0 +1,131 @@
+- cntAnimatedAccordion:
+    Control: GroupContainer@1.3.0
+    Variant: ManualLayout
+    Properties:
+      ContentLanguage: |-
+        =""
+        /*
+        Animated Form - Canvas App code snippet
+        Author: Jan Chlebek, May 2025
+        Linkedin: https://www.linkedin.com/in/jan-chlebek/
+        GitHub: https://github.com/jan-chlebek
+        */
+      DropShadow: =DropShadow.None
+      Height: =galAccordion.Height
+      RadiusBottomLeft: =0
+      RadiusBottomRight: =0
+      RadiusTopLeft: =0
+      RadiusTopRight: =0
+      Width: =galAccordion.Width
+      X: =422
+      Y: =156
+    Children:
+      - galAccordion:
+          Control: Gallery@2.15.0
+          Variant: VariableHeight
+          Properties:
+            ContentLanguage: |-
+              =""
+              /*
+              Animated Accordion - Canvas App code snippet
+              Author: Jan Chlebek, May 2025
+              Linkedin: https://www.linkedin.com/in/jan-chlebek/
+              GitHub: https://github.com/jan-chlebek
+              */
+            Height: =Self.AllItemsCount * cntAccordionHeader.Height + Self.MaxTemplateSize
+            Items: |-
+              =[
+                  {Header: "Is it doable?", Value: "DOABLE. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},
+                  {Header: "Is it styled?", Value: "STYLED. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "},
+                  {Header: "Is it animated?", Value: "ANIMATED. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "},
+              ]
+            MaxTemplateSize: =Self.TemplateHeight
+            Width: =500
+          Children:
+            - shpAccordionSpacer:
+                Control: Rectangle@2.3.0
+                Properties:
+                  Height: =0.5
+                  OnSelect: =Select(Parent)
+                  Width: =Parent.TemplateWidth - cntAccordionContent.PaddingLeft - cntAccordionContent.PaddingRight - cntAccordionContent.RadiusBottomLeft - cntAccordionContent.RadiusBottomRight
+                  X: =cntAccordionContent.PaddingLeft + cntAccordionContent.RadiusBottomLeft
+                  Y: =cntAccordionContent.Height-2
+            - cntAccordionContent:
+                Control: GroupContainer@1.3.0
+                Variant: AutoLayout
+                Properties:
+                  DropShadow: =DropShadow.None
+                  Height: "=46 + If(\r\n    // As animation do not work in Studio Editor, additional state is added to ensure app can be fully tested\r\n    StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n    If(ThisItem.Header = lclCurrentSelectedAccordionItem, txtAccordionItem.Height),\r\n\r\n    With(\r\n        {_timerStep: tmrAccordionTimer.Value / tmrAccordionTimer.Duration},\r\n        If(\r\n            ThisItem.Header = lclCurrentSelectedAccordionItem, \r\n            txtAccordionItem.Height * (_timerStep) * (2 - _timerStep), \r\n\r\n            ThisItem.Header = lclLastSelectedAccordionItem,\r\n            txtAccordionItem.Height* (1 - (_timerStep) * (2 - _timerStep)),\r\n            \r\n            0\r\n        )\r\n    )\r\n)"
+                  LayoutDirection: =LayoutDirection.Vertical
+                  PaddingBottom: =2
+                  PaddingLeft: =2
+                  PaddingRight: =2
+                  PaddingTop: =2
+                  Width: =Parent.TemplateWidth
+                Children:
+                  - cntAccordionHeader:
+                      Control: GroupContainer@1.3.0
+                      Variant: AutoLayout
+                      Properties:
+                        AlignInContainer: =AlignInContainer.SetByContainer
+                        DropShadow: =DropShadow.None
+                        Fill: =Color.White
+                        FillPortions: =0
+                        Height: =40
+                        LayoutAlignItems: =LayoutAlignItems.Center
+                        LayoutDirection: =LayoutDirection.Horizontal
+                        Width: =Parent.Width - Parent.PaddingLeft - Parent.PaddingRight
+                      Children:
+                        - btnAccordionTitle:
+                            Control: Button@0.0.45
+                            Properties:
+                              Align: =Align.Left
+                              Appearance: ='ButtonCanvas.Appearance'.Transparent
+                              IconStyle: ='ButtonCanvas.IconStyle'.Outline
+                              OnSelect: =Select(btnAccordionChevron)
+                              Text: =ThisItem.Header
+                              Width: =Parent.Width - btnAccordionChevron.Width
+                        - btnAccordionChevron:
+                            Control: Button@0.0.45
+                            Properties:
+                              Appearance: ='ButtonCanvas.Appearance'.Transparent
+                              Icon: ="ChevronDown"
+                              IconRotation: "=\r\nIf(\r\n    ThisItem.Header = lclCurrentSelectedAccordionItem, \r\n    If(\r\n        StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n        180,\r\n        tmrAccordionTimer.Value / tmrAccordionTimer.Duration * 180\r\n    ),\r\n\r\n    ThisItem.Header = lclLastSelectedAccordionItem,\r\n    If(\r\n        StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n        0,\r\n        (1 - tmrAccordionTimer.Value / tmrAccordionTimer.Duration) * 180\r\n    ),\r\n    \r\n    0\r\n)"
+                              Layout: ='ButtonCanvas.Layout'.IconOnly
+                              OnSelect: |
+                                =Reset(tmrAccordionTimer);
+                                UpdateContext({lclStartTimer: false});
+                                UpdateContext({
+                                    lclStartTimer: true, 
+                                    lclLastSelectedAccordionItem: lclCurrentSelectedAccordionItem,
+                                    lclCurrentSelectedAccordionItem: If(lclCurrentSelectedAccordionItem = ThisItem.Header, Blank(), ThisItem.Header)}
+                                )
+                              Text: =ThisItem.Header
+                              Width: =32
+                  - txtAccordionItem:
+                      Control: Text@0.0.51
+                      Properties:
+                        AutoHeight: =true
+                        Height: =40
+                        PaddingBottom: =10
+                        PaddingLeft: =5
+                        PaddingRight: =5
+                        PaddingTop: =10
+                        Text: =ThisItem.Value
+                        Visible: |-
+                          =// To ensure proper tabulation support and component memory management, we hide item content when it won't be visible. Without this statement, when tabulating through the component, the user could see its content without expanding it and breaking the UI
+                          ThisItem.Header = lclCurrentSelectedAccordionItem || (ThisItem.Header = lclLastSelectedAccordionItem && lclStartTimer)
+                        Width: =Parent.Width - Parent.PaddingLeft - Parent.PaddingRight
+                        Y: =40
+      - tmrAccordionTimer:
+          Control: Timer@2.1.0
+          Properties:
+            AutoPause: =false
+            AutoStart: =true
+            Duration: =400
+            OnTimerEnd: |-
+              =UpdateContext({lclStartTimer: false})
+            Start: =lclStartTimer
+            Text: =Self.Value
+            Visible: =false
+            Y: =360