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

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/287202

質問

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:

  1. Do I need to have my HTML file on the SharePoint server or Can I have it on it's own web-server?
  2. 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?

役に立ちましたか？

解決 2

The best approach I found was the following:

  1. Create a WikiPage Library name it MyWikiPages
  2. Create a file named testfile.txt save that in a WikiPage library
  3. 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:

  1. On the testwikipage add content editor and link that to the testfile.txt the same the wiki page.

  2. In the text file you can add something that looks like this sample code enter image description here

  3. In the RestScript.js you can write something like this: enter image description here

他のヒント

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.

ライセンス： CC-BY-SA と 帰属
所属していません sharepoint.stackexchange
scroll top