Convert SharePoint Date to Readable date format using jquery

Hi friends, today we are going to see how can we convert SharePoint date into human radable date format using jquery.

When you use REST api or JSOM to retrieve the date from sharepoint date field you will get the output like /Date(1508371200000)/

We can easily convert above date format into human readable format using below script. Here

var rawDate = "/Date(1508371200000)/"; 
var rawDate = parseInt(rawDate.substring(6, 19)); 
var d = new Date(rawDate); 
var result = d.format("dd MMM yyyy");

In the above code variable result will give you the output as 19 Oct 2017

Convert SharePoint date to Readable date
Convert SharePoint date to Readable date

I hope you liked this article. Please feel free to ask your queries in comment section below. Like our facebook page ans subscribe to our newslette for future updates. Have a nice day!

How to Display SharePoint List in jQuery Datatables

Hello friends, in this article we are going to retrieve data from SharePoint List using REST API and will display that data into jQuery Datatable. So let’s begin…

Show SharePoint List in Datatable format

Step 1:

We have a SharePoint list named EmployeeDetails as shown below with some dummy data. This list has 4 columns (Title, Name, Salary, Address).

EmployeeDetails List
EmployeeDetails List

Step 2 : Create a site page where we are going to show above data in datatable. For creating a page go to Site contents > Site pages > Click on new page icon. In this case I have created a page with name Employee Details.

Step 3 : Insert a Content Editor Webpart into a page.

Employee Details Page
Employee Details Page

Step 4 : Edit the Content Editor Webpart and paste the below code into it.

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../SiteAssets/EmployeeJqueryDatatable.js"></script>
<div id="DatatablePanel">
    <table style="width: 100%;">
        <tr>
            <td>
                <div id="DatatableGrid" style="width: 100%"></div>
            </td>
        </tr>
    </table>
</div>

download above html file here. (or you can use MediaFire link)

Step 5 : If you can observe the above code, we have referenced a .js file named EmployeeJqueryDatatable.js So we have to first create this js file and upload it into Site assets. Please copy the below code into this js file and named it as EmployeeJqueryDatatable.js

$(document).ready(function() {
    var RestUrl = "../_vti_bin/listdata.svc/EmployeeDetails";
    $.ajax({
        url: RestUrl,
        method: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function(data) {
            if (data.d.results.length > 0) {
                //construct HTML Table from the JSON Data
                $('#DatatableGrid').append(GenerateTableFromJson(data.d.results));
                //Bind the HTML data with Jquery DataTable
                var oTable = $('#EmployeeTable').dataTable({
                    "iDisplayLength": 5,
                    "aLengthMenu": [
                        [5, 10, 30, 50],
                        [5, 10, 30, 50]
                    ],
                    "sPaginationType": "full_numbers"
                });
            } else {
                $('#DatatableGrid').append("<span>No Employee Details Found.</span>");
            }
        },
        error: function(data) {
            $('#DatatableGrid').append("<span>Error Retreiving Employee Details. Error : " + JSON.stringify(data) + "</span>");
        }
    });

    function GenerateTableFromJson(objArray) {
        var tableContent = '<table id="EmployeeTable" style="width:100%"><thead><tr><td>Title</td>' + '<td>Name</td>' + '<td>Salary</td>' + '<td>Address</td>' + '</tr></thead><tbody>';
        for (var i = 0; i < objArray.length; i++) {
            tableContent += '<tr>';
            tableContent += '<td>' + objArray[i].Title + '</td>';
            tableContent += '<td>' + objArray[i].Name + '</td>';
            tableContent += '<td>' + objArray[i].Salary + '</td>';
            tableContent += '<td>' + objArray[i].Address + '</td>';
            tableContent += '</tr>';
        }
        return tableContent;
    }
});

download above .js file here (for security reasons I have used .txt file here, so after downloading rename it to .js) or you can use MediaFire link to download the direct js file here

Step 6 : Once you upload the above js file into your site assets, go to our EmployeeDetails page that we ceated in step no. 2. Here we go!!! below is the output for our EmployeeDetails list

Video tutorial:

I have also created a step by step video tutorial for SharePoint Datatables. Please watch it for clear understanding:

https://www.youtube.com/watch?v=gXoeBrXSb3A

I would like to reply to your queries. Please let me know whether you liked this simple step by step article on SharePoint Datatable integration. I am waiting for your comments! Please like our facebook page and subscibe to our newsletter for future updates. Have a nice day!

The selected user(s) may not be valid on the site this workflow is published on

Hi friends, in this SharePoint 2013 tutorial we are going to solve an issue of email error. While developing SharePoint workflow in SharePoint designer 2013, we need to send an email notifications to the user. Sometimes user may not be valid SharePoint user. These users are called as external users. When you try to add Email ID of such users, we usually get following error.

“The selected user(s) may not be valid on the site this workflow is published on. If a recipient is not a valid SharePoint user, he or she will not receive workflow emails.”

not-a-valid-sharepoint-user-email-error

There are two methods to fix this problem. We can pass the email address through one string variable and other method is to call SharePoint 2010 workflow. We will see both these methods one by one.

Method 1: Using String Variable

Instead of adding email address directly in email setup, save it in one string variable. Here we have created one string variable named TestEmail.

create string variable

Now add this string variable in email setup as shown below. Make sure that you are using Return field as Login name.

send email via variable

sharepoint email

Now click on OK and thats it! Now SharePoint will not show any error message and it will also send email notification to the user.

Let us see another approach for solving this issue.

Method 2: By Calling SharePoint 2010 workflow

Create a separate SharePoint 2010 workflow on the same list so that you can utilise the fields for that list. SharePoint 2010 dont validate the user and you can use external users in it. Now create an action for sending email in 2010 workflow in the same way.

Once created, we can call this 2010 workflow through 2013 workflow using following action.

call sharepoint 2010 workflow

In this way we can send an email to external users using SharePoint 2013 workflow. I hope you liked this article, please share it with your friends. Like our facebook page and subscribe to our newsletter for future updates. Have a nice day!

How to Add Help Button Next to SharePoint Field Name

Hi friends, in this post we will see: How to add Help button next to SharePoint List column name. We usually see help buttons while filling online forms. Such help buttons notifies users what values they need to enter in the field. So let us see how to add help button in SharePoint list using SharePoint Designer 2013.

Add Help Button
Add Help Button

 

Step 1: Open your list in SharePoint Designer and find the <tr> tag for your field. You can see two <td> tags under <tr> tag. We have to add one more <td> tag for help button. Just copy the below code (red colored) after ending second </td> tag. In this case, I have list named TestList and I am going to add Help button in front of First Name column. So our overall code for First Name field will look like:

<tr> 
  <td width="190px" valign="top" class="ms-formlabel"> 
    <H3 class="ms-standardheader"> 
     <nobr>First Name</nobr> 
    </H3> 
  </td> 
  <td width="400px" valign="top" class="ms-formbody"> 
    <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="First_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@First_x0020_Name')}"/> 
    <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="First_x0020_Name" ControlMode="New"/> 
  </td> 
  <td> 
    <div class="help-tip"> 
      <p>Please enter your name in CAPITAL letters</p> 
    </div> 
  </td> 
</tr> 

Step 2: Now we have to include css for this help button. So there are two ways to use css here. Either create separate css file and upload it in style library, then link that file here or directly copy following css (red colored) after following code (green colored).

 <script>  
      var elm = document.getElementById(&quot;idAttachmentsTable&quot;);  
      if (elm == null || elm.rows.length == 0)  
      document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;  
 </script>  
 <style type="text/css">  
 .help-tip{  
      text-align: center;  
      background-color: #BCDBEA;  
      border-radius: 50%;  
      width: 24px;  
      height: 24px;  
      font-size: 14px;  
      line-height: 26px;  
      cursor: default;  
 }  
 .help-tip:before{  
      content:&apos;?&apos;;  
      font-weight: bold;  
      color:#ffff;  
 }  
 .help-tip:hover p{  
      display:block;  
      transform-origin: 100% 0%;  
      -webkit-animation: fadeIn 0.3s ease-in-out;  
      animation: fadeIn 0.3s ease-in-out;  
 }  
 .help-tip p{     /* The tooltip */  
      display: none;  
      text-align: left;  
      background-color: orange;  
      padding: 20px;  
      width: 300px;  
      border-radius: 3px;  
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);  
      right: -4px;  
      color: #FFF;  
      font-size: 13px;  
      line-height: 1.4;  
 }  
 .help-tip p:before{ /* The pointer of the tooltip */  
      position: absolute;  
      content: &apos;&apos;;  
      width:0;  
      height: 0;  
      border:6px solid transparent;  
      border-bottom-color:#1E2021;  
      right:10px;  
      top:-12px;  
 }  
 .help-tip p:after{ /* Prevents the tooltip from being hidden */  
      width:100%;  
      height:40px;  
      content:&apos;&apos;;  
      position: absolute;  
      top:-40px;  
      left:0;  
 }  
 /* CSS animation */  
 @-webkit-keyframes fadeIn {  
      100% {   
           opacity:1;   
           transform: scale(1);  
      }  
      0% {  
           opacity:0;  
           transform: scale(0);  
      }  
 }  
 @keyframes fadeIn {  
      0% { opacity:1; }  
      100% { opacity:0; }  
 }  
 </style>  

If you like this article, please share it with your friends and like or facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

How to Edit SharePoint 2013 Custom List in SharePoint Designer

Do you want to customize your SharePoint 2013 list? Do you have big number of columns in your list? Do you want to create customize online form for it? If Yes, then this post is specially made for you! In this post we will edit custom list in SharePoint Designer 2013.

Let me explain you in brief about what exactly we are going to do in next half an hour. Suppose you have a list with 50 columns. Now when you create a new item in your list, it becomes a big form with scrollbar, which is not user friendly. So what if we make sections of those columns and make an online form like structure which has different sections to be filled by user? Sounds great, right?

Customize SharePoint List

 

For making step by step tutorial for this customization of list, I have created one list named TestList. In this list I have columns named Title, First Name, Last Name, Employee Number and Contact Number. Now when you try to create a new item in this list, you will see a form like this:

Customize SharePoint List

Now here we have only 5 columns so its looks good, but what if you have 50 columns? Does it looks great? Say you have 10 fields for Personal information, 10 fields for address and so on. So we can make section of these fields and can make online form with it. Just click on section to expand or collapse the fields. We can make it possible through SharePoint Designer. So let us start customizing SharePoint list step by step.

Step 1: Open you list in SharePoint Designer (SPD 2013). By default there are three forms: NewForm.aspx, EditForm.aspx, DispForm.aspx. So click on New button under Forms section to create New Custom Form.Now we want to create custom form for New Item, so enter name for your new form (NewCustomForm) and click on New Item Radio button. Keep other fields as it is and click OK. Similarly you can follow this step for Display form and Edit form.

New Form button

Create New Custom Form in SharePoint Designer

Step 2: You can now see NewCustomForm in Forms section. Click on it to customize our list. Now the coding part starts here!

NewCustomForm

We want to make two sections as Section A and Section B. We will put Title, First Name and Last name in Section A. Also Employee Number and Contact Number in Section B.

So find <tr> tag for Title field and paste the following code just above it.

 <div id="divSectionA" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px">Section A</div>  
 <tbody id="bodySectionA" style="display:none; border:medium; border-color:orange" >  

 

Similarly find </tr> tag of last field of this section that is Last Name and end the <div>, <tbody> and one more tag of <table>. So our code will look like this:

    <table border="0" cellspacing="0" width="100%">
        <div id="SectionA" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px"> Section A</div>  
        <tbody id="ASection" style="display:none; border:medium; border-color:orange" >  
               <tr>  
               ..........
               </tr>  
               <tr>  
               ..........
               </tr>  
               <tr>  
               ..........
               </tr>  
        </tbody>  
    </table>  

 

Now to add Section B for Employee Number and Contact Number fields copy same code after </table> tag of first section. Make sure that we have to add one more <table> tag for section B. So our code for Section B will look like this:

     <table>  
        <div id="divSectionB" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px"> Section B</div>  
        <tbody id="bodySectionB" style="display:none">  
               <tr>  
                               
               </tr>  
               <tr>                                
                           
               </tr>  
        </tbody>  

 

Now here we don’t need to close <table> tag manually because there is </table> tag already available which was for first <table> tag.

Step 3: Now we have to include the jQuery in the page. So find the below code in your page

 <script>  
      var elm = document.getElementById(&quot;idAttachmentsTable&quot;);  
      if (elm == null || elm.rows.length == 0)  
      document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;  
 </script>  

 

and paste below code just after above code:

 <script src="//code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>  
 <script language="javascript" type="text/javascript">  
      $(document).ready(function() {  
        $(&quot;#divSectionA&quot;).click(function(){  
           $(&quot;#bodySectionA&quot;).toggle();  
        });  
        $(&quot;#divSectionB&quot;).click(function(){  
           $(&quot;#bodySectionB&quot;).toggle();  
        });  
      });  
 </script>  

 

That’s it! You are done! Now your form will look like this.

Finally make sure that you have selected NewCustomForm as default. To make this form as default, Select the form in Forms section of SharePoint Designer. See below screenshot.

If you like this article, please share it with your friends and like or facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!