Dropdowns for Power Apps
A dropdown hides a list until the user opens it: a menu of actions, an account menu, or a picker that searches your data as the user types. The menu dropdowns paste as a trigger control plus a hidden container (conDropdown, or conDropdownUserProfile in User Profile Dropdown) with a gallery galBtnItems of item buttons, wired to one variable that opens the menu and one that stores the pick. The two data pickers, Searchable Lookup and People Picker, swap the item list for a search box over a list, table or the Office 365 directory. Reach for one when the built-in Dropdown control is too plain, or when the user must find one record among many.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Dropdown Menu | Free | Classic, Modern | A plain menu of options under a button | Trigger Button Label, Data Source (Manual Items or SharePoint), SharePoint List Name, Column Name, Column Type, Dropdown Items |
| User Profile Dropdown | Paid | Classic, Modern | An account menu under the profile picture: name, email, items and Sign out | Use MS Account, Custom User Name, Custom User Email, Data Source, SharePoint List Name, Column Name, Column Type, Menu Items, Sign Out Button Text |
| Nested Dropdown | Paid | Classic, Modern | A menu where marked items expand into a second level of sub-items | Button Text, Data Source, SharePoint List Name, Column Name, Column Type, Main Items, Can Expand?, Sub-Items |
| Profile Menu | Paid | Classic, Modern | An account menu under a text button: name, email, items and Sign out | Trigger Button Text, Use MS Account, Custom User Name, Custom User Email, Data Source, SharePoint List Name, Column Name, Column Type, Menu Items, Sign Out Button Text |
| Inline Dropdown | Paid | Classic, Modern | A flat menu with tree lines and a swappable icon on the trigger | Trigger Button Label, Data Source, SharePoint List Name, Column Name, Column Type, Trigger Icon Source, Custom Icon YAML, Power Apps Icon Name, Dropdown Items |
| Navigation Dropdown | Paid | Classic, Modern | A menu whose items carry an icon in front of the label | Trigger Button Text, Data Source (Manual Items or SharePoint), SharePoint List Name, Column Name, Column Type, Dropdown Items |
| Searchable Lookup | Paid | Classic, Modern | Finding one record in a list or table by typing, top 10 matches shown | List / Table Name, Display Column, Column Type |
| People Picker | Paid | Classic, Modern | Finding a person in Office 365 or a custom list, shown with initials avatars | Data Source (Office365Users or Static List), People List (Full Name, Department / Role) |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Dropdowns.
To copy a variant into Power Apps Studio, follow Getting Started. Dropdown Menu is free; the others need a Components, Ultra, Team or Lifetime plan, and the Settings tab only accepts changes on Ultra, Team or Lifetime.
After you paste
In the menu dropdowns the trigger toggles varDropdown, and each item button (btnItem, or btnItem_2 in User Profile Dropdown) only stores the label in varDropdownSelected; only Navigation Dropdown then closes the list. Replace the OnSelect of btnItem with this (scrDashboard and scrSettings are your own screens). The last line closes the menu; in Navigation Dropdown and User Profile Dropdown, which open with Set, write Set(varDropdown, false) instead. In Dropdown Expandable the Set sits inside an If that handles the expand arrow, so add the Switch right after that Set:
Set(varDropdownSelected, ThisItem.label);
Switch(ThisItem.label,
"Dashboard", Navigate(scrDashboard),
"Settings", Navigate(scrSettings)
);
UpdateContext({ varDropdown: false })
The two account menus show User().FullName and User().Email while Use MS Account is on. Their Sign out button (btnSeparatedItem in Dropdown - Profile Menu, btnSeparatedItem_2 in User Profile Dropdown) ships with a Notify() placeholder; replace its OnSelect with a real sign out:
Exit(true)
Searchable Lookup stores the chosen record in varLookupSelected, People Picker the chosen person in varPickerSelected:
// Searchable Lookup: save the record, or read one column
Patch(Tasks, Defaults(Tasks), { Project: varLookupSelected });
varLookupSelected.Title
// People Picker: Office365Users, then Static List
varPickerSelected.DisplayName
varPickerSelected.Name
Good to know
- In the Modern YAML the text input has no
Textproperty: read what was typed with.Valuewhere the formulas above say.Text. - Searchable Lookup and People Picker have an Instructions tab. People Picker needs the Office 365 Users connector added under Data before you paste, because its gallery calls
Office365Users.SearchUser(); with Static List it filters a collectioncolPeople(columnsNameandDepartment) that you fill inApp.OnStart. Searchable Lookup filters withtxtLookupSearch.Text in 'Column';inis not delegated by SharePoint, so a large list is only searched within your data row limit. - Navigation Dropdown and User Profile Dropdown open with
Set(varDropdown, ...), a global variable; the other menus useUpdateContext({ varDropdown: ... }), a context variable for one screen. All sharevarDropdownSelected, so two on one screen open and select together; rename the variables in one. - With the SharePoint data source the gallery's
Itemsbecomes your list and the menu container's heightCountRows('List') * 40, one row per item and no scrolling, so keep the list short. Column Type "Choice / Lookup (.Value)" makes the item textThisItem.'Column'.Value. - User Profile Dropdown's trigger is the picture
imgProfilePicture(User().Image) with an invisible buttonbtnOverlayon top, so the Trigger Button Text field in its Settings tab is not used by the generated YAML. Dropdown - Profile Menu is the same menu behind a text button that uses it. - The data pickers have a full-screen invisible button (
btnLookupOverlay,btnPickerOverlay) that closes the list on a tap elsewhere; the menu dropdowns have none. Every variant offers Classic and Modern on the YAML tab with the same control and variable names, and Dropdown - Notion Style keeps a pasted Custom Icon YAML in both.
Related
Open the category at Dropdowns. For the headers and side menus they live in, see Navigation Bars and Sidebars.