diff --git a/power-apps/animated-accordions/README.md b/power-apps/animated-accordions/README.md new file mode 100644 index 0000000..22fb1d6 --- /dev/null +++ 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.** + + diff --git a/power-apps/animated-accordions/assets/animated-accordion-demo.gif b/power-apps/animated-accordions/assets/animated-accordion-demo.gif new file mode 100644 index 0000000..11eb839 Binary files /dev/null and b/power-apps/animated-accordions/assets/animated-accordion-demo.gif differ diff --git a/power-apps/animated-accordions/assets/animated-accordion-demo.mp4 b/power-apps/animated-accordions/assets/animated-accordion-demo.mp4 new file mode 100644 index 0000000..66d740c Binary files /dev/null and b/power-apps/animated-accordions/assets/animated-accordion-demo.mp4 differ diff --git a/power-apps/animated-accordions/assets/animated-form-demo.gif b/power-apps/animated-accordions/assets/animated-form-demo.gif new file mode 100644 index 0000000..dc4e21f Binary files /dev/null and b/power-apps/animated-accordions/assets/animated-form-demo.gif differ diff --git a/power-apps/animated-accordions/assets/animated-form-demo.mp4 b/power-apps/animated-accordions/assets/animated-form-demo.mp4 new file mode 100644 index 0000000..1e58ec2 Binary files /dev/null and b/power-apps/animated-accordions/assets/animated-form-demo.mp4 differ diff --git a/power-apps/animated-accordions/assets/sample.json b/power-apps/animated-accordions/assets/sample.json new file mode 100644 index 0000000..95015d6 --- /dev/null +++ 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 new file mode 100644 index 0000000..815ecc6 --- /dev/null +++ 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 diff --git a/power-apps/animated-accordions/source/animated-form.pa.yaml b/power-apps/animated-accordions/source/animated-form.pa.yaml new file mode 100644 index 0000000..4a24fc8 --- /dev/null +++ b/power-apps/animated-accordions/source/animated-form.pa.yaml @@ -0,0 +1,522 @@ +- cntAnimatedForm: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + 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: =600 + LayoutDirection: =LayoutDirection.Vertical + RadiusBottomLeft: =0 + RadiusBottomRight: =0 + RadiusTopLeft: =0 + RadiusTopRight: =0 + X: =415 + Y: =75 + Children: + - cntSection1: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: "=42 + 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(btnSection1Title.Text = lclCurrentSelectedAccordionItem, cntSection1Content.Height),\r\n\r\n With(\r\n {_timerStep: tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration},\r\n If(\r\n btnSection1Title.Text = lclCurrentSelectedAccordionItem, \r\n cntSection1Content.Height * (_timerStep) * (2 - _timerStep), \r\n\r\n btnSection1Title.Text = lclLastSelectedAccordionItem,\r\n cntSection1Content.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.Width + Y: =20 + Children: + - cntSection1Header: + 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 + PaddingRight: =3 + Width: =Parent.Width - Parent.PaddingLeft - Parent.PaddingRight + Children: + - btnSection1Title: + Control: Button@0.0.45 + Properties: + AccessibleLabel: =Self.Text + Align: =Align.Left + Appearance: ='ButtonCanvas.Appearance'.Transparent + IconStyle: ='ButtonCanvas.IconStyle'.Outline + OnSelect: =Select(btnSection1Chevron) + Text: ="Personal Information" + Width: =Parent.Width - btnSection1Chevron.Width - Parent.PaddingRight + - btnSection1Chevron: + Control: Button@0.0.45 + Properties: + Appearance: ='ButtonCanvas.Appearance'.Transparent + Icon: ="ChevronDown" + IconRotation: "=\r\nIf(\r\n btnSection1Title.Text = lclCurrentSelectedAccordionItem || lclCurrentSelectedAccordionItem = \"All\", \r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 180,\r\n tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration * 180\r\n ),\r\n\r\n btnSection1Title.Text = lclLastSelectedAccordionItem || lclLastSelectedAccordionItem = \"All\",\r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 0,\r\n (1 - tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration) * 180\r\n ),\r\n \r\n 0\r\n)" + Layout: ='ButtonCanvas.Layout'.IconOnly + OnSelect: | + =Reset(tmrAnimatedFormTimer); + UpdateContext({lclStartTimer: false}); + UpdateContext({ + lclStartTimer: true, + lclLastSelectedAccordionItem: lclCurrentSelectedAccordionItem, + lclCurrentSelectedAccordionItem: If(lclCurrentSelectedAccordionItem = btnSection1Title.Text , Blank(), btnSection1Title.Text) + }) + Text: =btnSection1Title.Text + Width: =32 + - cntSection1Content: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =210 + LayoutDirection: =LayoutDirection.Vertical + 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 + btnSection1Title.Text = lclCurrentSelectedAccordionItem || (btnSection1Title.Text = lclLastSelectedAccordionItem && lclStartTimer) + Width: =Parent.Width + Children: + - cntSection1Field1: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection1Field1: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Font: =Font.'Segoe UI' + Text: ="First Name" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - inpSection1Field1: + Control: TextInput@0.0.54 + Properties: + Placeholder: ="Provide first name..." + - cntSection1Field2: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection1Field2: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Last Name" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - inpSection1Field2: + Control: TextInput@0.0.54 + Properties: + Placeholder: ="Provide last name..." + - cntSection1Field3: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection1Field3: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="LinkedIn" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - inpSection1Field3: + Control: TextInput@0.0.54 + Properties: + Placeholder: ="Provide last name..." + - cntSection1Field4: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection1Field4: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="GitHub" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - inpSection1Field4: + Control: TextInput@0.0.54 + Properties: + Placeholder: ="Provide last name..." + - cntSection1Field5: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection1Field5: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Date of Birth" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - dteSection1Field5: + Control: DatePicker@0.0.46 + - cntSection2: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: "=42 + 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(btnSection2Title.Text = lclCurrentSelectedAccordionItem, cntSection2Content.Height),\r\n\r\n With(\r\n {_timerStep: tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration},\r\n If(\r\n btnSection2Title.Text = lclCurrentSelectedAccordionItem, \r\n cntSection2Content.Height * (_timerStep) * (2 - _timerStep), \r\n\r\n btnSection2Title.Text = lclLastSelectedAccordionItem,\r\n cntSection2Content.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.Width + Y: =40 + Children: + - cntSection2Header: + 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 + PaddingRight: =3 + Width: =Parent.Width - Parent.PaddingLeft - Parent.PaddingRight + Children: + - btnSection2Title: + Control: Button@0.0.45 + Properties: + AccessibleLabel: =Self.Text + Align: =Align.Left + Appearance: ='ButtonCanvas.Appearance'.Transparent + IconStyle: ='ButtonCanvas.IconStyle'.Outline + OnSelect: =Select(btnSection1Chevron_1) + Text: ="Employment Information" + Width: =Parent.Width - btnSection1Chevron_1.Width - Parent.PaddingRight + - btnSection1Chevron_1: + Control: Button@0.0.45 + Properties: + Appearance: ='ButtonCanvas.Appearance'.Transparent + Icon: ="ChevronDown" + IconRotation: "=\r\nIf(\r\n btnSection2Title.Text = lclCurrentSelectedAccordionItem || lclCurrentSelectedAccordionItem = \"All\", \r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 180,\r\n tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration * 180\r\n ),\r\n\r\n btnSection2Title.Text = lclLastSelectedAccordionItem || lclLastSelectedAccordionItem = \"All\",\r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 0,\r\n (1 - tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration) * 180\r\n ),\r\n \r\n 0\r\n)" + Layout: ='ButtonCanvas.Layout'.IconOnly + OnSelect: | + =Reset(tmrAnimatedFormTimer); + UpdateContext({lclStartTimer: false}); + UpdateContext({ + lclStartTimer: true, + lclLastSelectedAccordionItem: lclCurrentSelectedAccordionItem, + lclCurrentSelectedAccordionItem: If(lclCurrentSelectedAccordionItem = btnSection2Title.Text , Blank(), btnSection2Title.Text) + }) + Text: =btnSection2Title.Text + Width: =32 + - cntSection2Content: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =130 + LayoutDirection: =LayoutDirection.Vertical + 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 + btnSection2Title.Text = lclCurrentSelectedAccordionItem || (btnSection2Title.Text = lclLastSelectedAccordionItem && lclStartTimer) + Width: =Parent.Width + Children: + - cntSection2Field1: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection2Field1: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Font: =Font.'Segoe UI' + Text: ="Expected Salary" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - numSection2Field1: + Control: NumberInput@2.9.12 + - cntSection2Field2: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection2Field2: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Work Location" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - cbxSection2Field2: + Control: ComboBox@0.0.51 + - cntSection2Field3: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection2Field3: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Start Date" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - dteSection2Field3: + Control: DatePicker@0.0.46 + - cntSection3: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: "=42 + 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(btnSection3Title.Text = lclCurrentSelectedAccordionItem, cntSection3Content.Height),\r\n\r\n With(\r\n {_timerStep: tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration},\r\n If(\r\n btnSection3Title.Text = lclCurrentSelectedAccordionItem, \r\n cntSection3Content.Height * (_timerStep) * (2 - _timerStep), \r\n\r\n btnSection3Title.Text = lclLastSelectedAccordionItem,\r\n cntSection3Content.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.Width + Y: =40 + Children: + - cntSection3Header: + 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 + PaddingRight: =3 + Width: =Parent.Width - Parent.PaddingLeft - Parent.PaddingRight + Children: + - btnSection3Title: + Control: Button@0.0.45 + Properties: + AccessibleLabel: =Self.Text + Align: =Align.Left + Appearance: ='ButtonCanvas.Appearance'.Transparent + IconStyle: ='ButtonCanvas.IconStyle'.Outline + OnSelect: =Select(btnSection3Chevron) + Text: ="Skills and Competencies" + Width: =Parent.Width - btnSection3Chevron.Width - Parent.PaddingRight + - btnSection3Chevron: + Control: Button@0.0.45 + Properties: + Appearance: ='ButtonCanvas.Appearance'.Transparent + Icon: ="ChevronDown" + IconRotation: "=\r\nIf(\r\n btnSection3Title.Text = lclCurrentSelectedAccordionItem || lclCurrentSelectedAccordionItem = \"All\", \r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 180,\r\n tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration * 180\r\n ),\r\n\r\n btnSection3Title.Text = lclLastSelectedAccordionItem || lclLastSelectedAccordionItem = \"All\",\r\n If(\r\n StartsWith(Host.Version, \"PowerApps-Studio\"),\r\n 0,\r\n (1 - tmrAnimatedFormTimer.Value / tmrAnimatedFormTimer.Duration) * 180\r\n ),\r\n \r\n 0\r\n)" + Layout: ='ButtonCanvas.Layout'.IconOnly + OnSelect: | + =Reset(tmrAnimatedFormTimer); + UpdateContext({lclStartTimer: false}); + UpdateContext({ + lclStartTimer: true, + lclLastSelectedAccordionItem: lclCurrentSelectedAccordionItem, + lclCurrentSelectedAccordionItem: If(lclCurrentSelectedAccordionItem = btnSection3Title.Text , Blank(), btnSection3Title.Text) + }) + Text: =btnSection3Title.Text + Width: =32 + - cntSection3Content: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =130 + LayoutDirection: =LayoutDirection.Vertical + 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 + btnSection3Title.Text = lclCurrentSelectedAccordionItem || (btnSection3Title.Text = lclLastSelectedAccordionItem && lclStartTimer) + Width: =Parent.Width + Children: + - cntSection3Field1: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection3Field1: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Font: =Font.'Segoe UI' + Text: ="Technical Skills" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - cbxSection3Field1: + Control: ComboBox@0.0.51 + - cntSection3Field2: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection3Field2: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Languages" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - cbxSection3Field2: + Control: ComboBox@0.0.51 + - cntSection3Field3: + Control: GroupContainer@1.3.0 + Variant: AutoLayout + Properties: + AlignInContainer: =AlignInContainer.SetByContainer + DropShadow: =DropShadow.None + FillPortions: =0 + Height: =40 + LayoutAlignItems: =LayoutAlignItems.Center + LayoutDirection: =LayoutDirection.Horizontal + LayoutGap: =5 + PaddingLeft: =10 + PaddingRight: =10 + Width: =Parent.Width + Children: + - txtSection3Field3: + Control: Text@0.0.51 + Properties: + Align: ='TextCanvas.Align'.End + Text: ="Certificates" + VerticalAlign: =VerticalAlign.Middle + Width: =110 + - cbxSection3Field3: + Control: ComboBox@0.0.51 + - tmrAnimatedFormTimer: + 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