Populate a Text Input Box with selected Checkbox i...

Amik · ‎10-19-2023

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/240377...

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.

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:

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

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,
                " & "
            )
        )
    )
)