SharePoint 2013 - Create CallOut and CallOut Action Example

Example of Creating a CallOut and CallOutAction in SharePoint 2013

CallOuts are displayed for Certain type of lists in SharePoint 2013 like Task lists and Document libraries. All exiting CallOuts Can be customized and new one can be Created.

In the below Code all you need is to replace the 'target' element to position the callout from.



Create new CallOut -

 

 var listCallout = CalloutManager.createNew({ 
                launchPoint: target, 
                beakOrientation: "leftRight", 
                openOptions: { 
                    event: "click", 
                    showCloseButton: true 
                }, 
                ID: title, 
                title: title, 
                content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">" 
                        + "Pulication Date: " + pubDate + "</div>" 
                        + "<div class=\"callout-section\" style=\"margin-top:13px;\">" 
                        + "<div>Description:</div>" + description + "</div>", 
            }); 

 

Create CallOut Actions -

 

var calloutAction1 = new CalloutAction({
                text: "Open ",
                isEnabledCallback: function () {
                    callBackListUrl = curListUrl;
                    return true;
                },
                onClickCallback: function () {
                    window.open(callBackListUrl);
                    listCallout.close();
                }
            });

 

listCallout.addAction(calloutAction1);

Check out more Examples at SharePoint 2013 CallOut Tutorial & Examples

Ads by Google