My SharePoint Moments

Customize exported excel's cell background color in Datatables In this post i will walk you through how we can customize exported excel's cell background color in datatables. For this we need make changes in the buttons.html5.js file. you may refer below links for more info.  excelHtml5  and  how can i change the background color Follow below steps and make changes in buttons.html5.js file 1. Create your own fills.  '<fills count="11">'+ '<fill>'+ '<patternFill patternType="none" />'+ '</fill>'+ '<fill>'+ // Excel appears to use this as a dotted background regardless of values but '<patternFill patternType="none" />'+ // to be valid to the schema, use a patternFill '</fill>'+ '<fill>'+ '<patternFill patternType="solid">'+ '<fgColor rgb="FFD9D9D9" /&

Stop a Power Automate Flow If you ever created a flow then you might have to either delete it as it might not in use, but here you can pause a Power Automate Flow using the below steps. You can turn off or turn on it anytime. Please follow below steps:- 1. Sign in to MS Flows. 2. Click on "My Flows". 3. Click on the flow you want to stop. 4. Click on "Turn off" button to stop the flow. I hope the above stated steps may help you :)

Approval flow in MS Power Automate I have create a simple flow on Power Automate if Column values equals "Approved" then trigger an email to the desired user else trigger an email to the created by or any other user. Please follow below steps:- 1. Sign in to MS Flows. 2. Click on "My Flows". 3. Select "Create From Blank +". 4. find below steps in the given screenshots.   (i) Add an action - Search for "SharePoint" in the connectors and actions.   (ii) Search for desired actions as show below. Hope this kind of simple approval flow will help you implementing in your projects or BAU.

Generating HTML mailto links What is mailto link Mailto link is a type of HTML link that activates the default mail client on the computer for sending an e-mail. The web browser requires a default e-mail client software installed on his computer in order to activate the e-mail client. If you have Microsoft Outlook, for example as your default mail client, pressing a mailto link will open a new mail window.  How to create mailto link in HTML Mail to email address with cc, bcc, subject and body <a href="mailto:rajatvedi007@gmail.com?cc=vedi.rajat@gmail.com&bcc=test@testing.com &subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body</a> Important Note - How to add spaces in the mail's subject or body You can add spaces by writing %20 in the text of the subject or body. <a href="mailto:test@gmail.com?subject=The%20subject&body=This%20is%20a%20message%20body">Send mail&

Generate PDF using jsPDF and html2canvas library In this post we will implement how we can generate PDF file of a web page using jsPDF and html2canvas library. These libraries allow us to generate PDF of web pages having html including icons, images, text, css etc. Below is the complete implementation for the same. Follow below steps to perform this -  1. Include jsPDF and html2canvas libraries in your html page - <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <div class="canvas_div_pdf"> <!--Add HTML content you want to convert to PDF--> </div> 2. Call the below function in your JS -     function getPDF(){         var HTML_Width = $(".canvas_div_pdf").width();         var HTML_Height = $(".canvas_di

Export Merged column header in datatables If you looking for a post where you need to export a datatable with merged column header then you are at right place. Below is the detailed example to execute this. You can implement this in your BAU requirements. Please follow below steps -  1. Add a local function to buttons.html5.js :- var _fnGetHeaders = function(dt) {     var thRows = $(dt.header()[0]).children();     var numRows = thRows.length;     var matrix = [];     // Iterate over each row of the header and add information to matrix.     for ( var rowIdx = 0;  rowIdx < numRows;  rowIdx++ ) {         var $row = $(thRows[rowIdx]);         // Iterate over actual columns specified in this row.         var $ths = $row.children("th");         for ( var colIdx = 0;  colIdx < $ths.length;  colIdx++ )         {             var $th = $($ths.get(colIdx));             var colspan = $th.attr("colspan") || 1;             var rowspan = $th.attr("rowspan") || 1;  

Special characters in SharePoint Rest filters You might have noticed while using SharePoint filters with special characters such as '&', '@' or '!' etc. you get error as we need to use encodeURIComponent in the rest api filtering. Below is the working example of filtering data from rest api having special character. Code -  function matchDataFromSPList(val){         $.ajax({                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('ListName')/items?$filter= ColumnName eq '"+encodeURIComponent(val)+"'",                 type: "GET",                 headers: {                         "Accept": "application/json;odata=verbose"                 },                 async: false,                  success: function(data) {                                                                                             if (data.d.results.length > 0) {                           

Show a progress loader in an Ajax call SharePoint REST api  In most of our BAU requirements we need to show a progress loader in an Ajax call while data loads. There are several methods you can use, below is the code which i have implemented and you can use the same in your requirements. Code -  function bindData(url1) {          $.ajax({                 url: url1,                 method: "GET",                 dataType: 'json',                 beforeSend: function () {                     $(".loader").show();                 },                  headers:                 {                         "Accept": "application/json; odata=verbose"                 },                                                                            success: function success(data)                 {                         // You can write your code here                                        },                 complete: function (data) {                   

 Sorting a JSON Object Array You might have use sort() method to sort an array, but several time we might have requirement to sort a JSON object array based on a key attribute. In the below example we will learn how to sort a JSON object array. Code - function GetSortOrder(prop) {         return function(a, b) {             if (a[prop] > b[prop]) {                 return 1;             } else if (a[prop] < b[prop]) {                 return -1;             }             return 0;         }     } $.each(data, function(index, value)                         {                                                                theArray.push(                                 {                                         "finalProductsOnSubmit": value.Products,                                         "finalsubProductsOnSubmit": value.SubProduct,                                         "finalattributesOnSubmit": value.Attributes,                                      

 Clearing a data table on button click jQuery In many of the scenarios we have to clear a datatable on an event as its previous data is no longer in use, to achieve this there might be many approaches. I have used below approach to clear a datatable on button click using jQuery. Code -  $("#submit").on("click", function(){     if ($('#tblData tbody tr').length > 0)                 {                         $('#tblData thead').remove();                         $('#tblData tbody').empty();                         $('#tblData').DataTable().destroy();                                         } });

SharePoint list last updated details using REST You can use the below code to get last updated date of a SharePoint list which may be used in your any BAU requirement. Code -  function lastItemModified(){    $.ajax({     url: url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Dummy')/Items?$select=Modified&$orderby= Modified desc",,     method: "GET",     headers: {       "Accept": "application/json; odata=verbose"     },     async: false,     success: function success(data) {               var d = data.d.results[0].Modified.substring(0, data.d.results[0].Modified.lastIndexOf("T"));           var year = d.split("-")[0];           var month = d.split("-")[1];               var day = d.split("-")[2];           var html = "<i>Last Updated: </i>" + month +"/"+ day +"/"+ year;           $("#last_updated").h

Customizing Data Tables -  In the below scenario i have changed data table button names, customize paginate, customize search, customize infoFiltered etc. You just need to get your data from a data source and apply the below code. Code -  $("#tbl").DataTable({         dom: 'Bfrtip',         buttons: [{           extend: 'pdf',           text: 'Pdf'         }, {           extend: 'excel',           text: 'Excel'         }],         language: {           paginate: {             next: '&#8594;', // or '→'             previous: '&#8592;' // or '←'            },           search: '&#128270;',           info: "Resultados _START_ a _END_ de _TOTAL_ entradas",           infoEmpty: "Resultados 0 a 0 de 0 entries",           emptyTable: "No hay datos disponibles en la tabla",           infoFiltered: "(filtrado de _MAX_ entradas totales)",           zeroRec

Get the values of selected check boxes using jQuery In the below scenario we have used jQuery each loop and join function, with the help of these we can get selected values of check boxes. HTML -          <h3>Select your favorite sports:</h3>         <label><input type="checkbox" value="football" name="sport"> Football</label>         <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>         <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>         <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>         <label><input type="checkbox" value="racing" name="sport"> Racing</label>         <label><input type="checkbox" value="swimming" n

Change Formatting of SharePoint List's Date Type Column using javascript SharePoint list's date type column gives us date in the below format :- 2020-04-02T20:17:46.384Z You can modify this format according to your need, below is an explanation of this -  $.each(data.d.results, function(key, value) {                    var d = value.Created.substring(0, value.Created.lastIndexOf("T"));           var year = d.split("-")[0];           var month = d.split("-")[1];               var day = d.split("-")[2];             alert(day +"-"+ month +"-"+ year);                                   }         });  Output Date format would be :-  02-04-2020

Send Email using REST Api Sometimes we need to use Rest api for sending emails as we have its utility - " /_api/SP.Utilities.Utility.SendEmail" which is responsible for this feature. You can pass parameters in the below functions such as Subject, To, CC and body. For sending multiple users we need to defined  to,cc as array collection. Code -  function SendEMail(subject,to,cc,body){         $.ajax({             contentType: 'application/json',             url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.Utilities.Utility.SendEmail",             type: "POST",             data: JSON.stringify({                 'properties': {                     '__metadata': {                         'type': 'SP.Utilities.EmailProperties'                     },                     'From': "noreply@sharepointonline.com",         'To': { 'results': to},               'CC': { 'results':

How to set SharePoint List forms fields enable or disable using jQuery Go to a SharePoint List Form. Edit the form and add script editor web part to it. Insert the below code in the script editor web part. Code- <script src="../../SiteAssets/JS/jquery-3.1.1.min.js" type="text/javascript"></script> <script src="../../SiteAssets/JS/HideFields.js" type="text/javascript"></script> HideFields.js Code- $(document).ready(function(){ $("input[title='Title Required Field']").attr("disabled", "disabled");  $("select[title='request type Required Field']").attr("disabled", "disabled"); $("textarea[title='description']").attr("disabled", "disabled"); $("input[title='requested Go-Live Date Required Field']").attr("disabled", "disabled"); $("textarea[title

How to Limit SharePoint People Picker field to an specific group of people In many cases we need to choose people within a specific SharePoint group, in that scenario we go to the column settings as shown below and under choose from section we select a specific SharePoint group. The above screen shot is for a people picker type field and we can change its settings as shown above.

Difference between $(window).load() and $(document).ready() in jQuery What is a DOM? DOM : The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. $(window).load() - The code which gets included inside $( window ).on( "load", function() { ... }) runs only once the entire page is ready (not only DOM). $(window).load(function(){    // executes when complete page is fully loaded, including all frames, objects and images    alert("(window).load was called - window is loaded!"); }); $(document).ready() -  The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $( document ).ready() method will run once the page DOM is ready to execute JavaScript code. $(document).ready(function(){    // executes when HTML-Document is loaded and DOM is ready    alert("(document).ready

How to Check Whether user belongs to SharePoint Group using REST api Code -  $(document).ready(function(){     isOwnerGroupMember();  }); function isOwnerGroupMember() {     $.ajax({         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('Test Owners')/Users?$filter=Id eq " + _spPageContextInfo.userId,         method: "GET",         async: false,         headers: {             "Accept": "application/json; odata=verbose"         },         success: function(data) {             if (data.d.results.length == 0) {                 console.log("User not in group : Test Owners");                                       }             else {                 console.log("User in group : Test Owners");                                          }         },         error: function(err) {             console.log("Error while checking user in Owner's group");         

How to Push Unique Values to an Array data.d.results is the given array and it will push only unique column values to an array. var UnArr = []; $.each(data.d.results, function(key, value) { if ($.inArray(value.Title, UnArr) === -1) { UnArr .push(value.Title); } }); The output UnArr [] Array will have only unique values now.

How to Display Loading Image While Page Loads using jQuery and CSS HTML- Add the following HTML after the <body> opening tag. <div class="loader"></div> CSS -  Use the following CSS to display a loading image on loader div. .loader {     position: fixed;     left: 0px;     top: 0px;     width: 100%;     height: 100%;     z-index: 9999;     background: url(image URL) 50% 50% no-repeat rgb(249,249,249);     opacity: .8; } CODE -  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function() {     $(".loader").fadeOut("slow"); }); </script> Note:- You can do customization in the CSS and image type as per your requirement. Happy Coding :)

How to Hide list or Library using SharePoint Designer SharePoint Designer is a very useful tool when you need to do some customization, if you do not have development expertise to execute any PowerShell Script then you can easily do it using SharePoint Designer. 1.Open the site in SharePoint designer and click on Lists and Libraries from left panel. This will show all the list and libraries in current particular site. 2.Click on the list or library which you want to show or hide from the browser or view site content. In the settings section, click on the “Hide from Browser” under General. Save the changes and refresh site in browser, the list/library is now hidden from all users.