Create Custom CallOut,Create CallOut Actions,Hide CallOuts,Remove CallOut SharePoint 2013

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 2Hide,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



This is a personal weblog. The opinions expressed here represent my own and not those of my employer or anyone else. Should you have any questions or concerns please e-mail me at .

Copyright (c) 2010 @ All rights are reserved.Do Not Copy.

@ Learning