Retrieving column fields from SharePoing list using sp-pnp-js

Question

I have a list. I want to retrieve the fields to see how many column are there in my list.

For example, my list name is TestList, I have created 5 columns of different datatypes. I want to retrieve those 5 fields plus 5 default columns like Id, Modified, Modified By, Created and Created By.

This code gives me lots of fields where I am tired to find my created field (column). Is there any simple query that will return my created 5 fields plus default column fields (mentioned above)?

let myweb = new 
pnp.Web(encodeURI(siteUrl));
myweb.lists.getByTitle(listTitle).fields.get().then((results: any) => {                
    if(results.length > 0) {
       console.log(results);
    }
});

this gives me a lot of fields

Help is appreciated.

Answer 1

Thanks for your pointer. I think I found my solution on exactly what I want. Here is the code for my requirement. I shared it so that everybody can be benefited.

        let myweb = new pnp.Web(encodeURI(siteUrl));
        const list = myweb.lists.getByTitle(listTitle);
        const includeFields = ['ID', 'Title', 'Modified', 'Modified By', 'Created', 'Created By'];
        const filter = `CanBeDeleted eq true or (${includeFields.map(field => `Title eq '${field}'`).join(' or ')})`;
        list.fields.select('Id', 'Title', 'InternalName', 'EntityPropertyName', 'CanBeDeleted', 'Hidden', 'ReadOnlyField').
            filter(filter).get().then(fields => {
                if (fields.length > 0) {
                    console.log(fields);
                }
                deferred.resolve(fields);

            }).catch(e => {
                deferred.reject(e);
            });

Here is the output I formatted based on the query:

ID: fa564e0f-0c70-4ab9-b863-0177e6ddd247
Title: Title
Internal Name: Title

ID:88c36055-a6ee-4e1f-8ca2-f57e4f0a9511
Title: FirstName // This is my custom column
Internal Name: FirstName

ID:1d22ea11-1e32-424e-89ab-9fedbadb6ce1
Title: ID
Internal Name: ID

ID:28cf69c5-fa48-462a-b5cd-27b6f9d2bd5f
Title: Modified
Internal Name: Modified

ID:8c06beca-0777-48f7-91c7-6da68bc07b69
Title: Created
Internal Name: Created

ID:1df5e554-ec7e-46a6-901d-d85a3881cb18
Title: Created By
Internal Name: Author

ID:d31655d1-1d5b-4511-95a1-7a09e9b75bf2
Title: Modified By
Internal Name: Editor

ID:173f76c8-aebd-446a-9bc9-769a2bd2c18f
Title: Modified
Internal Name: Last_x0020_Modified

ID:998b5cff-4a35-47a7-92f3-3914aa6aa4a2
Title: Created
Internal Name: Created_x0020_Date

One of the good pointers I found is https://pnp.github.io/pnpjs/sp/docs/fields/

Answer 2

To get all fields except hidden and readonly fields, try below code:

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script> 
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script> 
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>


<div id="sample"></div>


<script type="text/javascript">
//fields property returns all fields from the retrieved list
//then( ) runs on success
//catch( ) runs on failure
$pnp.sp.web.lists.getByTitle("TelePhones Growth").fields.filter("ReadOnlyField eq false and Hidden eq false").get().then(function(result) {
    var fieldInfo = "";
    for (var i = 0; i < result.length; i++) {
        fieldInfo += "Title: " + result[i].Title + "<br/>";
        fieldInfo += "Name:" + result[i].InternalName + "<br/>";
        fieldInfo += "ID:" + result[i].Id + "<br/><br/>";
    }
    document.getElementById("sample").innerHTML = fieldInfo;
}).catch(function(err) {
    alert(err);
});
</script>

Reference:

1. Retrieve visible fields from SharePoint List using PnP JavaScript Library.

You can also get fields by its ID, Title, or internal name, like below:

let web = pnp.sp.web;

// you can also get individual fields using getById, getByTitle, or getByInternalNameOrTitle
web.fields.getById("dee9c205-2537-44d6-94e2-7c957e6ebe6e").get().then(f => {
    console.log(f);
});
web.fields.getByTitle("MyField4").get().then(f => {
    console.log(f);
});
web.fields.getByInternalNameOrTitle("MyField4").get().then(f => {
    console.log(f);
});

Reference:

1. Working With: Fields.

Answer 3

Use below query, you should be able to get just the custom fields you have created.

let myweb = new pnp.Web(encodeURI(siteUrl)); 
myweb.lists.getByTitle(listTitle).fields.filter("Hidden eq false and ReadOnlyField eq false").get().then((results: any) => 
{
   if(results.length > 0) { 
      console.log(results);
   }

This query will use the filter attribute to exclude the hidden and readonly fields and retains only the required ones.

Hope this is helpful.