In this article, we will explore how to create an accordion in a PowerApps Canvas Application.

In our application Screen, we will have a container, which contains:

• A horizontal container, with two main components
  • The section on the left will contain an HTML text with our help guidelines.
  • A right container which contains an optional image.
• An accordion text (label)
• The left help icon
• An expand button on the far right.

The container’s height will be dynamic and based on a context variable set when the accordion text or expand button is clicked.

If(
    varHelpAccordion = true,
    UpdateContext({varHelpAccordion: false}),
    UpdateContext({varHelpAccordion: true})
)

Now, the accordion height’s value is as follows:

If(varHelpAccordion,Parent.Height - Self.Y*2,48)

What this does, is that it checks the varHelpAccordion value, if it is true (expanded), the container height is calculated dynamically from the (Parent. Height- Self.Y*2) which will ensure that that accordion is vertically centred in the screen, if not (collapsed), it will set the height to 48.

Download the app from GitHub

The sample code of this accordion is freely available from GitHub:

https://github.com/samirlogisam/powerapps_accordion