My SharePoint Moments

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();                                         } });