Create A List Item In SharePoint 2013 Using JSOM With Content Editor Webpart (CEWP)

In this blog, I will explain how to write the code to perform the basic operations, using the JavaScript client object model in SharePoint 2013, using CEWP.

Every developer wants to use SharePoint Client Object Model (CSOM) to get the item, update the list and delete the files in SharePoint 2013.

Types of SharePoint Object models are-

• SSOM-Server Side Object Model (.NET)- C# Code, using VS2012.
• JavaScript Object Model-JSOM.
• Client Side Object Model -CSOM.
• REST/OData endpoints-This is the one of the powerful model in client side. This one is used in SharePoint hosted APP.

In this blog, I would like explain about the basic operations, using the JavaScript object model. In your script file, add a reference to the object model, used within HTML tags.

The sections, given below describes the tasks, which you can complete programmatically and they include JavaScript code examples, which shows the operations.

To update/create a list item, call the create/update() function on the object.

The example, the given below method uses JavaScript Context method to retrieve the file from SharePoint 2013 list.

Procedure

Open your SharePoint Site in SharePoint 2013 Designer and select an Assets icon in the designer ribbon. Add a JavaScript file.


Figure 1- JavaScript File

After adding a JavaScript file, this file will be available in SharePoint Site Assets folder.


Figure 2- Site Assets Folder

Go to SharePoint site page and add a new page to SharePoint site.


Figure 3- Sp Site Page


Figure 4 - New Page

After adding a page, select an Insert button in the Ribbon menu.


Figure 5 - Ribbon Menu

Add a Content Editor Web part into the page.


Figure 6 - Content Editor

Edit the WebPart and add a JavaScript file link to the content link.


Figure 7 - Edit the Web part

Save the Web part and save the page in the site. Click the button!



Source Code

< div>
    < button onclick=" CreateListitem ()"> Create the Item
        < /button>
            </div>
            < div id=" output ">
                < /div>
                    <script type="text/javascript">
                        var siteUrl = "http://gowtham.sharepointmasters.com"; < script type = "text/javascript" > function createListItem(siteUrl) {
                            var ctx = new SP.ClientContext(siteUrl);
                            var oList = ctx.get_web().get_lists().getByTitle('GowthamList');
                            var createiteminfo = new SP.ListItemCreationInformation();
                            this.ListItem = oList.addItem(createiteminfo);
                            ListItem.set_item('Title', 'GowthamSharepoint!');
                            ListItem.set_item('Body', 'Welcome to Sharepointexchange.com!');
                            ListItem.update();
                            clientContext.load(ListItem);
                            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
                        }

                        function onQuerySucceeded() {
                            alert('List Item created: ' + oListItem.get_id());
                        }

                        function onQueryFailed(sender, args) {
                            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                        }
                    </script>

Thanks for reading my blog.