String multiple values in a single field separated by pipes |

Wappler General Need Help
1

I’m rebuilding a site in Wappler which was previously built in Wordpress. The data in Wordpress stores multiple options in single fields, eg.

Red
Blue
Green

are stored as

Red|Blue|Green

The would be a form containing checkboxes for each colour.

Can I keep this same structure? Or would I be better going through the data and using a many-to-many table instead? If I was started from scratch then I would use the many-to-many table option but because I’m running with the existing data, I need to decide the best approach.

If I can keep to the same piped data structure, is it easy to create the checkbox forms to add/update records?

Hope I’ve explained this clearly enough. Thanks in anticipation.

2

Yes you can keep the same values, storing choices as single text field but pipe separated.

We have a tutorial for this - just split on pipe instead of coma:

2 Likes
3

Thanks @George, I thought this would probably already have been thought of :slight_smile:

I’ve now spent a while trying to implement it but it’s not working. Would anyone be able to do a quick tutorial on the process of…

  • Displaying checkboxes from a database (I have a table containing airport names and want to list those as checkboxes so any number of them can be checked and the results get inserted in the database as a pipe-separated field)
  • Creating the Server Action to take the posted values, join them with pipes and insert into the table

In my form I have:

  • Form Group
    • Checkbox Control
      • Checkbox Input

The various places where dynamic details need to be added is confusing me somewhat! I’ve searched all over this community but just can’t get the finer details I need to make it work.

So far I have:

  • Added a repeat to the Checkbox Control
  • Set the Name of the Checkbox Input to airport[]
  • Set the Checkbox Input Value to the airport name from the loop
  • Set the Label also to the airport name from the loop

I’m seeing all the airports listed correctly with a checkbox next to each one but when I click on any airport label, the first checkbox toggles.

I’d really appreciate some help on this.

4

In the hope this is helpful, here’s my form code as it currently stands:

    <div class="form-group" id="input_airport" is="dmx-checkbox-group" dmx-bind:value="connAllAirports.data.queryAllAirports[0].airportName.split(&quot;|&quot;)">
      <legend class="col-sm-2 col-form-label">Airports</legend>
      <div class="form-check" dmx-repeat:repeatAirports="connAllAirports.data.queryAllAirports">
        <input class="form-check-input" type="checkbox" id="inp_airport" name="airport[]" dmx-bind:value="airportName">
        <label class="form-check-label" for="inp_airport" dmx-text="airportName">Airport Name</label>
      </div>
    </div>
5

That's because you need to use dynamic IDs and dynamic for attribute for the label:

<input class="form-check-input" type="checkbox" dmx-bind:id="inp_airport_{{$index}}" name="airport[]" dmx-bind:value="airportName">
<label class="form-check-label" dmx-bind:for="inp_airport_{{$index}}" dmx-text="airportName">Airport Name</label>
2 Likes
6

Thanks @Teodor, that makes perfect sense. I guessed the id was the issue but couldn’t see how to resolve it.

I’ve hand-coded your changes and it seems to be working as it should. I’m not seeing anything in the App Structure properties, though. Should I? Or is this a solution that can only be done with hand-coding?

7

Every html attribute becomes dynamic, when you add dmx-bind: in front of it :slight_smile:

1 Like
8

So hand-coding is the only way to do it?

9

Well, in this specific case you need to manually add these.

1 Like