locked
[Forum FAQ] Show unread items in SharePoint 2010 list RRS feed

  • General discussion

  • Scenario:

    Change the style of items to indicate the unread items of a list on a per-user basis.

    Solution:

    The example below will show how to change the style of the unread items of a list on a per-user basis, it will mark an item as read for an user when this item is opened by this user in display form page.

    1. Download the jQuery API to the "Site Assets" library, then we can reference it in our script like this:

    <script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>

    2. Create a Single Line of Text column “ReaderIDs” to store the ids of users who have read this item.

    3. This is the complete code in list view page(AllItems.aspx):

    <script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    //script in list view
    
    $(function(){
      ExecuteOrDelayUntilScriptLoaded(sharePointReady, "sp.js"); 
    });
    
    function sharePointReady() { 
        this.clientContext = SP.ClientContext.get_current();
        this.website = clientContext.get_web();
        var list = website.get_lists().getByTitle('List1');
        var camlQuery = new SP.CamlQuery();
        this.collListItem = list.getItems(camlQuery);        
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }
    function onRequestSucceeded() {
        var oListItem;
        var ids;
        var unreadIDs="";
        var listItemEnumerator = collListItem.getEnumerator();        
        while (listItemEnumerator.moveNext()) {
            oListItem = listItemEnumerator.get_current();
            ids = oListItem.get_item("ReaderIDs");
            if((ids==null)||(ids.indexOf(";"+_spPageContextInfo.userId+";")<0))
            {
              unreadIDs+=";"+oListItem.get_item("ID")+";";
            }     
        }  
        showUnread(unreadIDs);
    }
    function onRequestFailed(sender, args) {
        console.log('Error: ' + args.get_message());
    }
    
    function showUnread(IDs)
    {
      var $tr = $("tr.ms-itmhover");
      $tr.each(function(k, v){
        if(IDs.indexOf($(this).attr("iid").split(",")[1])>=0)
        {
          $(this).css('background-color','cyan');
        }   
      });
    }
    </script>
    

    4. This is the complete code in display form page(DispForm.aspx):

    <script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    //script in display form
    
    var clientContext;
    var item;
    var itemId;
    
    $(function(){
      ExecuteOrDelayUntilScriptLoaded(sharePointReady, "sp.js"); 
    });
    
    function sharePointReady()
    {
      Ready(itemId);
    }
    
    //get current item id
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    //query the ReaderIDs column 
    function Ready(id) {  
        clientContext = SP.ClientContext.get_current();
        var website = clientContext.get_web();
        var list = website.get_lists().getByTitle('List1'); 
        itemId = getParameterByName("ID");
        id = itemId;
        item = list.getItemById(parseInt(id));
        clientContext.load(item);
        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }
    function onRequestSucceeded() {
        if((item.get_item("ReaderIDs")==null)||(item.get_item("ReaderIDs").indexOf(";"+_spPageContextInfo.userId+";"))<0)
        {
          updateListItem(itemId, item.get_item("ReaderIDs")+";"+_spPageContextInfo.userId+";")
        }
        
    }
    function onRequestFailed(sender, args) {
        console.log('Error: ' + args.get_message());
    }
    
    //check if current user in the ReaderIDs, add current user id into ReaderIDs column
    function updateListItem(id, readerIds) {
        var oList = clientContext.get_web().get_lists().getByTitle('List1');
        this.oListItem = oList.getItemById(parseInt(id));
        oListItem.set_item('ReaderIDs', readerIds);
        oListItem.update();
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onUpdateSucceeded), Function.createDelegate(this, this.onUpdateFailed));
    }
    
    function onUpdateSucceeded() {
        console.log('Item updated!');
    }
    
    function onUpdateFailed(sender, args) {
        console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
    </script>
    

    After the page loaded, it will highlight the unread items in different color:

    Happy coding!


    Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.

    Saturday, May 2, 2015 11:42 AM