How to add records to a SharePoint list using Rest API / JSON and HTML

Question

I have been doing a lot of research and reading and I am still having trouble understanding how to accomplish my goal.

For reference I have been here reading:

I have a simple HTML file on my web-server named testfile.html that has this snippet

<!doctype html>
<html lang="en">
<head>
  <title>The test SharePoint htlm page </title>
  </head>
<body>
    <input type="text" id="txttitle" >
  <input type="submit" value="Submit">
</body>
</html>

I have a list on my SharePoint (2016) on-premise server called testdatalist and it has a URL looks like this:

https://sp.mycompany.com/Lists/testdatalist/AllItems.aspx

It has one column named Title.

I have seen samples using REST / JSON code showing how to add records, but I am not sure how to tie this all together because each example is ever so slightly different.

Simply put:

Do I need to have my HTML file on the SharePoint server or Can I have it on it's own web-server?
How can I enter something in the input box txttitle on the html page and when I press the Submit button have it save to the list?

OR

Does all this need to be done within SharePoint.... for example do I need to create a Blank SharePoint WikiPage the add my textbox and button and then add in script / content editors to do all the REST / JSON coding?

Amos · Accepted Answer · 2020-11-25 08:10:12Z

Test code for your reference:

<input type="text" id="txttitle" >
  <input type="submit" value="Submit">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$("input[value='Submit']").click(function(){
  CreateListItemWithDetails("testdatalist")
})

function CreateListItemWithDetails(listName) {
    var itemType = GetItemTypeForListName(listName);
    var item = {
        "__metadata": { "type": itemType },
        "Title": $("#txttitle").val(),      
    };

    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
}

// Get List Item Type metadata
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>

If you want to get the value from input, you'd better create an editor web part or content wen part in the page.

That was a good starting point but it actually helped me get to my own answer. — DebPepDevuan
– DebPepDevuan, Commented Dec 7, 2020 at 1:25

DebPepDevuan · Accepted Answer · 2020-12-07 02:00:57Z

The best approach I found was the following:

Create a WikiPage Library name it MyWikiPages
Create a file named testfile.txt save that in a WikiPage library
Create a new WikiPage and name it testwikipage

To get this to work there are two things you need.

You need a js link to the jQuery library
You can also write your REST/JSON/AJAX code in its own .js file and link to them/or it as needed.

Put this together:

On the testwikipage add content editor and link that to the testfile.txt the same the wiki page.
In the text file you can add something that looks like this sample code
In the RestScript.js you can write something like this:

Stack Exchange Network

How to add records to a SharePoint list using Rest API / JSON and HTML

2 Answers 2

Your Answer

Hot Network Questions

How to add records to a SharePoint list using Rest API / JSON and HTML

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions