My SharePoint Moments

How to Customize SharePoint Calendar Days Name using jQuery Step1: Create a page and calendar list to it. Step2: Now add Script Editor Web Part to it and paste the below code. Code- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //execute the script only when the calendar JS file loads LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {     WaitForCalendarToLoad(); }); function WaitForCalendarToLoad() {     //running your function for the first time IF YOU NEED TO!     ChangeDaysName();     var _onItemsSucceed =      SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;      SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed =        function($p0, $p1) {             _onItemsSucceed.call(this, $p0, $p1);         //now let it call your function each time the calendar is loaded        ChangeDaysName();     } } function

How to hide “edit” link from SharePoint list Go to SharePoint list à list settings à advanced settings, under Quick Edit choose “No” to "hide" edit link.

How to change the Link and Text of "new item" in SharePoint list Open site in SharePoint Designer, redirect to the list AllItem View Page and add the script under <PlaceHolderMain> tag. Code- <script type="text/javascript">  $(document).ready(function(){ $("span:contains('new item')").text('New Entry'); $(".ms-heroCommandLink").attr('href','http://srs:port/site/SitePages/NewsAndEvents.aspx'); $(".ms-heroCommandLink").removeAttr("onclick");  });  </script>

How to display logged in user's name and profile picture using rest api jQuery Code:- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){  getDetails(); }); function getDetails(){ var userDisplayName = ""; $.ajax({     url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",     type: "GET",     headers: {         "accept": "application/json;odata=verbose",     },     success: MyPictureSucceeded,     error: MyPictureFailed }); } function MyPictureSucceeded(data) { userDisplayName = data.d.DisplayName; $('#userDisplayName').text(userDisplayName);     if(data.d.PictureUrl != null) {         $('#escMyPic').attr('src', data.d.PictureUrl);     } } function MyPictureFailed()

How to get User Profile Properties in SharePoint 2013 using REST api and jQuery Code: $(document).ready(function() {       user_Properties();    }); function user_Properties(){  $.ajax({                  url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",               headers: { Accept: "application/json;odata=verbose" },               success: function (data) {                           console.log(data);                        },               error: function (jQxhr, errorCode, errorThrown) {                   alert(errorThrown);               }           });      }

How to implement Loader in SharePoint forms using jQuery HTML:- <div id="ProcessingGifAjax" >     <img src="../Style%20Library/Images/ajax-loader.gif" alt="processing" />     <b>Processing...</b><br />     (please wait) </div> <style type="text/css"> #overlay {         background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;         height: 100%;         position: fixed;         width: 100%;         z-index: 1;     }     #ProcessingGifAjax {         background: #ffffff none repeat scroll 0 0;         border: 3px solid #50570b;         border-radius: 15px;         color: #5d6c8c;               font-family: Arial,Helvetica,sans;         font-size: 1em;         height: 90px;         left: 50%;         margin: 5px 5px 5px -50px;         padding: 5px;         position: fixed;         text-align: center;         top: 200px;         width: 100px;         z-index: 9000;  

How to enable and disable Client side People Picker using jQuery By using below methods you can easily enable or disable Client side People Picker:- function disablePP() { $(".sp-peoplepicker-delImage").find("span").css("display","none"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', true); $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").addClass("sp-peoplepicker-topLevelDisabled"); } function enablePP() { $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").removeClass("sp-peoplepicker-topLevelDisabled"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', false); $(".sp-peoplepicker-delImage").find("span").removeAttr('style'); }

How to get users from SharePoint Group using REST api By using below code you can easily get users from a specific SharePoint Group. function GetUsers(){  $.ajax({ url:_spPageContextInfo.webAbsoluteUrl +"/_api/web/sitegroups/getbyname('GrpName')/users", type: 'GET', dataType: 'json', headers: { "accept": "application/json;odata=verbose;charset=utf-8" }, success: function (data) {           Console.log(data); }, error: function ajaxError(response) { alert(response.status + ' ' + response.statusText); },   }); }

Create a Page and add Script Editor web part to it and paste the below code. Code - <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="_layouts/15/sp.runtime.js" type="text/javascript"> </script> <script src="_layouts/15/sp.js" type="text/javascript"> </script> <script src="_layouts/15/clienttemplates.js" type="text/javascript"></script> <script src="_layouts/15/clientforms.js" type="text/javascript"></script> <script src="_layouts/15/clientpeoplepicker.js" type="text/javascript"></script> <script src="_layouts/15/autofill.js" type="text/javascript"></script> <script src="_layouts/15/1033/strings.js" type="text/javascript"></script> var Exte

How to Customize SharePoint list and implementing Quick search using jQuery 1. Create a SharePoint list and create a view for it. 2. Now choose the created view and go to modify view, under Style choose Shaded as shown below.  3. Edit the list and add script editor web part to it and paste the below code. Code:- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <style> .ms-addnew {   display: none; } input[type=button] {     background-color: #4CAF50;     border: none;     color: white;     padding: 16px 32px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function(){   $("input.search").change(function() { debugger;      var txt = $("input.search").val();         if (txt)          {

How to create 3D Pie Chart in SharePoint Create a Page and add Script Editor web part to it and paste the below code. Code: <style> #chartdiv {   width: 100%;   height: 500px; } </style> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/pie.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <script type="text/javascript"> $(document).ready(function () { GetListi

How to create Pie Chart in SharePoint Create a Page and add Script Editor web part to it and paste the below code. Code: <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script> <script type="text/javascript"> $(document).ready(function () { GetListitemsitems(); }); function GetListitemsitems() {         $.ajax({            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/GetByTitle('ProductSales')/items",             type: "GET",             headers: { "Accept": "application/json;odata=verbose" }, // return data format             success: function (data) {                console.log(data.d.results);                              var testdata=[];                          $.

Shortcut Urls in SharePoint 1.Add web parts to any page: /append ?PageView=Shared&ToolPaneView=2 2.Create New Site Content: /_layouts/create.aspx 3.Create New Site: /_layouts/NewsbWeb.aspx 4.List Template Gallery: /_catalogs/lt/Forms/AllItems.aspx 5.Master Page Gallery: /_catalogs/masterpage/Forms/AllItems.aspx 6.Manage your Alerts: /_layouts/SubEdit.aspx 7.Create New Alert: /_layouts/SubChoos.aspx 8.Manage Site Collection Administrators: /_layouts/mngsiteadmin.aspx 9.Manage Sites and Workspaces: /_layouts/mngsubwebs.aspx 10.Manage People: /_layouts/people.aspx 11.Manage User Permissions: /_layouts/user.aspx 12.Modify Navigation: /_layouts/AreaNavigationSettings.aspx 13.Modify Site Navigation: /_layouts/SiteNavigationSettings.aspx 14.Recycle Bin: /_layouts/AdminRecycleBin.aspx 15.Site Directory: _layouts/SiteDirectorySettings.aspx 16.Save Site as Template: /_layouts/savetmpl.aspx 17.Site Settings page: /_layouts/settings.aspx 18.Create New Web Part Page: /_layou

How to use Start and End Date in SharePoint forms using jQuery $(document).ready(function(){     $("#txtFromDate").datepicker({         numberOfMonths: 2,          dateFormat: 'dd/mm/yy',                     changeMonth: true,                     changeYear: true,         onSelect: function(selected) {           $("#txtToDate").datepicker("option","minDate", selected)         }     });     $("#txtToDate").datepicker({         numberOfMonths: 2,  dateFormat: 'dd/mm/yy',                     changeMonth: true,                     changeYear: true,         onSelect: function(selected) {            $("#txtFromDate").datepicker("option","maxDate", selected)         }     });  }); HTML:- From: <input type="text" id="txtFromDate" /> To: <input type="text" id="txtToDate" />

How to Generate anonymous access link to a file using REST API <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <script type="text/javascript">     $(document).ready(function () {         test();     }); function test() {   var ctx = SP.ClientContext.get_current();       var url = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.Web.CreateAnonymousLink";                     $.ajax({               'url': url,               'method': 'POST',               'data': JSON.stringify({                  'url': _spPageContextInfo.webAbsoluteUrl + '/Migrated%20Lib/Software.docx',                  'isEditLink': true               }),               'headers': {               'accept': 'application/json;odata=verbose',               'content-type': 'application/json;

Create a Pop up before Submitting a form using jQuery <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () {  $("#btn").click(function () {                          var bool = true;                 msg = "Are you sure want to Submit this Form?";                 bool = confirm(msg);                 if (bool == true) {                     alert("PR Canceled successfully");                 }                                      else {                     return false;                                         }                 return bool;             });  }); </script> <input type="button" id="btn" value="submit" />

How to hide Ribbon from SharePoint List’s Display form Each of the SharePoint List has three form by default: 1.DisplayForm.aspx 2.EditForm.aspx 3.NewForm.aspx To check this Open List in SharePoint Designer and Under Form section we have three default forms as below: In my scenario i will hide SharePoint ribbon from DisplayForm.aspx, to implement this i will Open DisplayForm.aspx in SharePoint Designer and paste the code to hide ribbon. Code:     <script type="text/javascript">         document.getElementById("s4-ribbonrow").style.display = "none";     </script> Output:

How to Open SharePoint 2013 Calendar Event in Modal Dialog Step 1: Create a SharePoint Calendar list and Add an event there as below. Step 2: Edit list, add Script Editor Web Part to it and paste the below code. Code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript">     $(document).ready(function () {         setInterval(function () {             $("a[href*='DispForm.aspx']").each(function () {                 $(this).attr("onclick", "openDialog('" + $(this).text() + "','" + $(this).attr("href") + "')");                 $(this).attr("href", "javascript:void(0)");                 $(this).removeAttr("target");             });         }, 900);     });     function openDialog(title, url) {         va

How to Completely Sign out in SharePoint 2013 Step1: Create a page and add Script Editor Web Part to it. Step2: Paste the below code to this web part. Code:   <script type="text/javascript"> function SignOut() { debugger; alert("Hi") if (typeof SP !== 'undefined') {     var ctx = new SP.ClientContext.get_current();     var site = ctx.get_site();     ctx.load(site, 'Url');     ctx.executeQueryAsync(Function.createDelegate(this, function (sender, args) {         var url = site.get_url();         window.location = url + '/_layouts/closeConnection.aspx?loginasanotheruser=true';     }), Function.createDelegate(this, function (sender, args) {         alert('Error: ' + args.get_message());     })); } else {     alert('Error: This is not a SharePoint 2010 or 2013 website'); } } </script> <input type="button" value="SignOut" onclick="Sig

How to apply filters to SharePoint list OOTB Step 1: Go to the SharePoint list where you want to apply the filter, go to List tab under SharePoint ribbon and click on “Modify view”. Step 2: In this section you need to go under Filter section and apply filter as per your requirement. Here, you can choose any column from the list as per your requirement and apply the filter. In this scenario I am using a condition where Created By is equal to [Me]. [Me] refers to the currently logged in user.

How to Populate dropdown using jquery ajax in SharePoint Step 1: Create a page and add Script Editor Web Part to it. Step 2: Paste the below code to Script Editor Web Part. Code:               <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <script type="text/javascript"> var option; var Banks;  $(document).ready(function () {      Banks = $("#ddlbanks");  // html control      option = $("<option/>").attr("value",0).text("-Select-");      Banks.append(option);      populateBanks();   }); function populateBanks(){      $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Banks')/Items", type: 'GET', dataType: 'json', async: false, headers: {     "accept": "application/json;odata=verbose;charset=utf-8" },

Display Locations on a Map in SharePoint 2013 and SharePoint online Here we will be dynamically displaying the locations contained in a list on a Bing Maps map in a SharePoint 2013 site. Step 1: Create the list Create the list that will contain the locations to show on the map. Step 2: Get a Bing Maps key You can obtain a valid Bing Maps key from here . Note- login here with your Microsoft account. Step 3: Creating the location field To create the location field on our list we need to use a custom form in a page containing a script. So first create a page where you wish to place the custom form. On that page add a Script Editor web part. Paste the below code in the Script Editor Web part- <script type="text/javascript"> var clientContext; var relativeAdress;  function AddGeolocationField() {  ClearNotifications();  GetRelativeAdress();  clientContext = new SP.ClientContext(relativeAdress);  var web = clientContext.get_web();  var targetL

Customize SharePoint 2013 lists using Client-side rendering Client-side rendering is a new concept in SharePoint 2013. It’s provides you with a mechanism that allow you to use your own output render for a set of controls that are hosted in a SharePoint page (list views, display, add and Edit forms). This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom and predefined field types. JSLink files have the ability to quickly and easily change how a list views and forms are rendered. More specifically how the fields in that list should be displayed. Go to SharePoint list and edit the page. Now edit list web part as below and provide JS link. Code(listBanks.js)- (function () {     var overrideCtx = {};     overrideCtx.Templates = {};     overrideCtx.Templates.Fields = {         'Popularity': { 'View': renderPercentComplete },         'Priority': { 'View'

How to Show month, day and week view in SharePoint 2013 Calendar list using JavaScript Step 1: Go to your Calendar list, Edit page and add Script Editor Web Part to it. Step 2: Paste the below code to Script Editor Web Part Code:                 <script type="text/javascript">                 function TestDay()                 {                    CoreInvoke('MoveView','day');                 }                                 function TestWeek()                 {                    CoreInvoke('MoveView','week');                 }                                              function TestMonth()                 {                    CoreInvoke('MoveView','month');                 }                                                              </script>   <div style="float:right;">  <a href="#" onclick="TestDay()"><img sr

How to Highlight Today’s date in SharePoint 2013 Calendar List using jQuery Step 1: Go to your Calendar list, Edit page and add Script Editor Web Part to it. Step 2: Paste the below code to Script Editor Web Part Code: <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){     //append text     var originText=$(".ms-acal-today").find("nobr").text();     $(".ms-acal-today").find("nobr").text(originText+"Today");     //change the background     $(".ms-acal-today").css("background-color","yellow");     $(".ms-acal-today").css("font-style","italic");     $(".ms-acal-today").css("font-size","37px");        }); </script>