Introduction
In this Article we explore how to use PreSaveAction() method in SharePoint list form in SharePoint 2013.PreSaveAction() is a JavaScript function which helps us to do something before the item will be saved. PreSaveAction function allows to override functionality when Save button is clicked.PreSaveAction function executes the code written for validation on click of save button. I just want to add one thing, you should override PreSaveItem – this is a SharePoint built in function. Instead, like mentioned above – override/create PreSaveAction.

Scenario

I have a default SharePoint list form with save or cancel, I want the user to attach files while creating a new item. When user clicks on save button, page post back happens and if validation fails, validation message is displayed.

Solution

I used the following code with PreSaveAction function for validation to display messages on Save button click and Save button, attach runtime custom handler. Default Save button calls PreSaveItem method, which in turn calls PreSaveAction for any validations.

  1. $(document).ready(function ()
  2. {
  3.     ProducerReferral();
  4.     attachEventHandlers(); // function for checking the duplication of files
  5.     $(‘input[value=Save]’).click(function ()
  6.     {
  7.         PreSaveTest();
  8.     });
  9. });
  10. function PreSaveTest()
  11. {
  12.     PreSaveAction();
  13. }
  14. function PreSaveAction()
  15. {
  16.     if ($(“#idAttachmentsRow”).css(“display”) == “none”)
  17.     {
  18.         $(“#part1 > h4”)[1].innerHTML += “<span style=’margin-left: 40px;’ class=’ms-formvalidation ms-csrformvalidation’>Please Attach Files.</span>”;
  19.         returnVal = false;
  20.     }
  21.     else
  22.     {
  23.         return true;
  24.     }
  25. }

This method is called when save button is clicked and messages are displayed in case of File not attached.

Title

Note: If you are using “$(document).ready” in your code, make sure PreSaveAction function is written outside this block, as in above code or else PreSaveAction method will not be called.

Reference

 

Introduction

In this article you will learn how to implement Custom Promoted ActionsDelegate Control in SharePoint 2013.

PromotedActions:

Delegate Control is responsible for displaying Links “Share, Follow, SYNC, EDIT” in top right below SuiteLinksDelegate Control. These links can be replaced by Overriding PromotedActions Delegate Control using a Custom Control created using Visual Studio to the following area on a SharePoint site in the top-right section of the page.

newsfeed

Step 1:

Create one Empty SharePoint Project and provide the Solution Name and choose the Solution Path and click on OK.

Step 2:

Deploy the Solution as Farm Solution. Provide the Url in next screen and validate the Connection.

Step 3:

Add New UserControl to the Project from the Templates and provide the Name to it, in our case it is “MyCustomPromotedActionsDelegate”.

MyCustomPromotedActionsDelegate

Now our Solution Explorer looks as in the following,

Solution

Step 4:

Now open the “.ascx” of the User Control and paste the following code.

ascx

Step 5:

Add Elements.xml file to the Solution, provide the name and click on Add.

Elements

Step 6:

Click on elements.xml file and paste the following code snippet inside the elements tag,

  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2.     <Elementsxmlns=http://schemas.microsoft.com/sharepoint/&#8221;>
  3.         <!– DelegateControl reference to the PromotedActions Delegate Control –>
  4.         <ControlControlSrc=“/_controltemplates/15/PromotedActionsDelegate_Example/MyCustomPromotedActionsDelegate.ascx” Id=“PromotedActions” Sequence=“1” />
  5.         </Elements>
  6.   </Elements>

Step 7:

Final step is to build, deploy and then ad additional link.

The final outcome will look as follows,

Outcome

Introduction

In SharePoint 2010 when we want to create a blank Site/ sub site it is possible to choose blank site templates. But in SharePoint 2013 blank site template is not displayed in the selection the blank site template is not visible in SharePoint, because its “Hidden” property is set to true. There are two ways configuration to be made to make blank site template to be available for selection.

  • Using PowerShell.
  • The server files.
    • Browse to: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\1033\XML* Edit file:WEBTEMP.XML
    • Locate this line of code: <Configuration ID=”1″ Title=”Blank Site” Hidden=”TRUE”
    • Change Hidden=”TRUE” to Hidden=”FALSE”

If you open SharePoint 2013 central administration and click on “Create site collection” under Application Management, by default you will not be able to see “Blank Site” template under Collaboration category.

Template collection

Solution: There are two ways:

  1. Run the command Get-SPWebTemplate to get the full list of the available templates. You can see, the Blank Site template is still there, and it’s ID is STS#1:

    shell

    The complete script would be,

    1. $s = Get – SPSite “<URL of your Site Collection>”
    2. $template = Get – SPWebTemplate “STS#1”
    3. New – SPSite – Url$s – OwnerAlias “<domain\user>” – Template$template
  2. The easiest way to permanently add blank site template is through the server files.

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\1033\XML\WEBTEMP.XML

    1. <ConfigurationID=“1” Title=“Blank Site” Hidden=“TRUE” ImageUrl=“/_layouts/15/images/stbs.png?rev=23” Description=“A blank site for you to customize based on your requirements.” DisplayCategory=“Collaboration” AllowGlobalFeatureAssociations=“False”>
    2.     </Configuration>

    Change the highlighted tag, Hidden = true to false and you’re good to go.

    template

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

 

Introduction 

In this article we explore in Microsoft SharePoint provider different ways to add item in SharePoint list.

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

New item

  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/&#8221;;
  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. “text/javascript”>
  2. //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.
  3.         $(document).ready(function() {
  4.             $(“#newTaskButton”).click(function() {
  5.                 CreateNewItem(“Add Item in List with jQuery and the SharePoint Web Services”);
  6.         });
  7.         });
  8.     function CreateNewItem(title) {
  9.         var batch =
  10.             “> \
  11.             “1\” Cmd=\”New\”> \
  12.                 “Title\”>” + title + ” \
  13.              \
  14.         “;
  15.         var soapEnv =
  16.             “?> \
  17.         “http://www.w3.org/2001/XMLSchema-instance\” \
  18.             xmlns:xsd=\http://www.w3.org/2001/XMLSchema\” \
  19.             xmlns:soap=\http://schemas.xmlsoap.org/soap/envelope/\”> \
  20.            \
  21.             “http://schemas.microsoft.com/sharepoint/soap/\”> \
  22.               DemoList \
  23.                \
  24.                 ” + batch + “ \
  25.              \
  26.            \
  27.         “;
  28.         $.ajax({
  29.             url: _spPageContextInfo.webAbsoluteUrl+“/_vti_bin/lists.asmx”,
  30.             beforeSend: function(xhr) {
  31.                 xhr.setRequestHeader(“SOAPAction”,
  32.                 http://schemas.microsoft.com/sharepoint/soap/UpdateListItems&#8221;);
  33.             },
  34.             type: “POST”,
  35.             dataType: “xml”,
  36.             data: soapEnv,
  37.             complete: processResult,
  38.             contentType: “text/xml; charset=utf-8”
  39.         });
  40.     }
  41.     //The jQuery ajax function call has a complete option which points to a function, in this function you can process the result as follows:
  42.     function processResult(xData, status) {
  43.         alert(status);
  44.     }

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

Reference to latest jquery.min.js.

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

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. #Variables that we are going to use for list editing
  4. $webURL = http://yoursiteName&#8221;
  5. $listName = “Demo List”
  6. #Get the SPWeb object and save it to a variable
  7. $web = Get-SPWeb $webURL
  8. #Get the SPList object to retrieve the “Demo List”
  9. $list = $web.Lists[$listName]
  10. #Create a new item
  11. $newItem = $list.Items.Add()
  12. #Add properties to this list item
  13. $newItem[“Title”] = “Add item in sharepoint List Using SharePoint PowerShell”
  14. #Update the object so it gets saved to the list
  15. $newItem.Update()

Final result shows all the Added Items:

Demolist

Introduction 

In this article we will see how to implement SuiteLinks Delegate Control in SharePoint 2013

SuiteLinksDelegate

It is a new delegate control introduced in SharePoint 2013. If you are looking to add a new link just next to “Sites, NewsFeed, SkyDrive” etc, on the top bar of your SharePoint site you can now do that with a new delegate control “SuiteLinksDelegate“. The SuiteLinksDelegate control will allow us to modify the default links,

For Example: To add our own links, in the “suit links”.

Header before

Header

Step 1: Create One Empty SharePoint Project and provide the Solution Name and choose the Solution Path and click OK.

Step 2: Deploy the Solution as Farm Solution. Provide the Url in next screen and validate the connection.

Step 3: Add New UserControl to the Project from the Templates and provide a Name to it, in our case it is “MyCustomSuiteLinksDelegate

UserControl

Now our Solution Explorer looks as follows,

MyCustomSuiteLinksDelegate

Step 4: Add reference to Microsoft.SharePoint.Portal dll.

Solution Explorer
Ensure your control inherits from MySuiteLinksUserControl like this:
public partial class MyCustomSuiteLinksDelegate: MySuiteLinksUserControl

Step 5: Code snippet for the ascx.cs file.

  1. using System;
  2. using System.Web.UI;
  3. using System.Web.UI.WebControls;
  4. using System.Web.UI.WebControls.WebParts;
  5. using Microsoft.SharePoint;
  6. using Microsoft.SharePoint.Utilities;
  7. using Microsoft.SharePoint.WebControls;
  8. using System.Globalization;
  9. using System.IO;
  10. using System.Collections;
  11. using Microsoft.SharePoint.Portal;
  12. using Microsoft.SharePoint.Portal.WebControls;
  13. namespace SuiteBarBrandingDelegate_Example.ControlTemplates.SuiteLinksDelegate_Example
  14. {
  15.     public partial class MyCustomSuiteLinksDelegate: MySuiteLinksUserControl
  16.     {
  17.         protected void Page_Load(object sender, EventArgs e)
  18.         {}
  19.         protected override void Render(HtmlTextWriter writer)
  20.         {
  21.             writer.RenderBeginTag(HtmlTextWriterTag.Style);
  22.             writer.Write(“.ms-core-suiteLinkList {display: inline-block;}”);
  23.             writer.RenderEndTag();
  24.             writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-core-suiteLinkList”);
  25.             writer.RenderBeginTag(HtmlTextWriterTag.Ul);
  26.             RenderSuiteLink(writer, http://AboutUs/&#8221;“About Us”“lnkSearchLink”false);
  27.             RenderSuiteLink(writer, http://ContactUs/&#8221;“Contact Us”“lnkSearchLink”false);
  28.             RenderSuiteLink(writer, http://Feedback&#8221;“Requisition Manager”“lnkSearchLink”false);
  29.             writer.RenderEndTag();
  30.             base.Render(writer);
  31.         }
  32.     }
  33. }

Step 6: Add Elements.xml file to the Solution, provide the name and click Add.

Elements

Step 7: Click on elements.xml file and paste the following code snippet inside the elements tag.

  1. <?xml version=“1.0” encoding=“utf-8”?>
  2.     <Elements xmlns=http://schemas.microsoft.com/sharepoint/&#8221;>
  3.         <!– Adding DelegateControl reference to our custom SuiteSuiteLinksDelegate Control –>
  4.         <Control ControlSrc=“/_controltemplates/15/SuiteLinksDelegate_Example\MyCustomSuiteSuiteLinksDelegate.ascx” Id=“SuiteLinksDelegate” Sequence=“90” /> </Elements>

Step 8: Final step is to build and deploy, then the SharePoint text will override with the Text of the portal.

The final outcome will look as in the following,

Menu

Introduction

In this article you will learn how to implement custom SuiteBarBranding Delegate Control in SharePoint 2013.

SuiteBarBrandingDelegate: This delegate care about top left site logo and text. Facilitates us to override the left-top corner text for the site. This text can only be replaced by overridingSuiteBarBrandingDelegate Delegate Control with custom control created using Visual Studio. Normally, there’s a text reading “SharePoint”, so we can replace it with the title of our own site:

SuiteBarBrandingDelegate Control will look as follows in SharePoint Page.

Header before

Header

Step 1: Create one empty SharePoint Project and provide the Solution Name and choose the Solution Path. Then click OK.

Step 2:
Deploy the Solution as Farm Solution. Provide the Url in next screen and validate the connection.

Step 3: Add New UserControl to the Project from the Templates and provide a Name to it. In our case it is “MyCustomSuiteBarBrandingDelegate

UserControl

Now our Solution Explorer looks as follows,

Solution Explorer

Step 4: Now open the “.ascx” of the User Control and paste the following code.

User Control

Step 5: Code snippet for the ascx.cs file.

Code snippet

Step 6: Add Elements.xml file to the Solution, provide the name and click  Add.

Empty element

Step 7: Click on elements.xml file and paste the following code snippet inside the elements tag.

  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <Elements xmlns=http://schemas.microsoft.com/sharepoint/&#8221;>
  3.   <!– Adding DelegateControl reference to our custom SuiteBarBrandingDelegate Control –>
  4.   <Control ControlSrc=“/_controltemplates/15/SuiteBarBrandingDelegate_Example\MyCustomSuiteBarBrandingDelegate.ascx”
  5.            Id=“SuiteBarBrandingDelegate”
  6.            Sequence=“1” />
  7. </Elements>

Step 8: Final step is build and deploy then the SharePoint text will be overridden with the text of the portal.

The final outcome will be as in the following screenshot,

final Outcome