Hide empty choices in checkbox field

Ask the community
,
1

Hi everyone,

I have a dynamic page where I use multiple choice checkbox field to show what a member has activated in the profile. I am using “tags”.

My goal is that I want to hide the empty choices in the multiple choice field on the dynamic page, so that it will only show what really has been clicked (and is relevant). I searched in the discussion forums but I can’t find any help on this though. Does anyone know how I can make this happen?

I am not a coder, this is why I have nothing to present because what I have tried didn’t make any sense probably because too many red dots would appear. If it works without coding, even better!

1 Like
2

Hi Nelson,

To dynamically display only the clicked ones saved to the collection, it will take a little code. You will need to re-constitute the options of the checkbox group.

This example uses the getCurrentItem() function to get the dataset’s current record data and will run after the page and dataset is loaded.

$w.onReady(function () {
 $w("#dataset1").onReady(() => {
 let item = $w("#dataset1").getCurrentItem;
 // substitute your field name storing the tags
 let chosenValues = item.memberChoices;
 let newOptions = buildOptions(chosenValues);
 $w("#checkboxGroup1").options = newOptions;
 // if you want them all checked?
 let indices = buildSelectedIndices(chosenValues);
 $w("#checkboxGroup1").selectedIndices = indices;
 });
});

function buildOptions(chosenValues) {
 return chosenValues.map((curr) => {
 return { label: curr.toString(), value: curr };
  });
}

function buildSelectedIndices(chosenValues) {
 let selIndices = [];
 for (var i = 0; i < chosenValues.length; i++) {
        selIndices.push(i);
    }
 return selIndices;
}
3

Hi @anthonyb,

Thank you for your reply and the sample of code.
Let’s see what I can do with it. :slight_smile:

Thanks again for the help!

4 
Hi Anthony, I tried this code but it doesn't work. I still have all the multiple checkboxes showing both TRUE and FALSE

$w("#dynamicDataset").onReady(() => {
 let item = $w("#dynamicDataset").getCurrentItem;
 // substitute your field name storing the tags
 let chosenValues = item.tags;
 let newOptions = buildOptions(chosenValues);
 $w("#meetingCheckbox").options = newOptions;
 // if you want them all checked?
 let indices = buildSelectedIndices(chosenValues);
 $w("#meetingCheckbox").selectedIndices = indices;
 
});

function buildOptions(chosenValues) {
 return chosenValues.map((curr) => {
 return { label: curr.toString(), value: curr };
  });
}

function buildSelectedIndices(chosenValues) {
 let selIndices = [];
 for (var i = 0; i < chosenValues.length; i++) {
        selIndices.push(i);
    }
 return selIndices;
}

Am I probably missing something?

Thank you
5

You are indeed missing something, I’m sorry to say. Before posting I did a quick test on this using the results of a query, but then I realized that you are using a dataset and modified the code that you see above for that approach. Unfortunately, I forgot to add the parenthesis at the end of the getCurrentItem function. It should be

 let item = $w("#dynamicDataset").getCurrentItem();
6

May you tell me whats the reason for showing me onready is not a function a litteraly copy pasted the code but changed the tagsname which is from the database

7

@kalenadesignsgraz I know you said that you copied and pasted the above code, but could you copy and paste into a reply?