How to add records to a SharePoint list using Rest API / JSON and HTML
-
18-02-2021 - |
Frage
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:
Get to know the SharePoint REST service
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?
Lösung 2
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:
Andere Tipps
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.