PowerApps
Dynamic Multiple Choice CheckBox
In PowerApps there is an inbuilt control known as ListBox. This works but does not have a good UI. Sometimes we require a multi choice options with checkbox controls. This not only looks good but also helps user to understand that multiple options can be selected at a time.
If this is the reason you wish to create a multiple choice checkbox in PowerApps, then follow this post to find out how to do it.
#PowerApps ListBox vs Multi Choice Checkbox
The most basic difference between a multi choice checkbox and the default ListBox in PowerApps is their appearance. The basic ListBox is not intuitive. Its appearance does not represent a multi select field. On the other hand multi choice checkbox has good appearance.
One benefit of listbox is that you do not need any custom coding to keep track of user selection, whereas for Checkbox, you need to write custom code to identify and track user selection. This can be seen as an extra task, but believe me it is worth the effort.
# What Will We Use
In this tutorial we will use the following PowerApps controls to create the dynamic multiple choice question
- Gallery – To create the PowerApps multi select checkbox control
- Collection – To store related data
- Buttons – To navigate to different screens
- Text Label – To display any information if required
#Tutorial – PowerApps Multiple Choice Checkbox
- Create a new blank screen and add one Gallery control and a plain text label.
For the gallery control set Layout to Title only. Then delete the next arrow and separator as we do not need them for this example. Check the below image
- Next click on the Edit gallery button to start editing the gallery item. Once in the edit mode, click insert and add a checkbox. After the checkbox is added, remove the Title field and resize the checkbox to fit the gallery.
- Now, select the Screen1 and open OnVisible function, then type the below formula.
We are creating two collection, one for the questions and the other one is for the options user choose.
ClearCollect(Questions,
{ID:1, Value: "This is question 1"},
{ID:2, Value: "This is question 2"},
{ID:3, Value: "This is question 3"},
{ID:4, Value: "This is question 4"}
);
ClearCollect(UserResponse,
{ID: 1001,Value: ""}
);
- Next select Gallery and open the items function. Remove the predefined value and set it to refer the Questions collection
- Next select Checkbox1 inside Gallery and open its Text function. Set the Text value to ThisItem.Value
- Keep the Checkbox1 selected and open OnCheck and OnUncheck function respectively. Then paste the below formulas in the respective functions.
- Keeping Checkbox1 selected, open the Default function. Set the default value as shown below.
This function is to check whether user has already selected this choice, if yes, then keep the checkbox ticked. Otherwise remove the tick.
#First Demo
Well that is all you need to create a multi choice checkbox in PowerApps. Now create a new screen for testing.
As you can see from the above image, I created one called First Screen. I have also added a button(Button1) to navigate to this screen. Once you have it added, select the First Screen and hit play. You should see a result as below
#PowerApps Multi Choice Checkbox – What Next?
Well, so far we have just built the basic barebone structure of a multi choice checkbox control in PowerApps. Next we will check how to read and work with the user responses. Also after that we will learn how to dynamically add or remove options. Sounds interesting right? So, without delay, check below to find out more.
#Working With User Response
Working with the user response collection is fairly simple. We just need to loop through the collection and check what exists or not. Lets try that
Do you remember we added a Text Label control to the right half of the screen? Ok, now its about time we make use of it.
Before we do that, add two more buttons at the bottom of the screen as shown in the below image.
Create two buttons and name them as follows, Navigate Home and Update Text.
Once created, open the OnSelect Function of UpdateText button and paste the below formula
UpdateContext(
{ TextLabel : Concat(UserResponse, Value & ",") }
)After adding the formula in Update Text button, select the Text Label we created earlier and open its text function. In the text function of the label refer the TextLabel context variable which we created earlier. Check below image for reference.
Once done, select the first screen and hit play to test it. You should see result similar to the below demonstration
Congratulation if you have been able to complete it this far. Now, lets continue and figure out how to make the questions dynamic as well.
#PowerApps – Dynamic Multiple Choice Options
If you have followed along this tutorial this far, then you know that we are using a collection to store all the questions. Well to make it dynamic we will use the same collection but in a slightly different manner. Let’s find out how.
#Dynamic Choice Generator
To demonstrate it easily we are generating the questions from comma separated text input. It is up to you what you wish to use, sky is the limit after you understand the logic. So let’s proceed.
Navigate to the first screen, then add a Text input and a button.
select the OnClick function of the button and type the below formula.
I am using comma separated text to provide the list of questions. And then in the button formula I have split the text by comma and added them to the questions collection.
This formula is little advanced compared to the previous ones we have used. I have added sufficient comments for your understanding however if you still have any questions, feel free to use the comment box to ask questions. Anyways, find the formula below
ClearCollect(tempQuestions,{Value: ""}); Clear(tempQuestions); /*define the schema and then clear the value*/
ClearCollect(Questions, {ID:0,Value:""}); Clear(Questions); /*define the schema amd then clear the value*/
ForAll(Split('Question TextInput'.Text, ","), If( Len(Result)>1 ,Collect(tempQuestions,{Value:Result}))); /*First we are adding the string value only*/
ForAll(
tempQuestions As Quest, /*Loop through all the temp questions*/
ForAll(
Sequence(CountRows(tempQuestions)) As i, /*Prepare an index list to loop through*/
If(
Index(tempQuestions, i.Value).Value = Quest.Value, /*Find the correct index by comparing the string value at different indexes*/
Collect(Questions, {ID: i.Value, Value: Quest.Value}) /*Once correct index is found, add the question*/
)
)
)Now click play and press the Set Question button. Then exit play mode and check if you can see the questions collection or not. Verify if the questions and Id are added correctly.
#Update The Question Gallery to refer this list now
Almost done we just need to remove the static Question definition from the other screen onload function to complete the process. So select the other Screen and open the OnVisible function and then remove the static definition of Questions collection as shown below
#Demo – PowerApps Multi Choice Checkbox
All done, if you have followed along till now, you are all set to test the functionality. Click play to mode to test the functionality. Provided below is a simple video demo for your reference
That’s all I had. I hope you have enjoyed learning how to create PowerApps multi choice checkbox control. If you are happy with this post, please share it with others and also please support us by using the below links. This will help us to create such quality contents regularly.
Please Help us Grow!
I hope you have found this article helpful. If you are happy with the document, please use the below links when you buy something from Amazon to help us grow.
Ways to Help
Amazon Affiliate Links
How this works?
Amazon affiliate program gives a small (%)share of price to the referrers, so feel free to buy anything.
Below are some Amazon affiliate links, if you open amazon application/website using these links and buy something, (it can be one of the below items or anything of your choice) Then Amazon will give us a little percentage(%) of the money you spend on Amazon. To know more check this document.
Thank you
For your Contribution
Anyways, if you have liked this post, do not forget to check our other posts. Some of the high traffic posts are listed below
Newbietechie.com
Author @ramizmollahmd
About Ramiz
Ramiz is a professional working in an MNC as a business and technology consultant for quite a few years now. Ramiz is proficient in various Microsoft tools and technologies. He is a tech enthusiast and an active blogger. Ramiz spends his free time playing games or watching movies. He writes blogs to share his knowledge with the world and to make it a better place to live.
