Skip to content
The accordion can minimise or maximise your data inside the box.
How to design it in Power Apps
Preview
What does it consist of?
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'>
<path d='M994.034 694.296c-18.796-27.296-49.269-27.3-68.067 0l-351.074 509.836c-18.797 27.296-7.18 49.424 25.959 49.424h718.297c33.133 0 44.757-22.125 25.959-49.424L994.034 694.296Z' fill-rule='evenodd'/>
</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'>
<path d='M994.034 1226.26c-18.796 27.296-49.269 27.3-68.067 0L574.893 716.424C556.096 689.128 567.713 667 600.852 667h718.297c33.133 0 44.757 22.125 25.959 49.424L994.034 1226.26Z' fill-rule='evenodd'/>
</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?
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 width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2352 2H1.3472L6.29118 13L11.2352 2Z" fill="white" stroke="white" stroke-width="2.35714" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Import a new SVG file, call it "svg_up_icon" with this XML code:
<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2351 13H1.34717L6.29115 2L11.2351 13Z" fill="white" stroke="white" stroke-width="2.35714" stroke-linecap="round" stroke-linejoin="round"/>
</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
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.