PowerApps: Using Dropdown In Gallery

Hello Friends,

Welcome back with some new topics. Today, we will learn something about using Dropdown in Gallery. Let's first take an example. We have-

1. Users Master
2. Category Master
3. User-Category Mapping

The Users Master is a collection of users. The Category Master is the collection different categories. The User-Category Mapping is the collection of mapping of user with it's related category. Now, we have a PowerApps screen, where we have a gallery. This gallery is having two controls-

1. Label (lblUser) - It displays the name of Users from Users Master.
2. Dropdown (ddCategory) - It is linked with Category Master and displays the current category from User-Category Mapping. If mapping is not available, it will show nothing selected.

Now,w we want that when the screen is loaded, the gallery gets loaded as mentioned above. User should be able to change the category of any user. There should be- 

1. Button "Save Final Mapping" which will traverse through this gallery and save the updated mapping in a collection (later on in datasource).
2. Button "Reset Mappings" which will reset the gallery to its original state.

Let's see, how do we do it.

1. Create a Canvas PowerApps and name it "DropDownCategoryMapping".
   
2. Add a button (btnLoadCollections) named "Load Collections". Add below functions on OnSelect property of this button.

1. UpdateContext({varResetStatus: true});
   ClearCollect(
       collDropDownData,
       {CategoryName: Blank()},
       {CategoryName: "A"},
       {CategoryName: "B"},
       {CategoryName: "C"},
       {CategoryName: "D"},
       {CategoryName: "E"},
       {CategoryName: "F"}
   );
   ClearCollect(
       collDefaultUsers,
       {UserName: "Sachin"},
       {UserName: "Lokesh"},
       {UserName: "Rajeeb"},
       {UserName: "Ram"},
       {UserName: "Sudhir"}
   );
   ClearCollect(
       collDefaultUsersCategoryData,
       {
           Name: "Sachin",
           Category: "A"
       },
       {
           Name: "Lokesh",
           Category: "B"
       },
       {
           Name: "Ram",
           Category: "A"
       }
   );  
   

3. Here we have defined-
   
1. Variable: varResetStatus. It will be used to Reset the dropdown
2. Collection: collDropDownData. It contains the list of categories
3. Collection: collDefaultUsers. It contains the list of users
4. Collection: collDefaultUsersCategoryData. It contains the mapping list between Users and Categories
   
4. 
   
   
   
5. Add a Label (lblCategories) and a DataTable (dtCategories) and assign collDropDownData to this datatable.
6.  
   
   
7. Similar way, add another Label (lblUsers) and DataTable (dtUsers) and assign collDefaultUsers to this datatable.
8. 
   
   
   
9. Similar way, add another Label (lblMapping) and DataTable (dtDefaultMapping) and assign collDefaultUsersCategoryData to this datatable.
10. 
    
    
    
11. Now we will add another Label (lblSetMapping) and a Gallery (gallSetMapping). In this gallery, add one Label (lblUserName) and a Dropdown (ddCategoryList). Assign the collection collDefaultUsers to this gallery (Items property) and assign collDropDownData to the dropdown (Items property).
    
12. Now set the Default property of dropdown (ddCategoryList) as-

13. First(
        Filter(
            collDefaultUsersCategoryData,
            Name = ThisItem.UserName
        )
    ).Category  
    

14. The moment, we will add the above function, we will find that each drop is set to the default value of category available in collDefaultUsersCategoryData. For those users, whose mapping is not available, are assigned as blank.
    
15. Set the Reset property of ddCategoryList with varResetStatus.
    
16. Now we will add a button (btnCaptureFinalMapping) and add below code on its OnSelect property.
    

17. ClearCollect(
        collFinalMapping,
        []
    );
    ForAll(
        gallSetMapping.AllItems,
        Collect(
            collFinalMapping,
            {
                FName: lblUserName.Text,
                FMapping: ddCategoryList.SelectedText.CategoryName
            }
        )
    );
    

18. This will capture the final mapping after we had made changes to them.
19. 
    
20. Now, we will add another set of  Label (lblFinalMapping) and DataTable (dtFinalMapping) and assign collFinalMapping to this datatable.
21. 
    
    
    
22. Now we will add a button (btnReset) and add below code on its OnSelect property. We are resetting the variable so that Reset action get execute on dropdowns. Secondly, we are cleaning the Final Mapping Collection.
    

23. UpdateContext({varResetStatus: false});
    UpdateContext({varResetStatus: true});
    ClearCollect(
        collFinalMapping,
        []
    );
    

24. 
    
    
    
25. So, What are we waiting for? Let's play the app.
26. We had launched the app and got below screen.
27. 
    
28. Now, we will make changes to the Category-
29. 
    
30. Click on "Capture Final Mapping" button. You will see, the mapping is captured in collection and will reflect in last table.
31. 
    
32. Now, if we click on "Reset" button, what will happen-
33. 
    
    
    
34. The gallery has been reset to its original state and the final mapping collection has been cleaned.
    
35. This way, we can achieve the functionality.
36. NOTE:-
1. The functionality of mapping the default value in dropdown should be used cautiously. If you are getting data from datasource while setting the default value, it will badly impact the performance. So, better to bring the default mapping in PowerApps collection and the use that collection in setting the default value.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !