Post
Ask Question

Create Custom Callout Menu In SharePoint Server 2016

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.

SharePoint

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.

SharePoint

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.

  1. 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”

  1. <head>  
  2.     <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  3.     <script language="javascript" type="text/javascript">  
  4.         $(document).ready(function() {  
  5.             SP.SOD.executeFunc("callout.js", "Callout", createSharePointCallOutPopup);  
  6.         });  
  7.   
  8.         function createSharePointCallOutPopup() {  
  9.             //Set the element that has to be shown as call out pop up  
  10.             var destinationDiv = document.getElementById('LaunchCallout');  
  11.             //Set the call out menu options  
  12.             var calloutPopUpOptions = new CalloutOptions();  
  13.             calloutPopUpOptions.ID = 'SharePointCallout'; //Set the id  
  14.             calloutPopUpOptions.launchPoint = destinationDiv; //Set the destination element  
  15.             calloutPopUpOptions.beakOrientation = 'topBottom';  
  16.             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  
  17.             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>';  
  18.             calloutPopUpOptions.title = 'SharePoint 2016 CallOut';  
  19.             //Instantiate the call out pop up  
  20.             var displayedCallOut = CalloutManager.createNew(calloutPopUpOptions);  
  21.         }  
  22.     </script>  
  23. </head> //This is the Destination Div where CallOut will work  
  24.   
  25. <body>  
  26.     <div id="LaunchCallout">C# Corner Contacts</div>  
  27. </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.

SharePoint

Add the Content Editor Web Part on to the page.

SharePoint

Click on Edit Web part.

SharePoint

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

SharePoint

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.

SharePoint

This works the same way in Office 365 as well.

SharePoint

Summary

Thus, we saw how to create a custom Callout menu in SharePoint 2016 and Office 365 using JavaScript Object Model.

 


Similar Articles