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.


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.


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.

  • Thank you for you answer. My final solution is to create another custom list, which hold information of each user, some original item's information and a link to original item . That means a parent item will split to several child items (which can be grouped by user field). This might share your idea, but using custom list will not lead us to create whole new view using custom code. – Thanhma San Feb 18 '16 at 9:01
  • 1
    Yes, you can create custom list but again you need to write some code to populate it as per your need. Identify the efforts involved in both approaches and decide. Also ensure that creating new lists and populating with data should not overhead content database. – Dipesh Bhanani Feb 19 '16 at 6:58

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

    url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SpTutorial')/Items",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    success: function (data) {
    error: function (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%">
            <th>Start date</th>
            <th>Start date</th>

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


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.