Query/Update/Delete an item in JavaScript

[MichaelTCC]

I’m looking for a way to query, update, or delete a list item in JavaScript within the DFFS framework. I’ve searched the documentation but have not found a solution. Can someone please point me in the correct direction?

[Alexander Bautz]

Built in to DFFS you find function for crud (Create, Read, Update, and Delete) in the spjs.utility library like this.

Create a list item:

spjs.utility.addItem({
    "listName": "DFFS_TestList", // List display name or GUID
    "listBaseUrl": _spPageContextInfo.webServerRelativeUrl,
    "data": {"Title": "New item"}
});

Read items:

spjs.utility.queryItems({
    "listName": "DFFS_TestList", // List display name or GUID
    "listBaseUrl": _spPageContextInfo.webServerRelativeUrl,
    "query": "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>New item</Value></Eq></Where>",
    "viewFields": ["ID", "Title"]
});

Update list item with id 150:

spjs.utility.updateItem({
    "listName": "DFFS_TestList", // List display name or GUID
    "listBaseUrl": _spPageContextInfo.webServerRelativeUrl,
    "id": 150,
    "data": {"Title": "New item - updated"}
});

Delete item with i 150:

spjs.utility.deleteItem({
    "listName": "DFFS_TestList", // List display name or GUID
    "listBaseUrl": _spPageContextInfo.webServerRelativeUrl,
    "id": 150
});

PS: Please note that the built in methods use the old webservice methods to keep compatibility with SP 2007 and SP 2010. I recommend using the REST API to do these kind of operations if you are writing your own custom js.

Create list item with REST:

spjs.utility.getListByUrlName(_spPageContextInfo.webServerRelativeUrl, "DFFS_TestList").done(function (list) {
    var item = {
        "__metadata": { "type": list.type },
        "Title": "New item created with REST"
    };
    jQuery.ajax({
        "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbyid('"+list.id+"')/items",
        "method": "POST",
        "data": JSON.stringify(item),
        "headers": {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
        },
        "success": function (data) {
            complete(data);
        },
        "error": function (data) {
            console.log(data);
        }
    });
});

Read list items with REST:

spjs.utility.getListByUrlName(_spPageContextInfo.webServerRelativeUrl, "DFFS_TestList").done(function (list) {
    jQuery.ajax({
        "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbyid('"+list.id+"')/items?$filter=Title eq 'New item created with REST'",
        "method": "GET",
        "headers": {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose"
        },
        "success": function (data) {
            console.log(data);
        },
        "error": function (data) {
            console.log(data);
        }
    });
});

Update list item id 152 with REST:

spjs.utility.getListByUrlName(_spPageContextInfo.webServerRelativeUrl, "DFFS_TestList").done(function (list) {
    var item = {
        "__metadata": { "type": list.type },
        "Title": "New item created with REST - updated"
    };
    jQuery.ajax({
        "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbyid('"+list.id+"')/items(152)",
        "method": "PATCH",
        "data": JSON.stringify(item),
        "headers": {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "If-Match": "*",
            "X-HTTP-Method": "MERGE",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
        },
        "success": function (data) {
            console.log(data);
        },
        "error": function (data) {
            console.log(data);
        }
    });
});

Send item with id 152 to the recycle bin with REST:

spjs.utility.getListByUrlName(_spPageContextInfo.webServerRelativeUrl, "DFFS_TestList").done(function (list) {
    jQuery.ajax({
        "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbyid('"+list.id+"')/items(152)/recycle",
        "method": "PATCH",
        "headers": {
            "Accept": "application/json;odata=verbose",
            "X-HTTP-Method": "DELETE",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
        },
        "success": function (data) {
            console.log(data);
        },
        "error": function (data) {
            console.log(data);
        }
    });
});

Read more here: https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-with-lists-and-list-items-with-rest

Alexander

• This reply was modified 2 years, 11 months ago by Alexander Bautz. Reason: Replaced getbytitle with getbyid in the REST examples

[Bashya Rajan Aravazhi]

var query = “<Where><Eq><FieldRef Name=’Name’ ></FieldRef><Value Type=’User’> PreferredName</Value></Eq></Where>”;
var camlViewFields = [“Reports_x0020_To”, “Department”, “Position”, “Job_x0020_Title”, “Hire_x0020_Date”,
“Perm_x0020_Date”, “Status”, “ADP_x0020_File_x0020__x0023_”, “Location”, “Company”,
“ADP_x0020_File_x0020__x0023_”, “Sprout_x0020_Employee_x0020_ID”];

var res = spjs.utility.queryItems({
“listName”: “TestList”, // List display name or GUID
“listBaseUrl”:”http://team/XYZ/&#8221;,
“query”: query,
“viewFields”: camlViewFields,
“primaryKey”:”1″
});
if(res.count>0) {
console.log(res.items) ;
}
else {
console.log (“No Items”);
}
In the above snippet, I am trying to query the TestList which resides at SharePoint 2016 On-Prem.Then the count is always 0, nut when I try to query any list which is there on Same SharePoint Online, it works… Is this a limitation ?

Attachments:

1. 

   NoItems.jpg
   

[Bashya Rajan Aravazhi]

I could see this on the console.

Attachments:

1. 

   Console.png
   

[Alexander Bautz]

If your site is using https you must specify the baseurl using https if you specify the full url. In any case you should have it as a realative url like this:

"listBaseUrl": "/teams/XYZ",


It looks like the format of the code is a bit mangled so I’m not sure if there is anything else wrong.

Alexander

[MichaelTCC]

Thank you Alexander!!!

[Alexander Bautz]

Thanks the for donation!

PS: I edited the REST examples and changed from getbytitle to getbyid.

Alexander

[MichaelTCC]

Thanks Alezander! Is this information in one of the user guides? Can you please point me to it?

[Alexander Bautz]

No, this is not documented in any of the user manuals. What kind of information are you looking for?

Alexander

[Author]

Posts