SharePoint view group by multi value field

Question

My custom list have a multi-value Person or group field.

I want to create a view that group by this Person or group field separately. Is there any solution (custom code or JavaScript is fine)?

I'm using SharePoint 2013 on-premise.

Answer 1

This can be done with custom code only. What you need to do is create an Entity class with attributes you want to show. Traverse through all the list item and fill the entity objects keeping username as primary field.

i.e.

user1 item1Field1 item1Field2
user2 item2Field1 item2Field2
user3 item1Field1 item1Field2
user4 item3Field1 item3Field2

Once you have this kind of dataset, you can easily group them by user field.

Answer 2

Step 1: Get Data from Custom List using Rest API.

 $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SpTutorial')/Items",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    },
    success: function (data) {
        console.log(data.d.results);
        DrawTable(data.d.results);
    },
    error: function (error) {
        alert(JSON.stringify(error));
    }
});

Step 2: Add HTML Table on to page with columns relating to your list view columns

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

Step 3: Use below function to bind data to table

function DrawTable(listData){
$(document).ready(function() {
var table = $('#example').DataTable({
    "Data": listData,
    "columnDefs": [
        { "visible": false, "targets": 2 }
    ],
    "order": [[ 2, 'asc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                );

                last = group;
            }
        } );
    }
} );

// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
        table.order( [ 2, 'desc' ] ).draw();
    }
    else {
        table.order( [ 2, 'asc' ] ).draw();
    }
} );
} );
}

You can add all of these inside script editor on the page with Jquery Reference and reference to DataTables library

//code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

For further reference on Datatables.net with grouping options you can refer to this link: https://datatables.net/examples/advanced_init/row_grouping.html

Answer 3

YOu would need to do the following:

• Retrieve all items
• Loop through each item
• store the value of the person / group value in a separate array
  • split the value in case it is multivalued add to array separately
• after first loop, use jQuery distinct() to get distinct person / group values on the separate array with all found user / group values.
• loop through the items again, store the item in the array with distinct values under each person / group it belongs to

use angular or something similar to translate the resulting nested (grouped) array to html