dropdown list with multiple selections to one DB field

Ask the community
,
1

UPDATE:
I SOLVED THIS USING CHECKBOXES

ORIGINAL POST:
Hi folks. Is there a way for me to create a dropdown list that allows multiple selections to be fed into one DB field, which then shows up on a dynamic item page as a bulleted list?
Imagine you just signed up on a page and your profile update includes ‘languages spoken’. I would like the user to be able to select however many languages they speak and for them to be fed into the one ‘Languages’ field I have in the DB collection.
If a dropdown is not possible, is there a way this can be achieved with checkboxes or any other tool?
Many thanks

2 Likes
2

I have the exact same question. Anyone?

3

Hi folks, after much researching and testing I found a solution. Note that the solution is with checkboxes, not a dropdown.

On the Member Update ID page I:

  • created 4 checkboxes with a text label next to each
  • added this code:

$w.onReady(() => {
$w(‘#dynamicDataset’).onBeforeSave(() => {
let checked = [];
if ($w(‘#checkbox10’).checked)
checked.push(‘English’);
if ($w(‘#checkbox11’).checked)
checked.push(‘Spanish’);
if ($w(‘#checkbox12’).checked)
checked.push(‘French’);
if ($w(‘#checkbox13’).checked)
checked.push(‘Italian’);
$w(‘#dynamicDataset’).setFieldValue(‘langchecks’, checked);
});
});

where ‘dynamicDataset’ is the name of the dateset that connects the Members Update ID page to the DB colelction; ‘checkbox10’ are the IDs assigned to each checkbox through the Properties panel; and ‘langchecks’ is a random name I chose.

By chance I found out that the above code adds a new field in my Live DB collection; it so happens that the new field is called ‘langchecks’. This is the unique field within which the database stores the checkbox selections for ‘checkbox10’ all the way to ‘checkbox12’.

I now had one field in the DB collection fed by the multiple boolean checkboxes each assigned to one of the languages.

The next challenge was to display the content of ‘langchecks’ on the Members ID page. Here is what I did:

  • Counter-intuitively (as this is a display and not an input page) I added an input field on this page and called it ‘input25’ (make this read only under the ‘Set Input Type’
  • I then added this code to the page:

$w.onReady(() => {
const dataset = $w(“#dynamicDataset”);
dataset.onReady(() => {
let { langchecks } = dataset.getCurrentItem();
langchecks = langchecks === null ? ‘’ : langchecks;
$w(“#input25”).value = ${langchecks};
});
});

Which brilliantly displays the content of the one field in the DB collection called ‘langchecks’ while at the same time removing empty spaces for the checkboxes that were not clicked by the user.

Now I have one hopefully simple dilemma to solve.

When the Member ID page shows me the output from ‘langchecks’ it comes in one string, with coma-separated items, but with no spaces.

i.e. “English,Italian”

How can I either:

  • display the output with a space after the coma or even better
  • display the individual items in a bullet point list?

Cheers, Oberdan

4

Anybody?

5

Anybody anybody?

6

You have done a brilliant job already. How about adding space between each checkbox manually? I tried this: ’ - English ', '- Spanis ', ’ - Italian ’

The use of space and - in the beginning of the option was somehow bad but at least it will facilitate the UI/UX

Thanks for the above codes

7

@oberdan @sparkwix Hello! Is there a way to make this exact solution work for REFERENCE fields.

Let’s say i have a collection of Languages with 15 options for checkboxes. How can i push the “_ID” of the language reference field to the Members Update ID page rather than a text array.

NOTE: i have set the ‘langchecks’ to be a REFERENCE field allowing multiple items selected in my Members Update ID collection

would appreciate any help on this added layer of complexity!

8

@oberdan @sparkwix Right now here is my code - but it will NOT load in the multiple ID’s. It only works by doing ONE ITEM and setting to only allow ONE reference item. Is this possible for multiple reference fields?
@liran-kurtz-wix @andreas-kviby - can anyone help here?

$w.onReady(() => {
$w(‘#dataset1’).onReady(() => {
$w(‘#dataset1’).onBeforeSave(() => {

const ENGLISH = “259e0513-9e8a-4c7e-a398-2dfcdde4c130”; ///ID’s of the referenced collection///
const SPANISH = “78644139-32b4-4ed9-8fd3-6703e4a2d113”;
const FRENCH = “002ef455-8c9c-4434-81da-5b1c920e3a7a”;

let checked = [];
if ($w(‘#checkbox19’).checked)
checked.push(ENGLISH);
if ($w(‘#checkbox20’).checked)
checked.push(SPANISH);
if ($w(‘#checkbox21’).checked)
checked.push(FRENCH);

$w(‘#dataset1’).setFieldValue(‘langchecks’, checked)
console.log(“submitted”)
});
});
});