Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Accordion

MyCondy

Last edited 119 days ago by MyCondy

The accordion can minimise or maximise your data inside the box.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Group

1x TEXT PCF

2x Image

2x HTML TEXT

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(_var_minmax,false)

Step 2 - create HTML accordion box

Add a new HTML TEXT object, call it "accordion_box" with this "HTML text" property:

"<div style='margin:0px;width:"&Self.Width-5&"px;height:"&Self.Height-5&"px;background-color:#fff; border-radius:10px; border: 4px; border-style: solid; border-color:#2D92FA;'></div>"

and "Height" property:

If(_var_minmax,342/3-22, 342)

It is up to you of how height your box will be.

Step 3 - create header HTML box

Add a new HTML TEXT object, call it "header_box" with this "HTML text" property:

"<div style='margin:0px;width:"&Self.Width-5&"px;height:85px;background-color:#2D92FA; border-radius:10px; border: 2px; border-style: solid; border-color:#2D92FA;'></div>"

Again, the height of this html div could be different. It is your choice.

Step 4 - create title for the accordion

Add a new TEXT PCF object, call it "accordion_title" with this "Text" property:

"Report"

Step 5 - add SVG icons

Add a new Image object, call it "min_icon" with this "Image" property:

"data:image/svg+xml;utf8, "&EncodeUrl("<svg fill='#ffffff' width='800px' height='800px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'>

</svg>")

and "Visible" property:

If(IsBlank(_var_minmax) || _var_minmax,true,false)

Add a new Image object, call it "max_icon" with this "Image" property:

"data:image/svg+xml;utf8, "&EncodeUrl("<svg fill='#ffffff' width='800px' height='800px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'>

</svg>")

and "Visible" property:

If(IsBlank(_var_minmax) || _var_minmax,false,true)

Step 6 - group all objects

Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

1x Group

3x Frame

2x Vector

1x Text

1x Rectangle

Procedure

Step 1 - create accordion frame

Add a new Frame (F command) object, call it "cont_accordion_frame" with these properties:

⁠

⁠

Step 2 - create content for the frame

Add a new Rectangle (R command) object under a "cont_accordion_frame" frame, call it "html_header_box" with these properties:

⁠

⁠

Import a new SVG file, call it "svg_down_icon" with this XML code:

</svg>

Import a new SVG file, call it "svg_up_icon" with this XML code:

</svg>

Add a new Text (T command) object under a "horcont_content_info" frame, call it "lbl_accordion_title" with these properties:

⁠

⁠

Step 3 - group all objects

Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

gr_accordion_group = Group

cont_accordion_frame = Manual Container

svg_down_icon, svg_up_icon = Image

lbl_accordion_title = Label

html_header_box =HTML TEXT

YAML Output

⁠

⁠

Used Colours

Accordion Box (background) - #FFFFFF

Accordion Box (border) - #2D92FA

Accordion Title - #FFFFFF

Icons - #FFFFFF

⁠

← Custom Components⁠

⁠

Bar Chart →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.