render a form with a multiselect choice field as check boxes on a power page

Question

how do I render a form with a multiselect choice field as check boxes on a power page?

Answer 1

To render a form with a multiselect choice field as check boxes on a Power Page, you need to configure the form metadata appropriately. Here are the steps:

1. Select the Control Style: When configuring the multistep form metadata, set the control style to Multiple Choice. This allows users to select multiple options from a predefined list.
2. Define Group Name: Assign a group name to group the check boxes together as a composite control.
3. Set Minimum and Maximum Selections: You can specify the minimum and maximum number of selections allowed for the multiple choice question using the Multiple Choice Minimum Required Selected Count and Multiple Choice Max Selected Count properties.
4. Prepopulate Field: If needed, you can prepopulate the field with default values when the form loads.

By following these steps, you can successfully render a multiselect choice field as check boxes on your Power Page form.

---

References:

• Configure multistep form metadata for Power Pages
• Add a form
• Check boxes
• Create a list box with option buttons or check boxes

Answer 2

Thanks for reaching out.

Out‑of‑the‑box, Power Pages renders Dataverse multi‑select Choices as a multi‑select dropdown. To show checkboxes, render the choices yourself (Liquid/HTML) and sync selections to the form’s underlying PCF control before submit.

1. Ensure your Dataverse column is Choices with Allow multiple selections enabled and include it on your Basic/Multistep form. [learn.microsoft.com]
2. Use Liquid to list all options as checkboxes. [learn.microsoft.com]
3. In JavaScript, write selected values back to the hidden input (JSON) used by the Choices PCF or to the legacy <select> element. Optional (older sites): set site setting Control/EnableChoices = true. [engineeredcode.com] [stoneridge...ftware.com]

References

• Microsoft Learn – Configure a choices column for Power Pages (forms, lists, Liquid examples) [learn.microsoft.com]
• Engineered Code – Power Pages: Multiselect Change Event (PCF control internals, hidden input JSON) [engineeredcode.com]
  • Stoneridge Software – Multi‑Selection Choices in Power Apps Portal (historical site setting Control/EnableChoices) [stoneridge...ftware.com]
  Let us know if the issue persists after following these steps. I’ll be happy to assist further if needed. If the issue has been resolved, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.

Answer 3

Good morning Gade and thank you for the reply. Comments in line below.

Ensure your Dataverse column is Choices with Allow multiple selections enabled and include it on your Basic/Multistep form. [learn.microsoft.com]

• Yes, the field is confirmed as a multiselect choice field.

Out‑of‑the‑box, Power Pages renders Dataverse multi‑select Choices as a multi‑select dropdown. To show checkboxes, render the choices yourself (Liquid/HTML) and sync selections to the form’s underlying PCF control before submit.

Use Liquid to list all options as checkboxes. [learn.microsoft.com]

In JavaScript, write selected values back to the hidden input (JSON) used by the Choices PCF or to the legacy <select> element. Optional (older sites): set site setting Control/EnableChoices = true. [engineeredcode.com] [stoneridge...ftware.com]

• From what I see, these links discuss how to implement multiselect choice fields, NOT checkboxes.

After looking at this extensively for several days now, I have yet to see a viable working option and suspect that one does not exist. Further, from MSFT docs located here:

https://learn.microsoft.com/en-us/power-pages/configure/client-api-controls#multiple-choice

I am losing hope that this can be successfully deployed.

Thanks,

Ted

Answer 4

Thanks for sharing the screenshot and your findings.

Current limitation: Power Pages uses the multiSelect picklist control for Dataverse multi-select choice fields. As per Microsoft documentation, setValue and getValue methods aren’t supported for this control, and there is no built-in option to render it as checkboxes.

Workaround

To achieve checkbox rendering, you need to customize the form:

1. Hide the default multi-select dropdown using CSS or Liquid.
2. Render checkboxes manually with Liquid:

Liquid

{% for option in entity.metadata.'yourfield'.options %}

<label>

<input type="checkbox" name="customChoices" value="{{ option.Value }}">

{{ option.Label }}

</label>

{% endfor %}

Show more lines

1. Sync selections back to the form using JavaScript:

JavaScript

document.querySelector('form').addEventListener('submit', function() {

const selected = Array.from(document.querySelectorAll('input[name="customChoices"]:checked'))

.map(cb => parseInt(cb.value));

document.querySelector('input[data-id="yourfield"]').value = JSON.stringify(selected);

});

Show more lines

1. Ensure your Dataverse column is Choices with Allow multiple selections enabled.

Why this is necessary

The platform does not currently provide a checkbox style for multi-select choices. The official API methods for checkboxes apply only to single-choice multiple checkbox controls, not multi-select picklists.

References

• Power Pages Client API Controls – Multiple Choice
• Configure Choices Column for Power Pages
• Engineered Code – Multi-select Choices in Power PagesThanks for sharing the screenshot and your findings. Current limitation:
  Power Pages uses the multiSelect picklist control for Dataverse multi-select choice fields. As per Microsoft documentation, setValue and getValue methods aren’t supported for this control, and there is no built-in option to render it as checkboxes. Let us know if the issue persists after following these steps. I’ll be happy to assist further if needed. If the issue has been resolved, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.