Highlight Duplicate list item in SharePoint 2013

Question

I have a SharePoint 2013 (The Cloud version) custom list where 1 column is a text field where contact numbers are keyed in. How can I get SharePoint to highlight duplicate values in that column so that every time a new item is added to the list, I'll know if the contact number has been used previously?

Ideally, here's what I'd get if I were to enter 816's details for the 2nd time:

CNO....Name.......Issue
816.....Blink........Login Problem (highlighted in red)
907.....Sink.........Access Denied
204.....Mink.........Flickering Screen
816.....Blink........Blank Screen (highlighted in red)

I've been struggling with this for awhile and would be very grateful for any advice. Thanks!

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2014-11-21T21:11:08

Since SharePoint 2013 uses Client Side Rendering (CSR) as a default rendering mode I would recommend the following approach. Basically the idea is to customize List View on the client side as demonstrated below.

Assume the Requests list that contains RequestNo column.

The following JavaScript template is intended for highlighting the rows when list item with RequestNo column occurs more then once:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;

    var counts = getItemCount(rows,'RequestNo');  //get items count    

    for (var i=0;i<rows.length;i++)
    {
      var count = counts[rows[i]["RequestNo"]];
      if (count > 1) 
      {
        var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
        var tr = document.getElementById(rowElementId);
        tr.style.backgroundColor = "#ada";
      }
    }
  }
});


function getItemCount(items,propertyName)
{
   var result = {};
   for(var i = 0; i< items.length; i++) {
      var groupKey = items[i][propertyName];
      result[groupKey] = result[groupKey] ? result[groupKey] + 1 : 1;
   }
   return result;
}

How to apply the changes

Option 1:

Below is demonstrated probably one of easiest way how to apply those changes:

Open the page in Edit mode
Add Content Editor or Script Editor web part on the page
Insert the specified JavaScript template by enclosing it using script tag into web part

Option 2:

Save the specified JavaScript template as a file (let's name it duplicatehighlight.js) and upload it into Site Assets library
Open the page in Edit mode and find JSLink property in List View web part
Specify the value: ~sitecollection/SiteAssets/duplicatehighlight.js and save the changes.

Result

enter image description here

Highlight Duplicate list item in SharePoint 2013

2 Answers