Search code examples
javascriptsharepoint-2013display-templates

SharePoint 2013 - Need to Split Names from a Multi-Select People Picker


I'm working in SharePoint 2013, and I have created a custom display template for a Content Search Web Part. Three of my fields use multi-select people pickers, and all three are returning the names in one string as shown below:

Brown, JohnSmith, MikeJones, Mary

I want to return the names in the format shown below but I just can't seem to get it to work:

Brown, John; Smith, Mike; Jones, Mary

I've tried the advice from these blog articles:

https://social.msdn.microsoft.com/Forums/en-US/ea0fe2fe-0757-4c1c-b3cc-2dd99b38bfa1/sharepoint-2013-custom-display-template-people-picker-field-separate-multiple-names-in-display?forum=sharepointdevelopment

https://sharedpointtips.blogspot.com/2015/01/sharepoint-2013-display-template.html

http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspx

I've tried all the suggestions included in the first article - https://social.msdn.microsoft.com/Forums/en-US/ea0fe2fe-0757-4c1c-b3cc-2dd99b38bfa1/sharepoint-2013-custom-display-template-people-picker-field-separate-multiple-names-in-display?forum=sharepointdevelopment

In the Header:

'Response Preparer'{Response Preparer}:'ResponsePreparerOWSUSER'

In the body:

<script>
            $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
        $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Search/jquery-1.11.3.min.js");
        $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Search/splitNames.js");

        RegisterSod('jquery-1.11.3.min.js', Srch.U.replaceUrlTokens("~sitecollection/_catalogs/masterpage/Display Templates/Search/jquery-1.11.3.min.js"));
        RegisterSod('splitNames.js', Srch.U.replaceUrlTokens("~sitecollection/_catalogs/masterpage/Display Templates/Search/splitNames.js"));

        //Register Dependencies
        RegisterSodDep('splitNames.js', 'jquery-1.11.3.min.js');

        AddPostRenderCallback(ctx, function () {
           EnsureScriptFunc("splitNames.js", 'splitNames', function() {
             var regulatorypartner = $getItemValue(ctx, "Regulatory Partner");
             var splitregpartner = "";
             splitregpartner = $splitNames(regulatorypartner);
           });
         });        

    </script>

In the JavaScript section I have tried this:

var regulatorypartner = ctx.RegulatoryPartnerOWSUSER;
var splitregpartner = splitNames(regulatorypartner);

This is my display code:

<td rowspan="2" colspan="4" style="text-align:center; border:0.5px solid #F88007;"> _#= splitregpartner =#_ </td>

The display should look like this:

Brown, John; Smith, Mike; Jones, Mary

Here is the output of regulatrypartner:

Brown, JohnSmith, MikeJones, Mary

Here is the splitNames code (file is included in the RegisterSod statement):

  var newStr="";
  for(var i=0;i<str.length;i++){
    var char=str.charAt(i);
    if(char==char.toUpperCase()){
        newStr+=" "+char ;
    }else{
        newStr+=char;

    }
  }
  return newStr;
}

Solution

  • Keep in your mind that it won't work for a person who has more then 2 capital letters in his name, there is no way to write something that works for all cases and converts to the format you are looking for unless you add an example for multiple words and unique names.

    to_ReadableFormat("Brown, JohnSmith, MikeJones, Mary");
    
    function to_ReadableFormat(regulatorypartner){
        var counter = 0;
        var fullString = "";
    
        regulatorypartner.match(/[A-Z]/g).map(function (cap) { // loop through all the capitals
            let regIndex = regulatorypartner.indexOf(cap);
            if (counter != 0 && counter % 2 == 0) {
                fullString += regulatorypartner.slice(0, regIndex) + ";";
                regulatorypartner = regulatorypartner.slice(regIndex, regulatorypartner.length);
            }
            counter++;
        });
        fullString += regulatorypartner; // concat the remaining
        return fullString;
    }