Create Custom Callout Menu In SharePoint Server 2016

Priyaranjan K S
8y
4.7k
0
1

Article

SharePoint 2013 introduced Callout Menu which was an added functionality in addition to the existing modal pop up framework. With Callout Menu, we can display the information in a Metro UI format.

As per MSDN definition of Callout, “These provide relevant contextual information and actions around a particular item. Callouts are generally used to show the user more information or actions about an item in a lightweight UI. If scrollbars or user input are necessary, the callout is probably not a good choice.”

SharePoint has Out-of-the-Box Callouts which we can see when we go to a list item.

The basic purpose of the Callout menu is to provide contextual information about an object. We can also create custom Callout menu using JavaScript Object Model. In order to facilitate this, we have been provided with the Callout.js library in SharePoint.

Just like the Dialog Framework is supported by ModalDialog.js file, we have Callout.js file supporting the Callout Framework and it resides within the LAYOUTS folder. It contains definitions for Callout Manager. Whenever we want to create a new custom Callout, we will have to first create an instance of the Callout Manager and pass the required parameters to that.

In this article, we will see how to create a custom Callout. The below code creates a custom Callout that will be displayed upon hovering of the HTML element.

Callout Menu Working

Here, the HTML Div Element whose hovering should invoke the Callout is given the id ”LaunchCallout”. The major chunk of the JSOM code is defined within the main function “createSharePointCallOutPopup”. However, it should be invoked only after Callout.js has been loaded to the page. This is ensured by the SP.SOD.ExecuteFunc() call.

SP.SOD.executeFunc("callout.js", "Callout", createSharePointCallOutPopup);

Once it is loaded to the main function, createSharePointCallOutPopup, starts executing.

CalloutManager.createNew(calloutPopUpOptions) is the primary statement that instantiates the Callout menu. It creates an instance of the Callout Manager and passes the Callout Menu options as a parameter to the Callout Manager. The major attributes that have to be set for the Callout Menu options, are

Id – Calloutmenu ID
LaunchPoint – HTML Div element where callout menu should appear
BreakOrientation – Allignement of the callout menu
Content – CallOut menu structure and content to display
Title – Callout menu title.

Custom Callout Menu Code

The below code shows a fully functional Callout menu that will be invoked on hover of the Div Element “C# Corner Contacts”

<head>
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
SP.SOD.executeFunc("callout.js", "Callout", createSharePointCallOutPopup);
});
function createSharePointCallOutPopup() {
//Set the element that has to be shown as call out pop up
var destinationDiv = document.getElementById('LaunchCallout');
//Set the call out menu options
var calloutPopUpOptions = new CalloutOptions();
calloutPopUpOptions.ID = 'SharePointCallout'; //Set the id
calloutPopUpOptions.launchPoint = destinationDiv; //Set the destination element
calloutPopUpOptions.beakOrientation = 'topBottom';
calloutPopUpOptions.content = '<p> <img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_themes/csharp/Images/siteLogo.png" alt="c#Corner" width="142" height="36" /></p><p>C# Corner: A social community for developers and programmers.</p><p><span style="text-decoration: underline;"><strong>C# Corner
Contacts < /strong></span > < /p><p><strong>Praveen Kumar(<a href="mailto:[email protected]">[email protected]</a > ) < /strong></p > < p > < strong > Dinesh Kumar( < a href = "mailto:[email protected]" > dinesh @c - sharpcorner.com < /a>)</strong > < /p>';
calloutPopUpOptions.title = 'SharePoint 2016 CallOut';
//Instantiate the call out pop up
var displayedCallOut = CalloutManager.createNew(calloutPopUpOptions);
}
</script>
</head> //This is the Destination Div where CallOut will work
<body>
<div id="LaunchCallout">C# Corner Contacts</div>
</body>

Adding Callout to Page

Save this JSOM code in a text file and upload it to a SharePoint Library, say Site Assets. We will be adding the above JSOM code file to invoke a custom Callout, in the Content Editor Web part(CEWP). To add a CEWP, go to the Edit View of the page.

Add the Content Editor Web Part on to the page.

Click on Edit Web part.

In the Content Link, specify the SharePoint library location where the text file containing the JSOM code was saved.

Click on Apply and OK. Now, if we go over to the page and hover over the C# Corner Contacts, it will show a Callout menu with the details we had added as HTML in the code.