In this article, we will cover how to use the PnP JS Core library to create a new lookup fiels in SharePoint list. To know more about this JavaScript library, check the below links

In this post,

How to create new lookup field in SharePoint List using PnP JavaScript Library.

SYNTAX:

pnp.sp.web.lists.getByTitle(<ListName>).fields.createFieldAsXml(
xml: string | XmlSchemaFieldCreationInformation): Promise<FieldAddResult>

Adds a new field in the SharePoint List based on the specified field xml
ListName - Title of the SharePoint List, where we want to add the view
@param1 > xml - Field Schema XML

EXAMPLE:

The below steps and code snippets used to create a new lookup field in SharePoint list using PnP JavaScript library,

  1. Download Required files to use PnP-JS-Core library from the below links and upload that to Site Asstes or Style Library
    • Download pnp.js PnP JS file
    • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
    • Download promise.js Used by PnP js file to handle web requests and responses (Required in IE)
  2. Create new web part page and insert Content Editor web part
  3. Create a sample.html file in Site Assets or Style library and insert the below code snippet
  4. Lookup Example Data: We are going to create a EmployeeName column in a Company List based on the below reference Lookup list and Lookup column,
    Employees List ID: {261cc681-96c6-4b02-be81-1b12319cd1f8} , Lookup List: Employees
    Lookup Column: FullName

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script> 
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
 
<span id="sample"></span>

<script type="text/javascript"> 

var fieldXML = "<Field Name='EmployeeName' DisplayName='EmployeeName' Type='Lookup' Required='FALSE' ShowField='FullName' List='{261cc681-96c6-4b02-be81-1b12319cd1f8}'></Field>"

$pnp.sp.web.lists.getByTitle("Company").fields..createFieldAsXml(fldxml).then(function(res) {
 document.getElementById("sample").innerHTML = res.data.Title + " - lookup column created successfully";
});

</script>

TYPESCRIPT EXAMPLE:

Typescript is the superset of JavaScript and this PnP JS library is developed using the typescript specification. For developing the SharePoint Framework web parts and make the client side development easier, we can vote for typescript. The below is the typescript example for adding a new lookup column in SharePoint List.


import pnp from "sp-pnp-js";
let xml = `<Field Name="EmployeeName" DisplayName="EmployeeName" Type="Lookup" Required="FALSE" ShowField="FullName" List="{261cc681-96c6-4b02-be81-1b12319cd1f8}" />`;

pnp.sp.web.lists.getByTitle("Company").fields.createFieldAsXml(xml).then(res) =&gt;{
 console.log(`${res.data.Title} lookup column created successfully`);
 }).catch(err=&gt;{
 console.log(`Error: ${err}`)
 });
 

OUTPUT:

Our code returns the success message, if the lookup column created successfully.


Leave a Reply

Your email address will not be published. Required fields are marked *