Create CalloutActions in Hover Over\Callout Popups in SharePoint 2013

Summary : Create Callout Actions in SharePoint 2013, Create Callouts in SharePoint 2013, Example of Creating CalloutActions in Callouts ,Create Callout Action with callout.js,Hide Callout actions open in SharePoint 2013

In Continuation with the series on Callouts in SharePoint 2013, in this post we will look at how to create CallOut Actions (EDIT,SHARE,OPEN..) in a Custom CallOuts in SharePoint 2013.
Before you begin you should take a look at Some Important tips for working with CallOut Popups in SharePoint 2013.

Because We’re So Good, Our Content gets Copied very Often.If you are not reading this on LearningSharePoint.com, please read the Original article Here for details, comments and updates on this post.



CalloutActionOptions() is one of the methods provided in Callout.Js to let you Create Action like Share,Open,ADD TO TIMELINE that you see in Preview popups of list items. Add the below Script in Script Editor Web Part as we did in Part 1

Script –

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");

function CreateCallOutPopup()
{
var targetElement = document.getElementById('NotificationDiv');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';

var displayedPopup = CalloutManager.createNew(calloutOptions);

var customAction = new CalloutActionOptions();
customAction.text = 'Action 1';
customAction.onClickCallback = function(event, action)
{
alert("This is JavasCript alert on Custom Action");
};

var _newCustomAction = new CalloutAction(customAction);

displayedPopup.addAction(_newCustomAction);
}
</script>

<div id="NotificationDiv" style="width:30px;"><span id="ms-pageDescriptionImage">&#160;</span> </div>

The Resulting Screen should look like below –
"SharePoint 2013 CallouPopusAction"

 

When clicked the Action ‘ACTION 1′ displays a JavaScript alert.
"SharePoint 2013 CalloutPopusActionAlert"

You might also be Interested in an example on How to Hide\Remove\Customize CallOut Actions at Hide,Remove,Customize CallOut Actions in SharePoint 2013

See the Complete Tutorial at SharePoint 2013 CallOut Tutorial & Examples

Original article : Here


Trackbacks

  1. […] and Samples at SharePoint 2013 Developer Tutorials and Samples Ads by google Related Posts Create CalloutActions in Hover OverCallout Popups in SharePoint 2013SharePoint 2013 – The new “Preview Feature” in Search ResultsSharePoint 2013 […]

Speak Your Mind

*