Checkbox Group confusion

[psweb]

Have Checkbox groups changed at all?

In the UI I add a checkbox group component, inside it I need to add a repeat children, with a checkbox inside that.
Like this.

<div is="dmx-checkbox-group" id="group_cb_booking_provider_company_products" name="group_cb_booking_provider_company_products" class="checkbox-group">
    <div id="repeat_cb_booking_provider_company_products" is="dmx-repeat" dmx-bind:repeat="sc_fetch_booking_provider_company_products.data.products_holder">
        <label class="form-check-label"><input class="form-check-input" dmx-bind:id="name ? name : internalName" type="checkbox" name="cb_group_booking_provider_company_products" dmx-bind:value="name ? name : internalName"> {{name ? name : internalName}}</label>
    </div>
</div>

{{group_cb_booking_provider_company_products.value}}

This works great and any checkbox clicked gets added as a comma separated value in the output, however I do not recall having to add a repeat children inside the checkbox group component, instead I used to add a repeat to the checkbox group itself I think.

Who knows maybe I am just confused, @Teodor have I done this correctly as Wappler intended?

[Teodor]

That’s the correct way. Your checkbox group wraps all your checkboxes, so you need to repat them inside, not the checkbox group itself.

[psweb]

Thanks for checking Teo, always appreciated.

I think what may have caused my confusion is that in the UI itself, the only component it allows me to add inside a checkbox group is a checkbox itself.
Maybe that can be looked at to allow adding a checkbox, checkbox control, as well as a repeat children component.

[NewMedia]

@psweb

<div is="dmx-checkbox-group" id="group_cb_booking_provider_company_products" name="group_cb_booking_provider_company_products" class="checkbox-group">
    <div id="repeat_cb_booking_provider_company_products" is="dmx-repeat" dmx-bind:repeat="sc_fetch_booking_provider_company_products.data.products_holder">
        <label class="form-check-label"><input class="form-check-input" dmx-bind:id="name ? name : internalName" type="checkbox" name="cb_group_booking_provider_company_products" dmx-bind:value="name ? name : internalName"> {{name ? name : internalName}}</label>
    </div>
</div>

{{group_cb_booking_provider_company_products.value}}

Hello Paul, I was looking at your post a few minutes ago and tried a variation with my form –

    <div id="repeat_assoziierte_gefuehl_1" is="dmx-repeat" dmx-bind:repeat="get_ukd_gefuehl_1.data.query_gefuehl_1_val">
<label class="form-check-label"><input class="form-check-input" dmx-bind:id="$key" type="checkbox" name="assoziierte_gefuehl_1" dmx-bind:value="gefuehl_value"> {{gefuehl_value}}</label>
    </div>
    </div>

But I wasn’t getting the comma separation. So I looked at your lines

<input class="form-check-input" dmx-bind:id="name ? name : internalName" type="checkbox" name="cb_group_booking_provider_company_products" dmx-bind:value="name ? name : internalName"> {{name ? name : internalName}}</label>

What would my values be here? I didn’t understand your syntax and so substituted my query values incorrectly.
Thank you for hopefully explaining this!

dmx-bind:value="name ? name : internalName"> {{name ? name : internalName}}

[psweb]

That part, was pretty specific to my exact needs, so not sure you would actually need to use it like I did.

In my situation I was using 3 different API datasources, from 3 totally different companies, and although each of those API providers was giving similar data, their naming conventions were slightly different.
2 API sources were providing a name and the other was also providing a name but had it referenced as internalName
All I was doing was saying if the API source had a name, then use it, otherwise if it could not find a name then look for something called internalName, its just a standard ternary operator.

In your case I imagine all you need is

<div is="dmx-checkbox-group" id="group_cb_assoziierte_gefuehl" name="group_cb_assoziierte_gefuehl" class="checkbox-group">
    <div id="repeat_assoziierte_gefuehl" is="dmx-repeat" dmx-bind:repeat="get_ukd_gefuehl_1.data.query_gefuehl_1_val">
        <label class="form-check-label"><input class="form-check-input" dmx-bind:id="$key" type="checkbox" name="cb_assoziierte_gefuehl" dmx-bind:value="gefuehl_value"> {{gefuehl_value}}</label>
    </div>
</div>

[NewMedia]

@psweb

<div is="dmx-checkbox-group" id="group_cb_assoziierte_gefuehl" name="group_cb_assoziierte_gefuehl" class="checkbox-group">
    <div id="repeat_assoziierte_gefuehl" is="dmx-repeat" dmx-bind:repeat="get_ukd_gefuehl_1.data.query_gefuehl_1_val">
        <label class="form-check-label"><input class="form-check-input" dmx-bind:id="$key" type="checkbox" name="cb_assoziierte_gefuehl" dmx-bind:value="gefuehl_value"> {{gefuehl_value}}</label>
    </div>
</div>

Thanks, Paul
But as I said, I am not getting comma separation of multiple selected options. So, I will go try the Data Formatter.

Meanwhile I see that I didn’t post the final code

    <div id="repeat_assoziierte_gefuehl_1" is="dmx-repeat" dmx-bind:repeat="get_ukd_gefuehl_1.data.query_gefuehl_1_vals" dmx-on:update="">
        <label class="form-check-label"><input class="form-check-input" dmx-bind:id="$key" type="checkbox" name="assoziierte_gefuehl_1" dmx-bind:value="gefuehl_value">{{gefuehl_value}}</label>
    </div>
</div>

[psweb]

To get the comma separated list of the values you must have the checkbox group, with the repeat inside the checkbox group, and you must choose the binding correctly.

Take an example of a form with a $_POST variable as the forms checkbox group of group_cb_assoziierte_gefuehl, that would hold the entire array of values, so to test, in your server action, make a repeat step, with the expression of $_POST.group_cb_assoziierte_gefuehl.split(',') then inside the repeat add a setValue step with the value set to $value and run the action, you should be returned every checked checkbox.

[NewMedia]

Paul, I wasn’t clear on the order but is this what you are talking about in the First Step?
The actual input name is “gefuehl_1”

[psweb]

Just the repeat looks a bit strange. its missing the {{}} curly braces around it.

Otherwise once thats ok, then try it out, and look through the output to check what is inside those $value steps

[NewMedia]

Problem keeps occuring on adding {{ }}

Twice have written in curly braces and Selected.
Both times get this result.

If I try that again and leave out the {{ }}

I am back where I started

[NewMedia]

Paul, why don’t you have “Output” Selected?

[NewMedia]

I have this now with curly curlies . .

[psweb]

looks good, is it outputting something now.