In this article, we will explore the CallOuts Framework introduced by Microsoft in SharePoint 2013. CallOuts are usually used to display limited but important amount of information about an item. But one thing to note, CallOuts are only usable for SharePoint Server 2013.

SharePoint Development Singapore

So where should CallOuts be used? CallOuts are displayed only for a specific list and libraries. By default, CallOuts are displayed in document library, assert library, pages library, images library and task lists.

There are also SharePoint lists that could not display any Callouts, for example:

  • Custom lists
  • Announcement lists
  • Calendar lists
  • Discussion lists.

In order to make sure the above list are displayed in SharePoint, a custom CallOut has to be created.

Let’s take a look at the below sample code on how to create a custom CallOut.

 

Creating a custom CallOut

Invoke the below function to generate a custom CallOut and attach it to an element in the page.

Code:
 

function generateCallOut(element){
 
  var CalloutContent = “<br/><img src='” + element.href + “‘ />”;
  var title = “QR Code – Preview”;
  var id = element.id;

  SP.SOD.executeFunc(“callout.js”, “Callout”, function () {
   AddCalloutTip(id, CalloutContent , title);
  });

 }

 function AddCalloutTip(id, tip, title){
 
  // get the launchpoint element of the callout
  var launchpoint = document.getElementById(id);
 
  // configure Callout options
  var calloutOptions = new CalloutOptions();
  calloutOptions.ID = id;
  calloutOptions.launchPoint = launchpoint;
  calloutOptions.beakOrientation = ‘leftRight’;
  calloutOptions.content = tip;
  calloutOptions.title = title;
  calloutOptions.openOptions = {event: “hover”};
 
  // call the CalloutManager to create the callout
  var callout = CalloutManager.createNew(calloutOptions);
 }

 

Invoking function :

var element = document.getElementById(“demo”);

generateCallOut(element);

 

Result :

sharepoint custom callout

That’s it. That’s how to create a custom CallOut in SharePoint 2013. Instead of the QR code created above, any html content can be used. 

Click here to learn how to create resource booking in SharePoint.