Combo box control in Power Apps | Search, Filter, Large Data, Default values

hello everyone raza here in today's video i will cover the combo box control in powerapps this control allows us to make selections from a provided list of choices supports search and multiple selection capabilities it is one of the most popular controls we will look at some of its key properties how it is different from a drop down control how to make best use of this control look at its limitations understand how it handles large data sources and a lot more so let's check it out in action [Music] the combobox control is a control that allows users to make selections from a provided list of choices it supports searching and multiple selections to add a combo box control go to insert search for combobox and add it on the screen the items property is what defines the data for the combobox control by default you get a table called combobox sample that has sample data for the items property i have gone ahead and entered tabular data and this data can come from a collection it can come from a data source as well to begin with i have added my own items property created a table that has multiple records with two key properties the color and the tag the combo box is currently listing out all the color values i can make multiple selections i can remove my selections and i even have the ability here to search for the options in the combo box in the properties dialog for the combobox datasource is your items property for the fields property here we can define the layout of the combobox control and we can define the properties related to the primary text which is the selected text value that shows up in the combo box control currently it is set to my color property and then the search field which is currently also set to the color property you even have the ability to change the layout and there are three different layout types that are provided for us let's change the layout of this combo box to double here i get an additional option which is the secondary text this text will show up when the user opens the combo box to make their selections in this case the secondary text is set as tag so now if i open the combo box control i will see both the primary text and the secondary text and once i make my selections the selected items will only showcase the primary text the display mode property has three options edit is the default option meaning the user can make changes to the values inside the combo box control view will set the combo box control in read-only mode disabled will disable the combo box control visible is to show or hide the combo box control there are various options provided in properties to change the design of the combo box wherein you can change the color the selected color the fill color and a lot more as an example the chevron color for the icon let's say i change this to purple we can see the color for that icon has changed now a combo box control allows multiple selections and searching for data within those selections in scenarios wherein you would want the user to only make single selections there is a property called allow multiple selections that can be turned off so the combo box control will only allow single selections you can turn off the searching feature of the combobox control as well under the advanced tab for the properties of the combo box control we have display fields these are the fields that are currently being displayed this is an array which has the names of my columns that i would like to display and search fields is the columns that i would like to search on now search fields is also an array so if you need to search on multiple columns all we have to do is plug in the name of the additional columns we would like to search on as well now you can display a maximum of two columns however for searching you can search on multiple columns related to the items property that you've provided for the combo box control now my control will search on both the color and the tag properties i'll search for the tag fire so we can see how it is showcasing the color red which has fire as a tag and if i select this it will assign the red color which is the primary text to the combobox selected value the input text placeholder property is the default text that shows up for the combo box when allow searching for the combo box is enabled in this case i have changed the text to find colors i can even add emojis in here if the allow searching property is turned off for the combo box control in that case the no selection text would be the default text that would be placed in this control the default property is a deprecated property for the combo box control always use the default selected items property if you want to set some default values for your combobox control these are the initial set of selected item or items before the user starts interacting with the control the default values that you provide has to be in line with the schema of the items property of your combobox control so in my case an item here is represented by this record that has two properties color and tag so if i would like to default my combo box control let's say to the color blue for the default selected items property i will set it to that record now if i need to default on multiple properties i will need to provide tabular data we can see that the combobox control has the two default values that i set which are blue and green now let's try and change the data source for the combobox control instead of having the table created directly in the app i will drive the information from a data source in my case my data source is a sharepoint list that i have connected in my power app this list has information about the assets that my company has procured so for the items property of the combo box control i will directly set this to my data source which is asset manager for the fields this will list out all the columns from my data source that are of type text in my data source i have model which is a column of type text whereas manufacturer is a column of type choice now if i want to list them out as primary and secondary text and even search on those columns i will get the option for the text column which is model but my choice type column which is manufacturer is not even listed here so when i connect to my list since i need the manufacturer column information i would need an extra column here which gives me the manufacturer column information in the form of text so for the items property i will use add columns i will add a column called manufacturer text and the value for this would be my column manufacturer which is of type choice so i will pick its value for the combobox controls display fields i am displaying the model and right here i can also display the manufacturer text and for the search fields i will leverage the same set of columns so now it will list out both the model and the manufacturer now the fields layout only allows two columns which is primary text and secondary text and sometimes you would like to show additional properties here to make the selection for the user more easier let's say i would like to also showcase the asset type in the items property where i was adding that extra column i can leverage that same column and add additional data to this for example i can concatenate the asset type asset type is also a choice column in my data source so i will use asset type dot value and now the options are showcasing three pieces of information the primary text and the secondary text but the secondary text has additional metadata in it it has the manufacturer name and the asset type for the search fields right now i am searching on model and manufacturer text i can search on any other column type of my choice as long as they are in the form of text so let's say i would like to also search based on asset tag asset tag is the title column in my sharepoint list so i will use title now i can search based on the asset tag as well so let's try this one ac7320 you see as i type it will give me that specific asset from my data source now the thing about the combo box is when you have multiple items selected many a times the width is not enough to fit the text of those values and the combo box ends up displaying that there are two items within it and this is not intuitive from an end user standpoint so if you would like to show the selected items of the combo box control i can insert a label control for the text property of my label control i will copy the name of my combo box control and the text property would be combobox control dot selected items now this returns tabular data the text property of the label control expects text so to convert an array of information to text we can leverage the concat function so concatenate on tabular data and then this will list out all the columns from the items property of my combo box which in this case is my data source and let's say here i would like to show the model information the separator for the selected items i'm leveraging here is semicolon so let's test this out i will select three items you can see the combo box doesn't have enough real estate to showcase that but the label control at the bottom shows me all those selected values and here you're free to add additional pieces of information as well so for example not just the model maybe i want to also show the asset type so i will concatenate the asset types value along with this as well so here it clearly shows which models were selected and what are their types there is also one interesting thing that you could do with this for the width property of the combo box control currently it's hard coded based upon the width that i have defined here but let's say i would like to change the width depending upon how many items are selected in my combo box count rows self meaning the control itself dot selected items multiplied by a particular width let's say 170 in my case now if i preview this app three items are selected so the combo box width is adjusted accordingly now if i reduce the number of items you will see how the width of the combo box is changing depending upon how many items are selected another key aspect to understand about the combo box control is the concept of delegation i have a list called work progress tracker that is connected in my power app and this list has over 2000 records for the data source of this combo box control i will connect it to that list now the moment i do that if you observe there is this hazard symbol that shows up that clearly states that there is a delegation warning the search part of this formula might not work correctly on large data sets a very common question that i receive is how much data can i show in a combo box well that limit or that number is dependent upon the number that is set for the data row limit for your power app this is the delegation limit by default it is 500 it can be increased up to 2000 that is the max that you can set now to prove my point around delegation let's make a change i will change this number to 5. for the combobox control if i open the options it only shows 5 items from my sharepoint list that has over 2000 records so it's important to note that the maximum number of items that this control can contain depends upon the delegation limit however that number comes about after the items property formula is executed currently my query is get all items from my sharepoint list so it performs that query but then it gets only five of those items because that's my delegation limit now let's add a query let's say i would like to filter on the progress column where the progress is completed and in my data source there are only three items that are completed if you look at my combo box the five items that it was loading it does not include this specific item which is called task 23 however if i perform a filter on my data source and plug in a condition that is delegable so i will filter on the progress column it's a choice column progress dot value is equal to completed now if i look at my combo box control it gives me all those results bear in mind it will still give me a maximum of five results but it is searching my entire data set to get all the items that are completed after it gets it it will only display the number of items here depending upon the delegation limit drop down control combo box control a drop down control only allows single selection a combo box control allows multiple items to be selected you can also set it to allow single select so it behaves more or less like a drop down control a drop down control does not have searching capabilities a combo box control allows you to search through a list of items you can search on multiple fields you can display multiple properties here which a drop down control does not allow if you want to set like a default text like please select or all in a drop down control you have to do additional work whereas in a combo box control all we have to do is set up the default text this could say please select in microsoft dataverse for teams we have the modern controls that are provided for us here if i was to create an app for a specific team if you look at the list of controls that are provided here there is no drop down control we only have a combo box control that's because the combo box control does everything what a drop down control does and right here is another tip if you need the modern version of the combo box control in your canvas apps i can simply copy this control from dataverse for teams head over to my powerapp and paste it in here i will connect this to my asset manager list i will allow multi-select and allow searching here it is listing out all my models the user experience here is different than a standard combo box control now a combo box control can also be leveraged to create a people picker control in power apps and currently there is no out of the box people pick a control all i need here is a connection to office 365 users for the items property of my combo box control i will leverage office 365 users dot search user my search term would be self which is the combo box control itself dot search text so as the user is entering the text to search i can leverage that text in the combo box to search for users from my active directory and this has a limit as to how much data it can return i will set it to the max limit which is 999 and for the fields the layout we have been provided a person type layout as well so here i'll pick that layout my primary text would be the display name the secondary text i will pick mail and the search field i will pick display name so as i start searching it will search for users in my active directory this will also get guest users here and if you want to only make this centric to people within your organization you can add an extra filter here to filter the results where my domain is in the mail property so now this will list out all the users who are internal to my organization only this is a multi-select combo box control now if i would like to display additional information of the selections that i made in the combo box control can always insert a gallery to show additional information like the profile image of the user for example so i will pick the horizontal gallery change its layout to title subtitle and overlay for the items property of this gallery i need to get the selected items of my combo box control so right here i will leverage combo box control dot selected items the image i need the profile image of the selected item so i will use office 365 users.user42v2 and here i will use this item dot id the title i'll show the display name and the subtitle i will show the department the user belongs to you can also conditionally showcase data in the combo box depending upon specific scenarios for example this combo box should only showcase the data from the asset manager list where the current logged in user is the owner of that asset and razer owns these three assets at the moment currently the combo box is showcasing all the assets i can filter the data for my items property filter asset manager where current owner which is a person type column so current owner.email is equal to user.email which will give the email address of the current logged in user so now the combobox control will only showcase those assets that the current logged in user is owning validations by default the user can select any number of items from the combobox control but maybe i would like to limit the user to only select a certain number of records now we have to respect the selections that the user is making and the moment they go beyond the number that we have specified for our validation limit at that instant we need to reset the control to the initial selections that the user made to do that for the onchange property of the combobox control i will first set a variable i will call this var selected items i will use first n self dot selected items let's say my limit is three so i will say get me the first three records after doing this i will check to see if the number of items that are selected is it greater than 3 if it is then i would like to reset the combobox control and at this moment i would like to give the user a notification message that says maximum three selections allowed and here i will use the notification type as error now when it resets the control the default selected items property comes in very handy so this variable that i created i will use that as the default selected items of my gallery i make a couple of selections it's fine i make a third selection it's fine but the moment i make my fourth selection it won't allow that and it says that maximum three selections are allowed and this combo box control can be used in various other scenarios most of which i have done videos on for example filtering data in a gallery or creating cascading combobox experiences i select a manufacturer it will load all the devices related to it or i select multiple manufacturers and it will show all the devices for both of those manufacturers if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 107,972

Keywords: powerapps combobox, powerapps combobox defaultselecteditems, combo box, combobox, powerapps, power apps, reza dorrani, powerapps combobox search fields, powerapps combobox search, powerapps combobox example, powerapps combobox filter, powerapps combobox items, powerapps combobox selected value, powerapps combobox datasource, powerapps combobox control, powerapps people search, powerapps combobox sharepoint list, powerapps combobox default value, power apps combo box, microsoft

Id: zPM0Q53L3sE

Length: 25min 5sec (1505 seconds)

Published: Mon Jun 27 2022