Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Popup Menu

MyCondy

Last edited 39 days ago by MyCondy

You will be able to show menu after clicking on icon placed on the base menu.

How to design it in Power Apps

Preview

⁠

⁠

⁠

What does it consist of?

1x Group

3x Vertical Container

1x Button PCF

3x Image

3x Label

1x HTML TEXT

Procedure

Step 1 - create Menu SVG image

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='500' height='129' viewBox='0 0 569 129' fill='none' xmlns='http://www.w3.org/2000/svg'> <g filter='url(#filter0_d_2970_127)'> <path d='M21 27C21 21.4772 25.4772 17 31 17H550C555.523 17 560 21.4772 560 27V74C560 90.5685 546.569 104 530 104H51C34.4315 104 21 90.5685 21 74V27Z' fill='white'/> </g> <defs> <filter id='filter0_d_2970_127' x='0.700001' y='0.700001' width='569.6' height='127.6' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'> <feFlood flood-opacity='0' result='BackgroundImageFix'/> <feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/> <feOffset dy='4'/> <feGaussianBlur stdDeviation='10.15'/> <feComposite in2='hardAlpha' operator='out'/> <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/> <feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_2970_127'/> <feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_2970_127' result='shape'/> </filter> </defs> </svg>")

Step 2 - create menu item with selection

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M15 7.5H20C21.7451 7.51052 23.4571 7.97753 24.9658 8.85468C26.4745 9.73183 27.7275 10.9886 28.6 12.5C29.4925 14.0159 30.7637 15.2737 32.289 16.1502C33.814 17.0267 35.541 17.4919 37.3 17.5H45C47.6522 17.5 50.1957 18.5534 52.071 20.4288C53.9465 22.3041 55 24.8478 55 27.5V42.5C55 45.1522 53.9465 47.6955 52.071 49.571C50.1957 51.4462 47.6522 52.5 45 52.5H15C12.3478 52.5 9.8043 51.4462 7.92893 49.571C6.05355 47.6955 5 45.1522 5 42.5V17.5C5 14.8478 6.05355 12.3041 7.92893 10.4288C9.8043 8.5534 12.3478 7.5 15 7.5Z' fill='#1D8CFF'/> <path d='M28.6 27.5V42.5M20 35.5H37.3M15 7.5H20C21.7451 7.51052 23.4571 7.97753 24.9658 8.85468C26.4745 9.73183 27.7275 10.9886 28.6 12.5C29.4925 14.0159 30.7637 15.2737 32.289 16.1502C33.814 17.0267 35.541 17.4919 37.3 17.5H45C47.6522 17.5 50.1957 18.5534 52.071 20.4288C53.9465 22.3041 55 24.8478 55 27.5V42.5C55 45.1522 53.9465 47.6955 52.071 49.571C50.1957 51.4462 47.6522 52.5 45 52.5H15C12.3478 52.5 9.8043 51.4462 7.92893 49.571C6.05355 47.6955 5 45.1522 5 42.5V17.5C5 14.8478 6.05355 12.3041 7.92893 10.4288C9.8043 8.5534 12.3478 7.5 15 7.5Z' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/> </svg>")

and "Visible" property:

!selClick || IsBlank(selClick)

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M15 7.5H20C21.7451 7.51052 23.4571 7.97753 24.9658 8.85468C26.4745 9.73183 27.7275 10.9886 28.6 12.5C29.4925 14.0159 30.7637 15.2737 32.289 16.1502C33.814 17.0267 35.541 17.4919 37.3 17.5H45C47.6522 17.5 50.1957 18.5534 52.071 20.4288C53.9465 22.3041 55 24.8478 55 27.5V42.5C55 45.1522 53.9465 47.6955 52.071 49.571C50.1957 51.4462 47.6522 52.5 45 52.5H15C12.3478 52.5 9.8043 51.4462 7.92893 49.571C6.05355 47.6955 5 45.1522 5 42.5V17.5C5 14.8478 6.05355 12.3041 7.92893 10.4288C9.8043 8.5534 12.3478 7.5 15 7.5Z' fill='#1D8CFF'/> <path d='M24.9658 29L34 42.5M24.9658 42.5L34 29M15 7.5H20C21.7451 7.51052 23.4571 7.97753 24.9658 8.85468C26.4745 9.73183 27.7275 10.9886 28.6 12.5C29.4925 14.0159 30.7637 15.2737 32.289 16.1502C33.814 17.0267 35.541 17.4919 37.3 17.5H45C47.6522 17.5 50.1957 18.5534 52.071 20.4288C53.9465 22.3041 55 24.8478 55 27.5V42.5C55 45.1522 53.9465 47.6955 52.071 49.571C50.1957 51.4462 47.6522 52.5 45 52.5H15C12.3478 52.5 9.8043 51.4462 7.92893 49.571C6.05355 47.6955 5 45.1522 5 42.5V17.5C5 14.8478 6.05355 12.3041 7.92893 10.4288C9.8043 8.5534 12.3478 7.5 15 7.5Z' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/> </svg>")

and "Visible" property:

selClick

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

"<div style='border-radius:10px;background-color:#efefef;width:223px;height:4px;'></div>"

Add a new Button PCF object, call it "ButtonAdd" with this "Appearance" property:

'ButtonCanvas.Appearance'.Transparent

Step 3 - create popup menu items

Add a new Vertical Container PCF object, call it "word" with this "DropShadow" property:

DropShadow.Semibold

and "Border radius" property:

and "Visible" property:

selClick

Add a new Vertical Container PCF object, call it "excel" with this "DropShadow" property:

DropShadow.Semibold

and "Border radius" property:

and "Visible" property:

selClick

Add a new Vertical Container PCF object, call it "pdf" with this "DropShadow" property:

DropShadow.Semibold

and "Border radius" property:

and "Visible" property:

selClick

Step 4 - add labels for containers

Add a new Label object, call it "w" with this "Text" property:

Add a new Label object, call it "x" with this "Text" property:

Add a new Label object, call it "p" with this "Text" property:

Step 5 - 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

5x Frame

2x Rectangle

2x Vector

3x Text

Procedure

Step 1 - create menu box with selection

Add a new Rectangle (R command) object, call it "html_menu" with these properties:

⁠

⁠

⁠

Add a new Rectangle (R command) object, call it "html_selection" with these properties:

⁠

⁠

Step 2 - add menu icons

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

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

Step 3 - add popup items

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_word" with these properties:

⁠

⁠

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

⁠

⁠

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_excel" with these properties:

⁠

⁠

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

⁠

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_pdf" with these properties:

⁠

⁠

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

⁠

Step 4 - 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_popup_menu = Group

vercont_pdf, vercont_excel, vercont_word = Vertical Container

lbl_p, lbl_x, lbl_x = Label

svg_folder, svg_folder_clicker = Image

html_selection, html_menu = HTML TEXT

YAML Output

⁠

Used Colours

Menu Image - #FFFFFF

Folder, Folder Clicked Image - #1D8CFF

Selection Image - #efefef

Word Container - #0171ff

Excel Container - #00bc48

PDF Container - #ff294a

⁠

← Menu⁠

⁠

Range Slider →⁠

⁠

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.