Auto-Populate List Form Fields Based On Lookup Selection In SharePoint

In this article, I will show

How to populate the new form fields like (Lookup field, People and Group Field) based on the selected lookup field value?


Scenario

I have two lists, One list has a lookup field called “Issue ID” that holds the ID from the second List as shown below

First List

Auto Populate List form fields based on Lookup Selection In SharePoint

Second List

Autofill List form fields based on Lookup Selection In SharePoint

When adding a new item, I would like to populate the Issue name based on the selected lookup issue ID as shown below.

Auto Populate List form fields based on Lookup Selection In SharePoint


Solution

  • Open your first list.
  • Click on list tab > Form Web Part > Default New Form.
  • The new form is now ready for edit, click on Add web part.
  • Click on Media and Content > Add Script editor web part.
  • Click on Edit Snippet > add the below code.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function () {
// the lookup field in the new form
var IssueIDField= $("select[title='Issue ID']");
IssueIDField.change(function () { Populate(); });
}); 

var ListItem;
function Populate() {
var IssID = $("select[title='Issue ID']").val();
var clientContext = new SP.ClientContext.get_current();
var IssueList = clientContext.get_web().get_lists().getByTitle('Issues');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq> <FieldRef Name=\'ID\' /> <Value Type=\'Text\'>' + IssID + '</Value></Eq></Where></Query><RowLimit>20</RowLimit></View>');
ListItem = IssueList.getItems(camlQuery);
clientContext.load(ListItem);
clientContext.executeQueryAsync(Function.createDelegate(this,this.Succed),Function.createDelegate(this,this.Failed));
} 

function Succed(sender, args) {
var listItemEnumerator = ListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var LItem = listItemEnumerator.get_current();
$("input[title='Issue Name']").val(LItem.get_item("Title"));
}
} 

function Failed(sender, args) {
alert('Error. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
The sections that should be changed based on your current form fields
  • Change the ‘Issue ID’ based on the lookup field name in your new form

var IssueIDField= $("select[title='Issue ID']"); 

  • Again, do the same, to get the value of the selected lookup value.

var IssID = $("select[title='Issue ID']").val(); 

  • In function “Succeed”, change the “Issue Name” to the field name that you would set it in the current new form, and change the “Title” with the field that you would get from the second list based on the Lookup selected value

$("input[title='Issue Name']").val(LItem.get_item("Title"));

Note: the field name that set in this line “LItem.get_item(“Title”)” is the Internal Field Name, it’s not the displayed name, so if you have field Called for example “M Qassas” it should be “M_x0020_Qassas

Repeat, the above line in case you have more than one field need to be populated.

Output

Auto populate List form fields based on Lookup Selection In SharePoint.gif


Get the List item by ID in JSOM instead of CAML Query

You can use the getItemById function instead of CAML Query in case you need to filter only with ID as the following


<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function () {
// the lookup field in the new form
 var IssueIDField= $("select[title='Issue ID']");
 IssueIDField.change(function () {
 Populate();
});
}); 

var ListItem;
function Populate() {
 var IssID = $("select[title='Issue ID']").val();
 var clientContext = new SP.ClientContext.get_current();
 var IssueList = clientContext.get_web().get_lists().getByTitle('Issues');
 ListItem = IssueList.getItemById(IssID);
 clientContext.load(ListItem);
 clientContext.executeQueryAsync(Function.createDelegate(this,this.Succed),Function.createDelegate(this,this.Failed));
} 

function Succed(sender, args) { 

 $("input[title='Issue Name']").val(ListItem.get_item("Title"));

} 

function Failed(sender, args) {
 alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
 }
</script>


To auto-populate Lookup Field and People and Group (Person) field 

Auto-populate Lookup Field,
  • To Get the selected Lookup value in the current form

ListItem.get_item("Internal Name of Lookup field").get_lookupValue();

  • To Set the selected lookup value to another Lookup field in the current form

$("select[title='Lookup field Name']").val(LItem.get_item("Internal Name of Lookup field").get_lookupValue());

Auto-populate People Field,
  • To Get the People Field value

ListItem.get_item("Intrnal Name of People field").get_lookupValue();

  • To Set this value to a People field in the current form

var context = SP.ClientContext.get_current();
var web = context.get_web();
var user = web.ensureUser(LItem.get_item("Intrnal Name of People field").get_lookupValue());
context.load(user);
context.executeQueryAsync(function(){
var form = $("table[class='ms-formtable']");
var userField = form.find("input[id$='ClientPeoplePicker_EditorInput']").get(0);
var peoplepicker = SPClientPeoplePicker.PickerObjectFromSubElement(userField);
var loginName = user.get_loginName();
peoplepicker.AddUserKeys(loginName);},function(sender,args){ // on error
alert(args.get_message());});

Full Code:

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function () {
// the lookup field in the new form
 var IssueIDField= $("select[title='Look']");
 IssueIDField.change(function () {
 Populate();
});
}); 

var ListItem;
function Populate() {
 var IssID = $("select[title='Look']").val();
 var clientContext = new SP.ClientContext.get_current();
 var IssueList = clientContext.get_web().get_lists().getByTitle('MQassas AutoPopulate List');
 ListItem = IssueList.getItemById(IssID);
 clientContext.load(ListItem);
 clientContext.executeQueryAsync(Function.createDelegate(this,this.Succed),Function.createDelegate(this,this.Failed));
} 

function Succed(sender, args) {
// Get - Set Text Field
$("input[title='Issue Name']").val(ListItem.get_item("Issue_x0020_Name"));
// Get - Set Lookup field
$("select[title='Issue ID']").val(ListItem.get_item("Issue_x0020_ID").get_lookupValue());
var context = SP.ClientContext.get_current();
var web = context.get_web();
var user = web.ensureUser(ListItem.get_item("People").get_lookupValue());
context.load(user);
context.executeQueryAsync(function(){
// Get - Set People Field
var form = $("table[class='ms-formtable']");
var userField = form.find("input[id$='ClientPeoplePicker_EditorInput']").get(0);
var peoplepicker = SPClientPeoplePicker.PickerObjectFromSubElement(userField);
// clear people Picker
while (peoplepicker.TotalUserCount > 0) {
 peoplepicker.DeleteProcessedUser();
}

// Set the People field
var loginName = user.get_loginName();
peoplepicker.AddUserKeys(loginName);},function(sender,args){ // on error
 alert(args.get_message());
 });
 }
function Failed(sender, args) {
 alert('Error. ' + args.get_message() + '\n' + args.get_stackTrace());
 }
</script>

Output

Auto Populate Lookup field and People Field using JSOM

Applies To
  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint Online.
Conclusion

In this article, I have explained How to fill new form fields from another list based on the selected value from a lookup field?

Advertisements

3 thoughts on “Auto-Populate List Form Fields Based On Lookup Selection In SharePoint

  1. Hi Thanks for this nice article.
    I tried in my case and noticed that it only works, when lookup column is non-mandatory.

    if I make the column mandatory, it doesn’t work.
    kindly help.

    Like

  2. Dear,
    How can I insert two scripts auto-population in the same form?
    is it possible?

    do I need to change the scrip name or only the above procedure?

    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s