Posts

Showing posts from January, 2018

Completely Sign out in SharePoint 2013

Image
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

Apply Filters to SharePoint List OOTB

Image
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.

Populate dropdown using jquery ajax in SharePoint

Image
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

Image
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

Image
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'

Show month, day and week view in SharePoint 2013 Calendar list using JavaScript

Image
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

Highlight Today’s date in SharePoint 2013 Calendar List

Image
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>