Display all Choice column values as checkboxes on Page

(1) Share

Report

Posted on by ctedesco3307

703

Hello - I have a choice column on a Dataverse table that I want to display in a Power Pages multiselect form.

I'd like to display all the values at once as checkbox selections instead of having the user click the lookup spyglass then pick values from the drop down and have the selections show horizontally (example below). Can someone let me know how? I've seen some posts on adding JavaScript to do it, but they didn't provide enough intel.

Thanks in advance

Default way on a form in pages

Preferred way - I took this example from a Power Pages Site that I have developer access to but I can't find the code on where it is in Power Pages Management

Categories:

Design & build

I have the same question (0)

All responses (2)

Answers (0)

Suggested answer

surya narayanan 102 on at

Like (0)

Report
Copy link

Link copied!

Hi,

Out of the box, Power Pages doesn’t have a multi‑select choice column rendered as horizontal checkboxes — it always uses the lookup picker or a vertical multi‑select.

You can do it with JavaScript + Liquid by rendering all the choice values manually and then syncing the user’s selections back to the Dataverse multi‑select column before the form submits.
Follow the below steps:
1. Get your choice column’s options

In your Power Pages form web template, use Liquid to output all possible choices:

{% assign myChoices = entities['your_table'].attributes['your_choice_column'].options %} <div id="myChoicesContainer"> {% for option in myChoices %} <label> <input type="checkbox" class="choice-checkbox" value="{{ option.value }}"> {{ option.label }} </label> {% endfor %} </div>

This will create all the checkboxes with their values.

2. Sync selections to the hidden Dataverse field

Hide the original multi‑select control (Power Pages still expects to find it), and update its value on submit:

<script> document.addEventListener("DOMContentLoaded", function() { // Hide the OOB multi-select var originalField = document.querySelector("select[data-name='your_choice_column']"); if (originalField) { originalField.style.display = "none"; } // Before submit, copy selected checkbox values into the original control var form = document.querySelector("form"); if (form) { form.addEventListener("submit", function() { var selectedValues = []; document.querySelectorAll(".choice-checkbox:checked").forEach(cb => { selectedValues.push(cb.value); }); if (originalField) { // Clear existing for (var i = 0; i < originalField.options.length; i++) { originalField.options[i].selected = selectedValues.includes(originalField.options[i].value); } } }); } }); </script>

3. Make it horizontal Add simple CSS:

#myChoicesContainer label { display: inline-block; margin-right: 10px; }

How it works

The checkboxes are shown to the user (horizontal layout).

On submit, your script takes the checked boxes and maps them back into the hidden OOB multi‑select field, so Dataverse saves them correctly.

Was this reply helpful? Yes No
ctedesco3307 703 on at

Like (0)

Report
Copy link

Link copied!

Hi @surya narayanan - Thank you very much for your answer. Could you explain more on where to put the code? I don't understand where it is supposed to go. (Obviously I'm really new to coding.....) I see Web Templates in Portal Management but I don't see where to put the code. My site is using the default pages template. Could you also clarify where to put the script as well? I tried pasting them both in VS Code but it didn't work,,,,,,, Thanks again for your help

Was this reply helpful? Yes No