Skip to main content

Notifications

Populate a Text Input Box with selected Checkbox items, and then SubmitForm

Ami K Profile Picture Ami K 15,655

Introduction

 

I came across the following scenario in a forum post:

 

https://powerusers.microsoft.com/t5/Building-Power-Apps/Get-data-from-multiple-checkboxes/m-p/2403779#M599885 

 

Rather than write a long answer, I have decided to move this to a blog post. Below is the result we are after. We want to add multiple checkbox controls inside a DataCard. Each selected checkbox will populate a Text Input control, and each Checkbox which is unchecked will also remove that selection from the Text Input Control.

 

example.gif

 

 

The solution has been tested with a standalone Canvas App, and verified with either SharePoint or Dataverse as a data source.

 

Solution One: add individual checkboxes into a DataCard

 

1. Add an EditForm Control into your App


2. Add your Single Line Text field into the Form if not already present


3. Unlock the DataCard for that field

 

4. Insert five Checkbox controls into the DataCard. Arrange them as desired and expand the height of the Datacard to accommodate the Checkboxes

 

5. For this example, we are going to name each checkbox control "CheckboxMonday", "CheckboxTuesday", "CheckboxWednesday" etc

 

6. Update the Text property of the Checkbox by removing the default text (“Option”) and replace with “Monday”, “Tuesday” etc

 

7. On the Default property for each Checkbox control, enter:

 

 

Self.Text in ThisItem.'Your single line text field'

 

 

8. On the Default property of the DataCardValue (the Text Input Control), enter:

 

 

With(
 {
 _ischecked: CountRows(
 Filter(
 [
 CheckboxMonday.Value,
 CheckboxTuesday.Value,
 CheckboxWednesday.Value,
 CheckboxThursday.Value,
 CheckboxFriday.Value
 ],
 Value = true
 )
 ) > 0
 },
 If(
 'Your Form Name'.Mode = FormMode.Edit && !_ischecked && IsBlank(Parent.Default),
 Parent.Default,
 Concat(
 Filter(//generate a single column table of required fields names which are blank
 Table(
 {
 SelectedDay: If(
 CheckboxMonday,
 "Monday"
 )
 },
 {
 SelectedDay: If(
 CheckboxTuesday,
 "Tuesday"
 )
 },
 {
 SelectedDay: If(
 CheckboxWednesday,
 "Wednesday"
 )
 },
 {
 SelectedDay: If(
 CheckboxThursday,
 "Thursday"
 )
 },
 {
 SelectedDay: If(
 CheckboxFriday,
 "Friday"
 )
 }
 ),
 SelectedDay <> Blank()
 ),
 SelectedDay,
 " & "
 )
 )
)

 

 

Test the Solution

 

1. Insert a Gallery control into the Screen

2. On the Items property of the Gallery, enter:

 

 

Sort(
 'You Data',
 Modified, //or use 'Modified On' for Dataverse
 SortOrder.Descending
)

 

 

3. Ensure you have a Label control inside the Gallery which references your single line text column (e.g. ThisItem.'Your single line text column')

 

4. On the OnSelect property of the Gallery, enter:

 

 

EditForm('Your Form Name')

 

 

5. On the Item property of the Form, enter:

 

 

Coalesce(
 'Your Form'.LastSubmit,
 'Your Gallery'.Selected
)

 

 

6. Insert a Button control into the Screen

 

7. On the OnSelect property of the Button, enter:

 

 

SubmitForm('Your Form')

 

 

Sample image:

 

Amik_0-1697754457544.png

 

 

Solution Two: embed a Gallery control into the DataCard

 

In my opinion the method below is more complex, but is still a valid way to go:

 

1. Add an EditForm Control into your App


2. Add your Single Line Text field into the Form if not already present


3. Unlock the DataCard for that field

 

4. Insert a Blank Gallery control inside the DataCard

 

5. Insert a single Checkbox control inside the Gallery

 

6. Set the wrap count of the Gallery to 5, and make any other adjustments you need to the format/positioning/layout of the Checkbox control

 

Amik_1-1697754606672.png

 

7. On the Items property of the Gallery, enter:

 

 

[
 "Monday",
 "Tuesday",
 "Wednesday",
 "Thursday",
 "Friday"
]

 

 

8. On the Text property of the Checkbox (which we call “Checkbox1 in this tutorial”), enter:

 

 

ThisItem.Value

 

 

9. On the OnCheck property of the Checkbox control, enter:

 

 

Collect(
 col_selected_days,
 ThisItem.Value
)

 

 

10. On the UnCheck property of the Checkbox control, enter:

 

 

Remove(
 col_selected_days,
 LookUp(
 [
 "Monday",
 "Tuesday",
 "Wednesday",
 "Thursday",
 "Friday"
 ],
 ThisItem.Value = ThisRecord.Value
 )
)

 

 

11. On the Default property of the Checkbox, enter:

 

 

ThisItem.Value in col_selected_days

 

 

12. On the Default property of the DataCardValue (the Text Input control inside the DataCard), enter:

 

 

With(
 {
 _ischecked: CountRows(col_selected_days) > 0,
 _sortindex: [
 {
 SortIndex: 1,
 Day: "Monday"
 },
 {
 SortIndex: 2,
 Day: "Tuesday"
 },
 {
 SortIndex: 3,
 Day: "Wednesday"
 },
 {
 SortIndex: 4,
 Day: "Thursday"
 },
 {
 SortIndex: 5,
 Day: "Friday"
 }
 ]
 },
 With(
 {
 _data: Sort(
 AddColumns(
 col_selected_days,
 "sort",
 LookUp(
 _sortindex,
 Value = _sortindex[@Day],
 SortIndex
 )
 ),
 sort,
 SortOrder.Ascending
 )
 },
 If(
 'Your Form Name'.Mode = FormMode.Edit && !_ischecked && IsBlank(Parent.Default),
 Parent.Default,
 Concat(
 _data,
 Value,
 " & "
 )
 )
 )
)

 

 

Test the Solution

 

1. Insert a Gallery control into the Screen

2. On the Items property of the Gallery, enter:

 

 

 

Sort(
 'You Data',
 Modified, //or use 'Modified On' for Dataverse
 SortOrder.Descending
)

 

 

 

3. Ensure you have a Label control inside the Gallery which references your single line text column (e.g. ThisItem.'Your single line text column')

 

4. On the OnSelect property of the Gallery, enter:

 

 

EditForm('Your Form Name');
ClearCollect(
 col_selected_days,
 Split(
 ThisItem.'Your single line text column',
 " & "
 )
)

 

 

5. On the Item property of the Form, enter:

 

 

 

Coalesce(
 'Your Form'.LastSubmit,
 'Your Gallery'.Selected
)

 

 

 

6. Insert a Button control into the Screen

 

7. On the OnSelect property of the Button, enter:

 

 

 

SubmitForm('Your Form')

 

 

------------------------------------------------------------------------------------------------------------------------------

 

Thank you.


If you liked this blog post, please give it a Thumbs Up.

Imran-Ami Khan

 

Comments

*This post is locked for comments

  • Ami K Profile Picture Ami K 15,655
    Posted at
    Populate a Text Input Box with selected Checkbox items, and then SubmitForm

    @clammchops - please raise a post in the main forum with this question.

  • clammchops Profile Picture clammchops 14
    Posted at
    Populate a Text Input Box with selected Checkbox items, and then SubmitForm

    @Amik - is there an easy way to do that in the Power Apps tool? I don't see an ellipsis that allows me to change it.

  • Ami K Profile Picture Ami K 15,655
    Posted at
    Populate a Text Input Box with selected Checkbox items, and then SubmitForm

    @clammchops - I assume you're using the Modern checkbox control (in preview). Please use the classic controls.

  • clammchops Profile Picture clammchops 14
    Posted at
    Populate a Text Input Box with selected Checkbox items, and then SubmitForm

    This doesn't seem to work for me. In checkbox control I do not have a Default property, so I am unable to add the follownig:

    Self.Text in ThisItem.'Your single line text field'

    clammchops_0-1710889891843.png

     

     

     

    The next problem I run into is in the Filter -> .Value is not recognized:

    clammchops_0-1710889260137.png

     

    I think all the issues are related to the same problem, but I'll post them anyway:

     

    Third issue I am running into is: unable to compare Error and Boolean: 

    clammchops_1-1710889300348.png

     

    Fourth issue is: 

    clammchops_2-1710889751348.png