Create an Item in a List in SharePoint 2013 Using CSOM-JavaScript

Veda Bs
10y
39.4k
0
0

100

Article

Introduction

This article explains how to create an item in a list in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

The following are the prerequisites:

Ensure you have access to the Office 365 online.
Ensure Napa tool is available in your site.

Procedure

The following is the procedure to be followed:

Create an App For SharePoint Using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then Click here.
Create a list and name it “MyCustomList”. Click here if you want to learn how to create a list.
Create a field in the list. Click here if you want to learn how to create a field in a list.
Click on the "Default.aspx" page.
Add Title and MyCustomField text boxes and a button to create an item and place it inside the “PlaceHolderMain” tag.

Title : <input type="text" name="txtTitle" id="txtTitle"></input><br/><br/><br/>

MyCustomField : <input type="text" name="txtCustom" id="txtCustom"></input><br/><br/><br/>

<button id="btnCreateItem" onclick="createItem()">Create a New item</button><br/>
Click on the "App.js" file.
Globally declare the content, web and list objects as shown below.

var context = SP.ClientContext.get_current(); //gets the current context
var web = context.get_web(); //gets the web object

var list = web.get_lists(); //gets the collection of lists
Now write the function to create an item in a list as in the following:

    function createItem() {

        // Retrieve the list and add an item to it.

        var targetList = list.getByTitle("MyCustomList");

        //create a new item object

        var listItemCreation = new SP.ListItemCreationInformation();

        //add the item to the list using addItem method

        var newItem = targetList.addItem(listItemCreation);

        var listItemTitle = document.getElementById("txtTitle").value;

        alert(listItemTitle);

        var listItemCustom = document.getElementById("txtCustom").value;

        alert(listItemCustom);

        //using set_item method u can set the values to the item fields

        newItem.set_item('Title', listItemTitle);

        newItem.set_item('MyCustomField', listItemCustom);

        newItem.update();

        context.load(newItem);

        context.executeQueryAsync(ItemCreationSuccess, ItemCreationFail);

    }
Here in this example we are creating an item in a list using the “ListItemCreationInformation” object.
After creating the listitem object we need to add the object to the list using the additems method.
Then set the values of the item field using the set_item method.
Then we need to load the new item object and execute the code by calling "executeQueryAsync".

function ItemCreationSuccess() {

        $('#message').text = "";

        $('#message').text("Item got created");

    }

    function ItemCreationFail(sender, args) {

        alert('Failed to create a new item. Error:' + args.get_message());

    }
That’s it! Now let's start testing.

Testing

Now to run the app click on the "Play" button available towards the left-most corner.
The app is packaged, deployed, and installed on your Office 365 Site.
Now you will be able to see the page where you can enter the details and store it in the list.
Enter the details and click on the “create a new item” button.
To see the item that was recently created, just go to the following URL:

Syntax: https://yoursite/Lists/ListName
Example: https://mysite/Lists/MyCustomList