[PowerApps] Dynamic Multi Choice Checkbox[No ListBox]

PowerApps
Dynamic Multiple Choice CheckBox

PowerApps multi select choice demo
Basic demo of multi choice checkbox control

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

  1. 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
PowerApps Multiple Choice Question Image1
  1. 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.
PowerApps multi choice fileds
PowerApps multi select checkbox
  1. 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: ""}
);
PowerApps Multi Choice Fields Formula1
  1. Next select Gallery and open the items function. Remove the predefined value and set it to refer the Questions collection
PowerApps multi choice questions collection
  1. Next select Checkbox1 inside Gallery and open its Text function. Set the Text value to ThisItem.Value
PowerApps canvas app multi choice question
Set the Text property
  1. Keep the Checkbox1 selected and open OnCheck and OnUncheck function respectively. Then paste the below formulas in the respective functions.
PowerApps multi choice question onCheck
Add user selection to collection
PowerApps multi choice question on uncheck
Remove the user selection from collection
  1. 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.
PowerApps multi choice checkbox default value
If(IsBlankOrError(LookUp(UserResponse, ID = ThisItem.ID)),false, true)

#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 basic demo
Demo

#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

PowerApps multi select checkbox
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.

PowerApps multiple choice checkbox control design

Once done, select the first screen and hit play to test it. You should see result similar to the below demonstration

Demo

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

PowerApps Multi Choice Checkbox
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

Final Demo

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.

$350-Best Student laptop
Amazon In, Amazon US

$600-Work laptop
Amazon In, Amazon US

$989– High performance
Amazon In, Amazon US

Headset – $15.99
Amazon In, Amazon US

Lightspeed Mouse – $39
Amazon In, Amazon US

Keyboard – $29
Amazon In, Amazon US

The Psychology of Money
Amazon In, Amazon

Atomic Habits:
Amazon In, Amazon

Find Balance and Purpose in Life
Amazon In, Amazon

$30, Smart Watch for Smart you
Amazon In, Amazon US, Amazon UK

Work comfortably with $110
Amazon In, Amazon US, Amazon UK

Exercise at home
Amazon In, Amazon US, Amazon UK

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

SharePoint API Access Token Generation [Recommended]
[Solution] How to Bypass PowerApps consent

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.


Leave a Comment