.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Client side web part in SharePoint

Posted By:Jean Paul       Posted Date: June 30, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article we have gone through a pure client side web part in SharePoint

Client side web part

We are using SharePoint Client Side Object Model using Java Script in inserting list item.  This avoids the need for custom web part / sandboxed solution.

Step 1: Create List

Create a custom list named Suggestion.   We are using the existing column named Title.

Step 2: Create a Test Page

Create a test page in the Lists > Site Pages library.  Name it as JSPage.aspx


Open the page, choose Edit Page and insert a Content Editor web part into it.


Step 3:  Add Code to Web Part

In the edit mode of page, choose Edit Web Part option.

Click the content area & choose HTML toolbar button.


You will get the following dialog.


Add the following code:


<input type="text" id="txtSuggestion" />
<input type="button" id="btnAdd" onclick="AddSuggestion();" value="Submit" />

<script type="text/javascript">
        function AddSuggestion() {
            var txtSuggestion = document.getElementById("txtSuggestion");
            if (txtSuggestion.value == "") {
                alert("Please enter an input!");
            //Retrieve the clientContext
            var clientContext = SP.ClientContext.get_current();

            //Retrieve the current website
            var webSite = clientContext.get_web();
            //Retrieve the lists
            var lists = webSite.get_lists();
            var list = lists.getByTitle("Suggestion");

            //Create new IteamCreationInformation
            var itemCreationInfo = new SP.ListItemCreationInformation();
            //the addItem takes the itemCreationInformation object
            //and returns the listItem
            var listItem = list.addItem(itemCreationInfo);
            //Set the title of the list Item

            listItem.set_item("Title", txtSuggestion.value);
            //Call Update the listItem

            //Finally execute the operation
            //pass to it a 2 callBack methods OnSucceed and OnFailure
        function Succeeded() {
        function Failed(sender,args) {


The code contains the HTML User Interface & Java Script code to do the insertion from client side.


Click the  Ok button for web part.

Save changes to the page.


Step 4:  Test the Web Part

Now you are ready to test the web part. 


Refresh the page & enter a text for Suggestion as shown below.


Click the Submit button, You should see the succeeded message box.


Please verify the list for the item.


In this article we have gone through a pure client side web part.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend