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,
- Default = textVal //It’s a Variable
- Fill = // Anything you feel suitable, I used “RGBA(230, 230, 230, 1)”
- Height and Text Size = // Anything you feel suitable.
- onChange = UpdateContext({showDropdown: !IsBlank(Self.Text)}) // Condition to show/hide the CustomDropdown (Gallery).
‘Gallery’ changes below,
- Items = Search(Accounts, TextInput.Text, “name”) // Filter Parameter by text.
- showScrollBar = false
- TemplateFill = // Anything you feel suitable, I used “RGBA(255, 255, 255, 1)”
- TemplatePadding = 10
- TemplateSize = // As per your contents in a row
- 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,
- onSelect = UpdateContext({textval: ThisItem.’Account Name’}) //Defined variable
- 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!