How to change a multiple choice dropdown into checkboxes

(1) Share

Report

Posted on by CU29011121-0

Hello,

I've a Choices column in Dataverse, which renders as a multi choice dropdown box in Power Pages and I would like to render it as checkboxes.

I first tried the Multiple Choice style control in metadata, but it doesn't work.

I tried what was suggested in this post but it doesn't render the checkboxes: Display all Choice column values as checkboxes on Page, as well as other suggestions using both Liquid and jquery, but still no success.

It looks like it renders as a PCF control.

Can anyone point me in the right direction please?

Many thanks.

Categories:

Customize & extend

I have the same question (0)

All responses (3)

Answers (0)

Suggested answer

oliver.rodrigues 9,398 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

You will need to use custom JS to achieve that.

I have a code sample on how to manipulate multiselect choices in power pages that might be a good start: Manipulating Choices (Multiselect OptionSet) via JavaScript

Alternatively might be worth looking at the pcf.gallery to see if there is anything there, but I haven't come across any that I remember

Was this reply helpful? Yes No
Suggested answer

Suriyanarayanan V 147 on at

Like (0)

Report
Copy link

Link copied!
Power Pages currently renders Dataverse Choice (multi‑select) columns using the model‑driven PCF control, not the old portal “Multiple Choice” metadata control. That’s why none of the older approaches (metadata, Liquid, jQuery overrides) are working — the PCF control takes full ownership of the UI and ignores classic portal metadata settings.

So what you’re seeing is expected behaviour.

Why the Multiple Choice metadata control doesn’t work

The “Multiple Choice” metadata control only applies to:

OptionSet (single choice)

Two Options

Lookups

It does not override the PCF‑based multi‑select Choice control.
Power Pages treats multi‑select Choice fields as PCF‑only, and the UI cannot be changed using metadata.

Can you force it to render as checkboxes?

Not with out‑of‑the‑box configuration.

To render checkboxes, you need to use one of these supported approaches:

Option 1 — Use a Basic Form + Custom Web Template (Liquid)

Instead of using the default PCF control, you can:

Hide the field on the form

Render your own checkbox list using Liquid

Write selected values back to Dataverse using Web API or a custom action

This gives full control but requires custom code.

Option 2 — Create a custom PCF control

If you want a reusable, native‑feeling solution:

Build a PCF control that renders checkboxes

Bind it to the multi‑select Choice column

Use it in Power Pages (PCF is supported on forms and lists)

This is the cleanest long‑term approach.

Option 3 — Replace the Choice column with a custom table

If your scenario allows it:

Create a Category table

Use a many‑to‑many relationship

Render checkboxes using a subgrid or custom UI

This avoids the PCF multi‑select control entirely.

Option 4 — Use JavaScript only if the PCF control allows DOM manipulation

Most PCF controls do not expose their internal DOM in a stable way.
That’s why your jQuery attempts didn’t work — the PCF control re‑renders itself and wipes out your changes.

So JavaScript is not reliable here.

Summary

Multi‑select Choice fields in Power Pages always render using a PCF control.

Metadata “Multiple Choice” does not apply.

jQuery/Liquid cannot override the PCF UI.

To get checkboxes, you need a custom PCF, or a custom UI built with Liquid + Web API.

Was this reply helpful? Yes No
Suggested answer

Inogic 1,135 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi,

As per our understanding, you have a Choices (multi-select) column in Data verse that appears as a multi-select dropdown in Power Pages, and you would like it to render as checkboxes instead. The metadata “Multiple Choice” style control did not work, and Liquid/jQuery attempts also failed. It appears to be rendering as a PCF control.
you can use JavaScript to control the multi-select Choices field, especially when it is rendered as a PCF control and metadata changes (like “Multiple Choice” style) do not work.
Since Power Pages renders multi-select Choice columns using a PCF control, Liquid and form metadata often won’t override the UI. In this case, JavaScript is a practical workaround.
$(document).ready(function() {
function GetChoicesValue(fieldName) {
var choicesField = $("#" + fieldName + "_Container");

var selectedValues = [];
choicesField.find('.msos-selected-display-item').each(function () {
selectedValues.push($(this).data('value'));
});

console.log(selectedValues);
return selectedValues;
}

function SetChoicesValues(fieldName, valuesToSelect, clearSelectedChoices) {
var choicesField = $("#" + fieldName + "_Container");

if (!valuesToSelect || !valuesToSelect.length) {
return;
}

if (clearSelectedChoices) {
ClearChoicesValues(fieldName);
}

valuesToSelect.forEach(function (item) {
var valuesSelected = GetChoicesValue(fieldName);

if (valuesSelected.indexOf(item) === -1) {
var checkboxDataItem = choicesField.find("li input.msos-checkbox[value='" + item + "']");
if (checkboxDataItem.length) {
checkboxDataItem.click();
}
}
});
}

function ClearChoicesValues(fieldName) {
var choicesField = $("#" + fieldName + "_Container");
var checkboxDataItem = choicesField.find("li input.msos-checkbox");

if (checkboxDataItem.length) {
checkboxDataItem.prop("checked", false).trigger("change");
}
}

function SelectAllChoicesValues(fieldName) {
var choicesField = $("#" + fieldName + "_Container");
var checkboxDataItem = choicesField.find("li input.msos-checkbox");

if (checkboxDataItem.length) {
checkboxDataItem.prop("checked", true).trigger("change");
}
}
});

Hope this helps.

Thanks!

Inogic

Was this reply helpful? Yes No