Multiple choice field in form selected limit

[hagru]

Hello!

I have a choice field in my table that I have set to allow multiple selection. The field is inserted in a form on my Power Pages, and I would like to limit the user to only be able to select 5. It doesn't really matter if the user can insert the form multiple times and select more than 5 over multiple submits, as I can limit that in other ways, but I would like to limit the user to only select a maximum of 5 choices on each submit. 

How can I implement such a limit?

[OliverRodrigues · Accepted solution]

you can add a JavaScript validation, either via Page_Validators, or within the OnChange of the field

A few starting points:

Manipulating Choices (Multiselect OptionSet) via J... - Power Platform Community (microsoft.com)

Add custom JavaScript to a form | Microsoft Learn

[hagru]

Hello @OliverRodrigues!

That post of yours was very helpful, and I managed to check how many options have been selected, and disallow the user to select more if they have already selected 5, like this:

<script>

function GetAntiChoicesValue(fieldName) {

var choicesField = $("#cr598_anti_Container");

var choicesFieldLength = choicesField.find('.msos-selected-display-item').length;

if(choicesFieldLength > 5){

choicesField.find('.msos-selected-display-item').last().remove();

}

};

$(document).ready(function() {

$('#cr598_anti_Container').change(function() {

GetAntiChoicesValue("cr598_anti");

});

});

</script>

Thank you!

I also have a list that displays the values sent from this form. Is it possible to see how many rows there are in the list, and disallow the user to select more if there are already 5 in the list?

The HTML of the list element is giving me a headache, and I'm not sure how to get the length of the table out through jQuery,

[OliverRodrigues]

When you say a list, do you mean a Subgrid / List component / Dropdown? can you share a snapshot? 

[hagru]

Yes, it's a List component:

I have three of them on this page, with the data coming from three different tables. It might not matter that I have three, because I only want to know how many items are displayed in one of them, but I can't find any ID in the HTML, so I'm mentioning it either way.

[OliverRodrigues · Accepted solution]

Unfortunately we don't have the ID for List component, so you need to retrieve it by using eq(index)

If your list is the first one, you can specify the index as 0 (as per my example), and if it's the 3rd one, you would use index 2 for example:

$(document).ready(function() {
  $('.entitylist.entity-grid').eq(0).on("loaded", function () {
    let table = $(this);
    let count = $(table).find('tbody tr').length;
    console.log(`Number of records: ${count}`);

    let multiplePages = $(table).find(".view-pagination").is(":visible");
    console.log(`Multiple Pages: ${multiplePages}`);
  });
});

 I added some logic there with regards pagination as well, basically this logic only count the number of records within the current page, if the "multiplePages" variable is true, this means you have more records in other pages

Hope this helps, don't forget to like/mark the answer as the solution if it helps you

[hagru]

You are a real MVP @OliverRodrigues!

Thank you very much. I made it all work the way I wanted by implementing your suggestions, and mixing them together to create a total, and disabling / removing selections from the choices based on the totals with the event handlers.

I'm marking the choice JS as the solution, as that is technically what I asked for to begin with, but the List JS would've been deserving of a solution as well!

EDIT 

Nevermind, I forgot I can mark them both as solutions!