4

How to add Previous/Next buttons to SharePoint blogs posts so I can navigate to previous or next post ?

3

http://sprecipe.com/2016/04/02/pimp-my-sharepoint-episode-3-enhance-your-sharepoint-blogs-with-previousnext-buttons/

  1. Disable Minimal Download Strategy Feature for blog site
  2. Edit Posts.aspx page
  3. Add a script editor webpart to this page
  4. Paste the following script into the script editor and save the page.

Remarks:

  • you should upload jQuery to your portal and change the reference in the script

  • you have to change the name of the 'Posts' list in the script if your SharePoint is not in english

  • There is another script on the blog where it displays the preview of titles in the buttons instead of just 'Previous/Next'

  • Read the article for more details

    <!-- Jquery is required, upload it on your portal and replace following reference -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
    
    <style>
        /* Styling buttons 
       I used a copy of SharePoint buttons default style, you may want to change it or directly inherit OOB buttons style. 
       Of course you can put style definition in an external file and import it here. */
    
    .CustomButton
    {
        width: 60px;
        padding:7px 10px;
        border:1px solid #ababab;
        background-color:#fdfdfd;
        background-color:#fdfdfd;
        font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
        font-size:11px;
        color:#444;
        text-align:center;
    }
    
    .CustomButton:hover
    {
        border-color:#92c0e0;
        background-color:#e6f2fa;
        text-decoration:none;
    }
    
    .CustomButton:active
    {
        border-color:#2a8dd4;
        background-color:#92c0e0;
    }
    
    .CustomButton:visited
    {
        color:#444;
    }
    
    .CustomButtonPrevious
    {
        float:left;
    }
    
    .CustomButtonNext
    {
        float:right;
    }
    
    
    </style>
    
    
    <script type='text/javascript'>
    
    // Replace "Posts" by the name of Posts list in your language. (For my japanese friends:投稿) 
    POST_LIST_DISPLAY_NAME = 'Posts';
    
    // Query items to generate buttons
    function generatePaging() 
    { 
        // Retrieving context
        var clientContext = new SP.ClientContext.get_current();
    
        // Retrieving current item's parent list
        var list = clientContext.get_web().get_lists().getByTitle(POST_LIST_DISPLAY_NAME);
    
        // Retrieving current item's ID from URI
        var currentItemID = getParameterByName('ID');
    
        // For blogs, posts are ordered by PublishedDate (Descending) by default
        var camlQueryString = '<View><Query><OrderBy><FieldRef Name="PublishedDate" Ascending="TRUE" /></OrderBy></Query><ViewFields><FieldRef Name="ID" /><FieldRef Name="PublishedDate" /></ViewFields></View>';
    
        // Creating CamlQuery
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(camlQueryString);
    
        this.collListItem = list.getItems(camlQuery);       
        clientContext.load(this.collListItem);
    
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }
    
    // On success generate buttons from results
    function onQuerySucceeded(sender, args) 
    {
        var listItemInfo = '';
        var listItemEnumerator = collListItem.getEnumerator();
    
        // Retrieving current item's ID from URL
        var currentID = getParameterByName('ID');
    
        var previousID, nextID;
        var currentIsNext = false;
        var currentItemPublishedDate;
    
        while (listItemEnumerator.moveNext()) 
        {
            // Retrieving current item
            var listItem = listItemEnumerator.get_current();
    
            if (currentIsNext)
            {
                var nextItemPublishedDate = listItem.get_item('PublishedDate');
                var currentDate = new Date();
    
                if (nextItemPublishedDate < currentDate || nextItemPublishedDate.getTime() === currentDate.getTime())
                    nextID = listItem.get_item('ID');
    
                break;
            }
            else
            {
                if(listItem.get_item('ID') == currentID)
                {
                    currentItemPublishedDate = listItem.get_item('PublishedDate');
                    currentIsNext = true;
            }
            else
            {
                previousID = listItem.get_item('ID');
            }
        }
    }
    
    // Setting the location of paging area, you can choose another place on the page
    $("td.ms-blog-LeftColumn").append("<div id='CustomPaging' />");
    
    // if ID of previous item is found, create button
    if (previousID)
    {   
        // Add redirection link regarding current URL format
        if(document.URL.indexOf("?ID=") > -1)
            $("#CustomPaging").append("<a href='" + document.URL.replace("?ID=" + currentID, "?ID=" + previousID) + "' class='CustomButton CustomButtonPrevious'><< Previous</a>");
        else
            if(document.URL.indexOf("&ID=") > -1)
                $("#CustomPaging").append("<a href='" + document.URL.replace("&ID=" + currentID, "&ID=" + previousID) + "' class='CustomButton CustomButtonPrevious'><< Previous</a>");
    }
    
        // if ID of next item is found, create button
        if (nextID)
        {
            // Add redirection link regarding current URL format
            if(document.URL.indexOf("?ID=") > -1)
                $("#CustomPaging").append("<a href='" + document.URL.replace("?ID=" + currentID, "?ID=" + nextID) + "' class='CustomButton CustomButtonNext'>Next >></a>");
            else
                if(document.URL.indexOf("&ID=") > -1)
                    $("#CustomPaging").append("<a href='" + document.URL.replace("&ID=" + currentID, "&ID=" + nextID) + "' class='CustomButton CustomButtonNext'>Next >></a>");
        }
    }
    
    function onQueryFailed(sender, args) 
    {
        // In case where items cannot be retrieved
        //alert('Request failed. ' + args.get_message() + '\n' +     args.get_stackTrace());
    }
    
    // Function to retrieve parameter from URI
    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, " "));
    }
    
    // Register generatePaging function
     $(document).ready(function () {
        // Do not show buttons in dialog mode
        if(document.URL.indexOf("&IsDlg=1") == -1)
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', generatePaging);
    });
    
    </script>
    

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.