SharePoint 2013: Creating Custom Callouts

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. <script type="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: "<div class=\"ms-soften\" style=\"margin-top:2px; \"><hr/></div>" + "<div id='confirmationBLOCK' style=\"margin-top:13px;visibility:hidden;\">Thank you for Contacting Us!</div>" + "<div class=\"callout-section\" style=\"margin-top:2px;width:95%;Height:200px; \"><span id='CommentsArea' style=\"width:100%;height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;\">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 ...</span ></div>",  
12.     });  
13. });  
14. </script>  
15. <div id="AboutusLink" style="width:38%;"><u><span class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px;\">Callouts About Us</span></u></div>  

Finally the result will look like the following,

Different Ways To Add Item In SharePoint 2013 List

Out-of-box- Add an item to a list:

1. Navigate to the site containing the list for which you want to add an item.
   
   
2. Select Settings > Site contents and then in the appropriate list section, select the name of the list.
   
   
3. Select the Items tab, and then in the New group select New Item.
   
   
4. Select Save.

Using C#(server object model): Add Item programmatically to SharePoint List using C#.

1. //Step to Add new list item programmatically to SharePoint List using C#  
2. using(SPSite site = new SPSite(SPContext.Current.Site.Url))  
3. {  
4.     Using(SPWeb web = site.OpenWeb())  
5.     {  
6.         SPList list = web.Lists["DemoList"];  
7.         SPListItem item = list.Items.Add();  
8.         item["Title"] = "using C# :Add new list item programmatically";  
9.         item.Update();  
10.     }  
11. }  

Using C#(Client object model): Add Item Programmatically to SharePoint List using CSOM.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Text;  
5. using Microsoft.SharePoint;  
6. using Microsoft.SharePoint.Client;  
7. namespace CreateListItem  
8. {  
9.     class Program  
10.     {  
11.         static void Main(string[] args)  
12.         {  
13.             string siteUrl = "http://servername:2525/";  
14.             ClientContext clientContext = new ClientContext(siteUrl);  
15.             List oList = clientContext.Web.Lists.GetByTitle("DemoList");  
16.             ListItemCreationInformation listCreationInformation = new ListItemCreationInformation();  
17.             ListItem oListItem = oList.AddItem(listCreationInformation);  
18.             oListItem["Title"] = "Add item in SharePoint List using CSOM";  
19.             oListItem.Update();  
20.             clientContext.ExecuteQuery();  
21.         }  
22.     }  
23. }  

SharePoint Web Services (jQuery): Add a new item list. The jQuery Ajax function is used to POST the data to the Lists.asmx web service.

1. <script type="text/javascript">  
2.   
3. //The status parameter is a string which can be for example success or error. Finally in the ready event of the document, we'll hook up the click event of the button so the CreateNewItem function is called, with the value of the textbox as the parameter.  
4.   
5.         $(document).ready(function() {  
6.             $("#newTaskButton").click(function() {  
7.                 CreateNewItem("Add Item in List with jQuery and the SharePoint Web Services");  
8.         });  
9.         });   
10.   
11.     function CreateNewItem(title) {  
12.         var batch =  
13.             "<Batch OnError=\"Continue\"> \  
14.             <Method ID=\"1\" Cmd=\"New\"> \  
15.                 <Field Name=\"Title\">" + title + "</Field> \  
16.             </Method> \  
17.         </Batch>";  
18.   
19.         var soapEnv =  
20.             "<?xml version=\"1.0\" encoding=\"utf-8\"?> \  
21.         <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \  
22.             xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \  
23.             xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \  
24.           <soap:Body> \  
25.             <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \  
26.               <listName>DemoList</listName> \  
27.               <updates> \  
28.                 " + batch + "</updates> \  
29.             </UpdateListItems> \  
30.           </soap:Body> \  
31.         </soap:Envelope>";  
32.   
33.         $.ajax({  
34.             url: _spPageContextInfo.webAbsoluteUrl+"/_vti_bin/lists.asmx",  
35.             beforeSend: function(xhr) {  
36.                 xhr.setRequestHeader("SOAPAction",  
37.                 "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
38.             },  
39.             type: "POST",  
40.             dataType: "xml",  
41.             data: soapEnv,  
42.             complete: processResult,  
43.             contentType: "text/xml; charset=utf-8"  
44.         });  
45.     }  
46.   
47.     //The jQuery ajax function call has a complete option which points to a function, in this function you can process the result as follows:  
48.   
49.     function processResult(xData, status) {  
50.         alert(status);  
51.     }  
52.   
53. </script>  

SharePoint REST API: SharePoint REST API and JQuery to Create SharePoint list item.

Reference to latest jquery.min.js.

1. <script type="text/javascript">  
2.   
3.     function _createListItem( listItems, success, failure) {  
4.          
5.           
6.         $.ajax({  
7.             url: _spPageContextInfo.webAbsoluteUrl+ "/_api/web/lists/getbytitle('DemoList')/items",  
8.             type: "POST",  
9.             contentType: "application/json;odata=verbose",  
10.             data: JSON.stringify(listItems),  
11.             headers: {  
12.                 "Accept": "application/json;odata=verbose",  
13.                 "X-RequestDigest": $("#__REQUESTDIGEST").val()  
14.             },  
15.             success: function (data) {  
16.                 success(data);  
17.             },  
18.             error: function (data) {  
19.                 failure(data);  
20.             }  
21.         });  
22.     }  
23.   
24.   
25.           
26.         $(document).ready(function() {  
27.             var item = {  
28.                 "__metadata": { "type": itemType },  
29.                 "Title": "Add Item in List using REST API"  
30.             }  
31.             _createListItem(item);  
32.           
33.         });   
34.   
35.   
36. </script>  

SharePoint PowerShell: Adding list items using PowerShell SharePoint.

1. #Add SharePoint PowerShell Snapin which adds SharePoint specific cmdlets  
2. Add-PSSnapin Microsoft.SharePoint.PowerShell -EA SilentlyContinue  
3.  
4. #Variables that we are going to use for list editing  
5. $webURL = "http://yoursiteName"  
6. $listName = "Demo List"  
7.  
8. #Get the SPWeb object and save it to a variable  
9. $web = Get-SPWeb $webURL  
10.  
11. #Get the SPList object to retrieve the "Demo List"  
12. $list = $web.Lists[$listName]  
13. #Create a new item  
14. $newItem = $list.Items.Add()  
15.  
16. #Add properties to this list item  
17. $newItem["Title"] = "Add item in sharepoint List Using SharePoint PowerShell"  
18.  
19. #Update the object so it gets saved to the list  
20. $newItem.Update()  

Final result shows all the Added Items: