totaluat Digital Workplace October 22, 2019 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. 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 : 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. Explore More On Collaboration Microsoft Sharepoint Collaboration Tools Employee Engagement Employee Productivity Employee Workplace Experience Enterprise Social Network Intranet IntraSenz Microsoft Viva SharePoint implementation Sharepoint Upgrade UX Design Workflows and Integration