Cascading drop-downs using Lookup fields in SharePoint using SPServices

Hi friends, in this tutorial we are going to implement cascading of lookup fields in SharePoint using SPServices:

Lets take a simple example of Country > State cascading.

We have one Country List in which we are storing our Country values in Title field.

Country List
Country List

We have another list named States, in which we are storing state values in Title field. This list also has a lookup field named Country in which we are storing corresponding countries from Country List.

States List
States List with Country as Lookup field

Now we have third list named Information in which there are two lookup fields: Country and State

Information List with Country and State as lookup fields
Information List with Country and State as lookup fields

Just add below script in Content editor webpart on NewItem and EditItem page.

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "States",
        relationshipListParentColumn: "Country",
        relationshipListChildColumn: "Title",
        parentColumn: "Country",
        childColumn: "State",
        debug: true
    })
})
</script>

If you want three level of cascading like Country > State > City, you can modify the code as below:

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "States",
        relationshipListParentColumn: "Country",
        relationshipListChildColumn: "Title",
        parentColumn: "Country",
        childColumn: "State",
        debug: true
    })
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "City", // This will be a name of City List
        relationshipListParentColumn: "States", // This will be a name of State list
        relationshipListChildColumn: "Title",
        parentColumn: "State",
        childColumn: "City",
        debug: true
    })
})
</script>

Watch below YouTube video created by me, which will explain the process in details:

If you liked this article, please share your comments below. Let me know if you face any issues. Like our facebook page for future updates. Have a nice day!

SPServices Get Current User Name & Set to SharePoint Field Name

Hi friends, In this tutorial, we are going to learn how to fetch the current username and set its value to any SharePoint field. To get the current SharePoint user information we can use SPServices.

There is one utility function of SPServices called SPGetCurrentUser which has the functionality to return information about the current user.

How  $().SPServices.SPGetCurrentUser works?

The SPGetCurrentUser function does an AJAX call to grab /_layouts/userdisp.aspx?Force=True and “scrapes” the values from the page based on the internal field name (aka StaticName).

How to get Current User Name and Set it to SharePoint field?

  1. Open your list new item page.
  2. Click on Settings button (Gear icon) and click on Edit page.
  3. Add Content Editor Web Part.
  4. Copy the following code and paste it in above Web Part.
  5. Click on Stop Editing and it’s done!

In this example, we are getting Name of Current User and setting its value to the Full Name field.

<div> 
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 
 <script src="https://www.myclassbook.org/wp-content/uploads/2016/07/jquery.SPServices-2014.02.min_.js"></script> 
 <div> 
 <script language="javascript" type="text/javascript"> 
 $(document).ready(function() { 
 // Set the "Full Name" input field to the current user's "Title" property 
 var userName = $().SPServices.SPGetCurrentUser({ 
 fieldName: "Title" 
 }); 
 $("input[Title='Full Name']").val(userName); 
 }); 
 </script> 
 </div> 
</div>

Now whenever you open the page for adding a new item in the SharePoint list, you can see the name of the current user is auto-populated in the Full Name field. See the screenshot below.

Get Current user name in SharePOint
Get Current username in SharePoint

If you like this article, please share it with your friends and like our 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!