SharePoint 2013: Creating Custom Callouts

Posted: December 25, 2015 in SharePoint2013

Introduction

In this article we will explore SharePoint 2013. Microsoft has introduced a new Framework to  reate CallOuts that is somewhat similar to the Dialog Framework introduced in SharePoint 2010. The SharePoint 2013 Callouts provide a rich but lightweight details experience for the users. Callouts are used, for example, in document libraries. A callout displays a limited, but important amount of the information about an item. In the document library case, the callout houses some contextual information to allow users to get a preview of the details as well as a set of frequently used commands for users to act on. Many SharePoint 2013 features make use of callouts .

Known limitations of the callout behavior are:

  • SharePoint does not display callouts for external content sources.
  • SharePoint does not generate callouts when rendering in UI Version 14 mode.
  • SharePoint only displays callouts for specific lists, depending on the list’s template.

Important to know

  • SP Callout is only for SP Server 2013.
  • Callout can be displayed for the following SP Lists:
    1. Assert Library.
    2. Document Library.
    3. Task Lists.
    4. Pages Library.
    5. Images Library.
  • Callout cannot be displayed for the following SP Lists:
    1. Custom Lists.
    2. Announcements Lists.
    3. Calendar List.
    4. Discussions List.
  • SP.SOD.executFunc must contain all the SP Callout implementation code.
  • JavaScript and JQuery skills must be expert in order to deliver a professional SP Callout.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button“.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

  1. “text/javascript”>
  2. SP.SOD.executeFunc(“callout.js”“Callout”, function()
  3. {
  4.     var _link = document.getElementById(“AboutusLink”);
  5.     var listCallout = CalloutManager.createNew(
  6.     {
  7.         launchPoint: _link,
  8.         beakOrientation: “leftRight”,
  9.         ID: “CallOut ID”,
  10.         title: “Callouts About Us”,
  11.         content: 

    “ + 

    Thank you for Contacting Us!

    “ + 

    Callout pop up is one more UI change in SharePoint 2013. Metro UI was introduced in share point 2013 and one of the new concept is Callouts …

    “,

  12.     });
  13. });
  14. “AboutusLink” style=“width:38%;”>class=\“ms-commandLink\” style=\”text-align: left;font-size: 14px;\”>Callouts About Us

embed

Finally the result will look like the following,
result

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s