SharePoint Programming

In SharePoint 2013, Microsoft has Introduced a new Framework to Create CallOuts that is somewhat similar to the Dialog Framework Introduced in SharePoint 2010.

The new CalloutManager class in “Callout.Js” (path – C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS) is responsible for Creating and editing Instances of a CallOuts in SharePoint 2013.


You can find the Complete Tutorial at SharePoint 2013 CallOut Popup Tutorial 

Creating a Custom CallOuts - You would use CalloutManager.createNew() or CalloutManager.createNewIfNecessary() methods to Create a new CallOut on any Target element.

Example 1 - Create Custom Callouts in SharePoint 2013

Example 2 - Creating Custom CallOuts Where CallOuts gets displayed on Hover Over of an Item.

Exmaple 3 - Create a Quick Contact Us or FeedBack Form in SharePoint 2013 (using CallOuts)


Create CallOut Actions - CallOut Actions are Links (such as “Open”, “Edit”, “Share”) that gets displayed in the bottom area of a Callout.CalloutActionOptions() is one of the methods in Callout.Js that lets you Create and edit CallOut Actions for Items.

Example 1 - Create CalloutActions in a Callout – SharePoint 2013



Example 2 - Hide,Remove,Customize CallOut Actions in SharePoint 2013

Disable\Remove Callouts - You need to set SPField.CalloutMenu  and\or SPField.CalloutMenuAllowed for a Field to disable CallOuts on it. Read more at Disable CallOuts for Lists and Libraries in SharePoint 2013

 You can also Hide CallOuts by switching Views that you use in your list.See the Quick workaround to Hide CallOuts in a SharePoint 2013 Task List