Dynamically check multiple checkboxes in repeat group with query values

Wappler General How To
#1

Need some help with dynamically checked checkboxes that are used to filter a database query.

The checkbox form group list used for filtering the database is a dynamic list, which is populated by a server action and a repeat on the form’s Checkbox Control element. That works fine, also the filtering works well when a checkbox is clicked. So far so good :slight_smile:

Now, I want to dynamically check some of the checkboxes if their value is set in a query parameter. Following this doc that should be possible by setting the value of the checkbox group to query.[parameter name] in the checkbox group properties, like I did:

image

The parameter was also added to the content pages’ query parameters by the way as well as on the layout page (I’m on NodeJS).

When I output the value of the checkbox group however, it’s empty. That is, it is empty on page load with a query parameter set, but it is populated with value when checkboxes are clicked of course. So on page load the checkbox group value is always empty, therefore the checkboxes are also not automatically checked and the database is not filtered by this value either.

I think it probably has something to do with the checkbox group value being an array instead of a single value. Should the query.cat value (if only one) be transformed to another format possibly? Or if not, what else could be wrong here?

Thanks for any help in advance!

#2

Did some more testing and it seems setting the value for the checkbox group settings doesn’t have any effect at all, whether it’s set to be equal to a query parameter or a static number, like I tried here:

image
<form id="cat_filter"><div class="form-group mb-3" is="dmx-checkbox-group" id="cat_id" dmx-bind:value="3">

The output (for cat_filter.cat_id.value) is empty then, always.
Except when a checkbox is clicked, then the value array is filled with one or more values.

Is this a bug possibly @Teodor?

#3

Can you tell me if this is a bug indeed @Teodor?

To reproduce the issue setup a multi checkbox form with a value set in the checkbox group properties :

image
image843Ă—344 32.2 KB

image

As you can see in the output the value is not not set:

image

Is this a bug indeed or am I missing something?

Thanks for any help in advance!

#4

Your checkboxes have all empty values …

#5

I know and when I add values to the checkboxes, they are shown in the output, that works fine.

However I want to set a value to the checkbox group properties to dynamically check the boxes, as described here:

So in this last example I set the value to 3 to test if it is set at all and it seems not, because the output stays empty then.

#6

Your checkboxes need values. They will be “checked” when the checkbox group value matches their values!
Your checkboxes have NO values at the moment:

Screenshot 2023-01-24 at 17.00.59
Screenshot 2023-01-24 at 17.00.59843Ă—327 33.2 KB

#7

So I added values:

image
image894Ă—341 30.5 KB

Same empty output, with or without the checkbox properties value set.
I must be getting you wrong, am I not?

Instead of the example above, here’s the actual case with the repeated checkboxes (with dynamic values):

image
image784Ă—266 18.9 KB

The checkboxes are used for dynamic filtering and the repeat data is a list of categories from the database. All works fine.

Now I want to set a value to the checkbox group properties to automatically/dynamically check boxes, but that doesn’t as described in your tutorial doc work. What am I doing wrong then? Should I add static values to it as well?

#8

Here you don’t have any value added in the checkbox group value … so no checkboxes will be checked/selected.

I think you are either trying to do something totally different or don’t really get the idea about the checkbox group.

Let me try to explain this again - the checkbox group containing checkboxes (static or dynamic does not matter):

  • Expects an array of values for its value property.
  • Will mark the checkboxes active ONLY when the checkbox values IS in this array used for the checkbox group value property.

A side note - please post real code here, not screenshots. I can’t copy/paste from screenshots.

#9

Here’s a small static example of what i am trying to explain to you:

<dmx-array id="arr1" dmx-bind:items="[1,3]"></dmx-array>
    <div class="container">
        <form id="form1">
            <div class="form-group mb-3" id="input1_group" is="dmx-checkbox-group" dmx-bind:value="arr1.items">
                <legend class="col-sm-2 col-form-label">Some checkboxes</legend>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="input1_1" name="input1_1">
                    <label class="form-check-label" for="input1_1">First checkbox</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="2" id="input1_2" name="input1_2">
                    <label class="form-check-label" for="input1_2">Second checkbox</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="3" id="input1_3" name="input1_3">
                    <label class="form-check-label" for="input1_3">Third checkbox</label>
                </div>
            </div>
        </form>
    </div>

you can test it yourself and play with it.

#10

Sorry about that, I was rushing…

I understand the static example and get now that the problem is that an array has to be set as the input for the checkbox group properties. The static one works and checks the boxes automatically.

I am sorry to say I still can’t get the dynamic repeat checkbox form to work the same way. Here’s the code (in proper code tags):

<dmx-array id="arr1" dmx-bind:items="'[1,3]'"></dmx-array>
   <form id="CategoryFilter">
      <div class="form-group mb-3" id="categories" is="dmx-checkbox-group" dmx-bind:value="arr1.items">
            <div class="form-check" dmx-repeat:categories="GetCategories.data.Categories">
                 <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                     <input class="form-check-input" type="checkbox" id="input_category" name="inp_category" dmx-bind:value="id">
                     <label class="form-check-label widget-filter-item-text col ms-2" for="input_categories" dmx-text="Name"></label>
                 </li>
            </div>
       </div>
    </form>

So a (for testing purposes static) array is set now with values 1 and 3 in it. In the repeated form there are checkbox included where dmx-bind:value="id" equal 1 and 3. So I would expect those boxes to be checked, but they are not.

#11

The issue seems to be that the values of the checkboxes are strings (as all other inputs) and if your ids are numbers, they don’t match. So 1 is no the same as '1'

You can add this to your checkbox group value and it should work:

 dmx-bind:value="query.cat.split(',').map('$value.toString()')"
#12

Thanks for helping me Teodor, I was also thinking that not matching value types could be the reason.

So it looks like this now:

   <form id="CategoryFilter">
      <div class="form-group mb-3" id="categories" is="dmx-checkbox-group" dmx-bind:value="query.cat.split(',').map('$value.toString()')">
            <div class="form-check" dmx-repeat:categories="GetCategories.data.Categories">
                 <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                     <input class="form-check-input" type="checkbox" id="input_category" name="inp_category" dmx-bind:value="id">
                     <label class="form-check-label widget-filter-item-text col ms-2" for="input_categories" dmx-text="Name"></label>
                 </li>
            </div>
       </div>
    </form>

I am sorry to say that this also still doesn’t make it work unfortunately…

Just to be sure I tried changing the query type to string, number and even array (should be of type Text, right?) and tested again. Also tested with url queries in these formats: ?cat=1,3, ?cat=[1,3] and even ?cat=1
With cat query being a string type ?cat=1,3 would be the correct query format in the url, right?
Then the split function creates the array of the comma separated values and .map('$value.toString()')
should convert every single value to a string, am I correct?

Output of query.cat.split(',').map('$value.toString()') on the page returns 1,3 so that seems okay.

However, the checkboxes are still not checked… :confused:

As a last guess I even tried if it works if the checkboxes’ ids are converted to strings, since these are numbers that don’t match the string type of the checkbox group input:
<input class="form-check-input" type="checkbox" id="input_category" name="inp_category" dmx-bind:value="id.toString()">
This also didn’t resolve the issue.

Any ideas left what could be wrong here? Thanks again for your effort and help!

#13

If your query param returns the values normally as ?cat=1,2,3 you need:

dmx-bind:value="query.cat.split(',').map('$value.toString()')"

If this doesn’t work then provide a link to your page where i can check that.

#14

Hi Teodor,
Still can’t get it to work. I sent you a link in a PM.
Thanks.

#15

I am facing similar issue. I am trying to generate checkboxes dynamically and trying to set the checkbox group value. I am using API Action for value binding. Seems this is not working me.

HTML

<div class="col-12">
    <div class="form-group mb-3" id="etcscheckbox_group" is="dmx-checkbox-group" 
    dmx-bind:value="apiJson.data.pages.page1.questions.checkboxbasic.values.values">
        <legend class="col-12 col-form-label">{{apiJson.data.labels.checkboxbasic.qtext}}</legend>
        <div class="col-12" is="dmx-repeat" id="etcsradio1_repeat" 
        dmx-bind:repeat="apiJson.data.options.checkboxbasic.col1" key="'key'">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" dmx-bind:value="key" 
                dmx-bind:id="'etcscheckbox_'+key" dmx-bind:name="'etcscheckbox_'+key">
                <label class="form-check-label" dmx-bind:for="'etcscheckbox_'+key">{{text}}</label>
            </div>
        </div>
    </div>
</div>

API Response

{
    "pages": {
        "page1": {
            "id": "page1",
            "nextPageId": null,
            "questions": {
                "checkboxbasic": {
                    "id": "checkboxbasic",
                    "required": "required",
                    "enable": true,
                    "visible": true,
                    "valid": true,
                    "values": {
                        "types": {
                            "values": "values"
                        },
                        "values": [
                            "1",
                            "2"
                        ]
                    }
                }
            }
        }
    },
    "page_start": "page1",
    "options": {
        "checkboxbasic": {
            "col1": [
                {
                    "key": "1",
                    "text": "One",
                    "seq": 1
                },
                {
                    "key": "2",
                    "text": "Two",
                    "seq": 2
                },
                {
                    "key": "3",
                    "text": "Three",
                    "seq": 3
                },
                {
                    "key": "4",
                    "text": "Four",
                    "seq": 4
                }
            ],                
        }
    },
    "labels": {
        "checkboxbasic": {
            "qtext": "Question checkbox basic",
            "required": "Please select option"
        }
    }

Appreciate any help. Thanks!