web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
Your Invited to Keeping It Real with the Power Platform
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Display all Choice col...
Power Pages
Suggested Answer

Display all Choice column values as checkboxes on Page

(1) ShareShare
ReportReport
Posted on by ctedesco3307 802
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)
  • Suggested answer
    Suriyanarayanan V Profile Picture
    Suriyanarayanan V 201 on at
    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.

  • ctedesco3307 Profile Picture
    ctedesco3307 802 on at
    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
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Your Invited to Keeping It Real with the Power Platform

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
rezarizvii Profile Picture

rezarizvii 71

#2
DP_Prabh Profile Picture

DP_Prabh 36

#3
oliver.rodrigues Profile Picture

oliver.rodrigues 32 Most Valuable Professional

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans