PowerApps: Convert Delimiter String To Collection Using Ungroup And ForAll

 Hello Friends,

Welcome back with another post on PowerApps. Recently, we came up with a scenario where user has selected choice of cities for each state and the same got displayed as comma separated value in gallery.

Now, while saving, we have to split this string and create a collection like below screenshot so that we can save the information in data source.

Initially, things were looking extreme complex and not getting the way to resolve. But Where, there is a lock, there is a key. If there is a question, then there will be an answer.

So, we also figured out the resolution. Let's try-

1. First of all create a blank canvas app by logging in PowerApps maker platform.
2. 
   
   
3. Now, add a button (Name: btnLoadCollection; Display Text: Load Collection) to create a collection and assign the below function to OnSelect property.
4. 
   
   
5. The complete code is-

6. ClearCollect(
       collMyData,
       {
           State: "Uttar Pradesh",
           Cities: "Lucknow, Kanpur, Meerut"
       },
       {
           State: "Rajasthan",
           Cities: "Jodhpur, Jaisalmer, Alwar,Ganganagar"
       },
       {
           State: "Gujarat",
           Cities: "Ahmedabad,Gandhi Nagar"
       }
   );
   

7. 
8. Now, we will add a gallery (Name: ParentGallery) and link this gallery with the collection created above.
9. 
   
   
10. Now we will add another button (Name: btnSplitData), which will split the string, convert into collection then we will use Ungroup function to get the desired result.
11. 
    
    
12. We will add the functions one by one to achieve the functionality. First add below function to OnSelect property.

13. ClearCollect(
        TempSplittedCollection,
        []
    );
    ForAll(
        ParentGallery.AllItems,
        Collect(
            TempSplittedCollection,
            {
                State: State,
                City: Split(
                    Cities,
                    ","
                )
            }
        ) 

    ); 
14. It will create a collection "TempSplittedCollection" which will be having 2 columns-
1. State
2. City (it will hold another collection having cities separated based on delimiter)
15. 
    
    
16. Here you will see that the "TempSplittedCollection" is somewhat similar to the result we get after using GroupBy function. It means, if we apply Ungroup, we should get desired result. Therefore, add below code to OnSelect property of btnSplitData just after the previous code.

17. ClearCollect(
        FinalSplittedData,
        Ungroup(
            TempSplittedCollection,
            "City"
        )
    );
    

18. 
    
    
19. The output, we receive upon clicking of this button comes out to be-
20. 
21. This is the result we were looking for.
22. Now, we can apply Patch command with ForAll to save this data to our data source.
23. Lastly, we can add a cleaning code for the collections we have created during Split functionality (if required).
24. The complete code to be written on OnSelect property of btnSplitData will be-

25. ClearCollect(
        TempSplittedCollection,
        []
    );
    ForAll(
        ParentGallery.AllItems,
        Collect(
            TempSplittedCollection,
            {
                State: State,
                City: Split(
                    Cities,
                    ","
                )
            }
        )
    );
    ClearCollect(
        FinalSplittedData,
        Ungroup(
            TempSplittedCollection,
            "City"
        )
    );
    

26. If you wish to get this final data to be displayed on screen, add another gallery and bind the Items with "FinalSplittedData" collection.
27. 
    
    
28. This way we can achieve the desired functionality.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !