Steps To Create Custom Callouts In SharePoint 2013

Introduction

SharePoint 2013 has introduced a new framework to create Callouts that are displayed only for specific Lists and Libraries. Callouts provide a rich and lightweight detailed experience for the users to displays a limited and important information about an item. Callout was not present in earlier versions of SharePoint. In this article, I will explain how to create custom Callouts in SharePoint 2013.

Pre-Requisites

1. Go to SharePoint 2013 Central Administration site.
   
   
2. Create new publishing portal site collection.
   
   
   
   
3. Go the Site Action -> Site Settings -> “Manage site features” under Site Actions.
   
   
4. Activate “Team Collaboration Lists” feature.
   
   
   
   
5. Go the Site Action -> Site Content -> Add an App.
   
   
   
6. Add new announcement list named as “MyAnnouncements” and add some announcement in it for adding the Callouts for this list.
   
   
   
   
7. Add items to the announcement list.
   
   
   

Points to remember about CallOut

1. JavaScript file named “CallOut.js” was added in 15 hive folder, located in C:\Program Files\Common Files\Microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS.
   
   
   
   
2. Callout.js contains all the methods and classes for creating callout popup. Make sure this file is loaded on the page before calling Callout popup.
   

   SP.SOD.executeFunc(“callout.js”, “CalloutFunction”, function () {
   });

3. Callout.js not present in early versions of SharePoint.
   
   
4. External content will not be displayed in the callout.
   
   
5. Callout popups are displayed by default for Lists & Libraries like page library, document library, image library, etc.
   
   
6. Calendar, Announcement, Discussion and custom list does not display the callout by default.
   
   
7. To change the appearance of the existing callout in lists and library, by changing the respective search callout display template “Item_Word_HoverPanel.html”.
   
   
   
   
   
   
8. The property “beakOrientation” needs to be set for callout popups can be displayed in either “Top to Bottom (topBottom)” or “Left to Right (leftRight)” direction.

Create Custom CallOut

1. Open SharePoint publishing site that we created.
   
   
2. Go to page library and create new blank web part page.
   
   
   
3. Edit the newly created page and add the script editor webpart.
   
   
   
   
4. Click on “Edit Snippet” in the script editor webpart.
   
   
   
   
5. "Embed" popup appears for the script editor webpart.
   
   
   
   
6. Add the following code snippet to get the Callout for announcement “MyAnnouncements” list.
   
   
   

   <script src="/_layouts/15/callout.js" type="text/javascript"></script>
   
   <script type="text/javascript">
       SP.SOD.executeFunc("callout.js", "Callout", function()
   
           {
   
               var Url = "http://siteURL/sites/Ramesh/_vti_bin/ListData.svc/MyAnnouncements";
   
               var request = new Sys.Net.WebRequest();
   
               request.set_httpVerb("GET");
   
               request.set_url(Url);
   
               request.get_headers()["Accept"] = "application/json";
   
               request.add_completed(onSuccessFunction);
   
               request.invoke();
   
           });
   
       function onSuccessFunction(response, eventArgs) {
           var announcements = eval("(" + response.get_responseData() + ")");
   
           var newAnnouncement = document.createElement("div");
   
           for (var i = 0; i < announcements.d.results.length; i++) {
   
               announTitle = announcements.d.results[i].Title;
   
               _announID = announcements.d.results[i].Id;
   
               _announBody = announcements.d.results[i].Body;
   
               anniDiv.appendChild(newAnnouncement);
   
               var calloutLink = document.createElement("div");
   
               calloutLink.id = _announID;
   
               calloutLink.onmouseover = function() {
   
                   curListUrl = this.id;
   
               }
   
               calloutLink.innerHTML = "<div class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px;\"><b>" + _announTitle + "</b><br/><br/></div>";
   
               anniDiv.appendChild(calloutLink);
   
               var listCallout = CalloutManager.createNew({
   
                   launchPoint: calloutLink,
   
                   beakOrientation: "leftRight",
   
                   ID: _announID,
   
                   title: _announTitle,
   
                   content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">"
   
                       +
                       "<hr/></div>"
   
                       +
                       "<div class=\"callout-section\" style=\"margin-top:13px;\">" + _announBody + "</div>",
   
               });
   
           }
   
       }
   
       /script>
   
       <
       div id = "anniDiv" > < /div>

7. CalloutManager.createNew function will create the new callout popup.
   
   
8. Parameter set for the above function, is as follows.
   
   
• launchPoint: calloutLink It will set where callout should come.
• beakOrientation: "leftRight" It will set which direction callout should come.
• ID: announID ID of callout popup.
• title: announTitle Title for callout popup.
• Content What content should add to the popup.
  
  
9. The above script will fetch the “MyAnnouncements” list item and add the page with callout.
   
   
10. Save and publish the page.
    
    
    
    
11. Callout comes on hovering over the announcement title.
    
    
    

Summary

Thus, you have learned how to create custom Callout in SharePoint 2013.