Adding a Select all Displays button for Display Groups

Developer Experience
1

I’m trying to add two buttons in the Manage Membership form for Display Groups.
This because we have layouts we would like to schedule on most of the displays, but not all. So instead of having to click every single display we would like to do this all in once.

I created one button to select all the displays, and one to deselect them all.
I added the name ‘member’ to the checkboxes and get them all to select using the following code:

    function check_all() {
            var checkboxes = document.getElementsByName('member');
            checkboxes = [...checkboxes];
            for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = true;
            }
    }

When saving the form, the checked items aren’t saved.
I saw further on in the code in displaygroup-page.twig that there is a change function for checkboxes.

       control.on("change", ".checkbox", function() {

            // Update our global members data with this
            var memberId = $(this).data().memberId;
            var memberType = $(this).data().memberType;
            var value = $(this).is(":checked");

            if (memberType == "display")
                control.data().members.displays[memberId] = (value) ? 1 : 0;
            else if (memberType == "displayGroup")
                control.data().members.displayGroups[memberId] = (value) ? 1 : 0;
        });

How can I implement this in the button?

2

You’d need to trigger the “change” action ie something like
$("input.checkbox:checkbox").prop("checked", true).trigger("change");

Perhaps you’ve noticed that there are tabs for Display and Display Group assignment, as such you will want to make the selector only select the checkbox from the page that interest you - you could add additional class to the checkbox input say display and do

$("input.display.checkbox:checkbox").prop("checked", true).trigger("change");

For deselect all it can be the same just with false instead of true

the trigger('change') will fire the on change function and with that when you save the form displays should be correctly assigned.

You could also modify your existing code to do the same or do it in many other possible ways.

It’s not something I’ve extensively tested, but hopefully it will be of help to you.

As a side note - it would be good for you to have custom theme with /views folder and the displaygroup-page.twig in it and modify that page instead of making changes to the core code - as it might be problematic on CMS upgrades.

3

Hello Peter,

Thank you for the information. I wasn’t able to reply sooner.

Could you please give me a little bit more understanding about where to put the code.
I added it to the function like this, but that doesn’t work:

    function check_all() {
            var checkboxes = document.getElementsByName('member');
            checkboxes = [...checkboxes];
            for (var i = 0; i < checkboxes.length; i++) {
                   checkboxes[i].checked = true;
                    $("input.checkbox:checkbox").prop("checked", true).trigger("change");
            }
    }

The ‘change’ doens’t seem to trigger this way.

Hopefully you can tell me why not.

4

I’ve got it working now!

You need to add code to two twig pages. Like Peter mentioned it’s best to make a custom theme.
Copy the pages displaygroup-page.twig and displaygroup-form-members.twig to the /views folder.

On page displaygroup-page.twig do the following:

In function displayGroupMembersFormOpen(dialog) look for var table displaysMemberTable.
At var checkBox add name=“member” to the input.

Below the function displayGroupMembersFormOpen(dialog) add the following:

    function check_all() {
            var checkboxes = document.getElementsByName('member');
            checkboxes = [...checkboxes];
            for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = true;
                    $(".checkbox").trigger("change");
                    }
    }

    function uncheck_all() {
            var uncheckboxes = document.getElementsByName('member');
            uncheckboxes = [...uncheckboxes];
            for (var i = 0; i < uncheckboxes.length; i++) {
                    uncheckboxes[i].checked = false;
                    $(".checkbox").change();
            }
    }

Add the following in displaygroup-form-members.twig:

<button id="dialog_btn_2" class="btn btn-default" onClick="check_all()">Select All</button>

  <button id="dialog_btn_3" class="btn btn-default" onClick="uncheck_all()">Deselect All</button>

I’ve added this this below the ul nav nav-tabs so its at the top of the dialog screen.