Create a Custom Dropdown Control in Canvas PowerApps

As we know that a Standard Dropdown control do not have enough features and has limited properties to modify. Hence I have created a custom dropdown menu.

Some drawbacks in Standard Dropdown,
1. It shows only 1 particular attribute as value. Example: “Name”
2. If multiple records of same name exist, then you cannot differentiate them.

This is Custom Dropdown I have created,

Steps to make the custom dropdown menu

Step 1. Insert a ‘Text Input’ and ‘Horizontal Gallery’ and set height of gallery of your desired height also change Template Size according to fields added into a row. (As I have added only Name, Phone and Image)

Step 2: Add an Icon ‘Down Arrow’ at the right of ‘Text Input’ and change property.

• onSelect = UpdateContext({showDropdown: !showDropdown})   //Condition to show/hide the CustomDropdown (Gallery).

Step 3: Property to be changed.
‘Text Input’ changes below,

1. Default = textVal              //It’s a Variable
2. Fill = // Anything you feel suitable, I used “RGBA(230, 230, 230, 1)”
3. Height and Text Size = // Anything you feel suitable.
4. onChange = UpdateContext({showDropdown: !IsBlank(Self.Text)})             // Condition to show/hide the CustomDropdown (Gallery).

‘Gallery’ changes below,

1. Items = Search(Accounts, TextInput.Text, “name”)             // Filter Parameter by text.
2. showScrollBar = false
3. TemplateFill = // Anything you feel suitable, I used “RGBA(255, 255, 255, 1)”
4. TemplatePadding = 10
5. TemplateSize = // As per your contents in a row
6. Visible = showDropdown              //It’s a Variable

Step 4: To add functionality of basic dropdown on selection.
Add a button to of size equal to template Size (i.e: cover entire record section) and change properties given below,

1. onSelect = UpdateContext({textval: ThisItem.’Account Name’})    //Defined variable
2. HoverFill = //Anything you feel suitable, I used “ColorFade(RGBA(240,240,240, 0.3), -10%)”

Step 5: Custom Dropdown complete. You will have something like this,

Note: For additional responsiveness in design, change X, Y, Height, Width.
Hope this helps!