Setup Javascript Object Model (JSOM) and its references enviroment

I recently started learning JSOM and was bit frustrated setting up the environment. Hence, I thought to write the detail in setting up environment so other folks can save their time.

• Manually adding *.js files in Visual Studio
• Setting up *.js file to enable Intellisense in Visual Studio.
• 
  

Manually adding *.js files in Visual Studio:

After adding Visual WebPart, We need to mapped Layouts folder in Visual Studio. Please note that Layouts folder will directly mapped to Layouts folder under 15 hives. You can find all *.js files under 15 hive's Layouts folder.

C:\program files\common files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS

Steps

Right click on Project name -> Add -> SharePoint Layouts mapped folder. This will add Layout folder under project hierarchy in Visual Studio and Project folder in file system.

In this case, we will add Scripts folder under Layouts folder. Add below *.js files under Scripts folder. 

• SP.js
• SP.Runtime.js
• init.js
• MicrosoftAjax.js
• jquery-1.11.2.js (optional, in case you are using any jquery functionality)

Setting up *.js file to enable Intellisense by referring them in ASCX or ASPX file.

<script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>

<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="../Scripts/INIT.js" type="text/javascript"></script>

<script src="../Scripts/SP.Runtime.js" type="text/javascript"></script>

<script src="../Scripts/SP.js" type="text/javascript"></script>

Complete code is as under.

<script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>

<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="../Scripts/INIT.js" type="text/javascript"></script>

<script src="../Scripts/SP.Runtime.js" type="text/javascript"></script>

<script src="../Scripts/SP.js" type="text/javascript"></script>

<SharePoint:FormDigest ID="FormDigest1" runat="server"/>

<asp:Button ID="Button1" runat="server" Text="Create Item" OnClientClick="Create();" />

<asp:Button ID="Button2" runat="server" Text="Edit Item" OnClientClick="Update();" />

<asp:Button ID="Button3" runat="server" Text="Delete Item" OnClientClick="Delete();" />

<asp:TextBox ID="txt" runat="server"></asp:TextBox>

<script type="text/javascript">

    var web;

    var user;

    var listItem;

    var list;

    

    function Create() {

        debugger;

        var url = _spPageContextInfo.webAbsoluteUrl;

        SP.SOD.executeFunc('SP.js', 'SP.ClientContext', createListItem);

        

        function createListItem() {

            debugger;

            try {

                var clientContext = new SP.ClientContext(url);

                web = clientContext.get_web();

                list = web.get_lists().getByTitle('CustomList');

                var itemCreation = new SP.ListItemCreationInformation();

                listItem = list.addItem(itemCreation);

                listItem.set_item('Title', 'New Item...');//field internal name

               

                listItem.update();

                clientContext.load(listItem);

                clientContext.executeQueryAsync(function () {

                    alert("success-" + listItem.get_id());

                }, function (sender,args) {

                    alert("fail " + args.get_message());

                });

            }

            catch (err) {

                alert("Error " + err);

            }

        }

    }

    function Update() {

        $(document).ready(function(){

            var url = _spPageContextInfo.webAbsoluteUrl;

            SP.SOD.executeFunc('SP.js', 'SP.ClientContext', updateListItem);

            function updateListItem() {

                try {

                    var ctx = new SP.ClientContext(url);

                    list = ctx.get_web().get_lists().getByTitle('CustomList');

                    debugger;

                    var txt = $('#ctl00_ctl40_g_49535078_3b19_431f_aaf9_fec512858a8a_txt').val();//internal name of txt field taken from developer tools.

                    listItem = list.getItemById(txt);

                    listItem.set_item('Title', 'Title updated');

                    listItem.update();

                    ctx.load(list);

                    ctx.load(listItem);

                    ctx.executeQueryAsync(function () { alert("Item updated"); }, function () { alert("Item fail to update"); });

                }

                catch (err) {

                    alert("Error " + err.message);

                }

            }

        });

            

           

    }

    function Delete() {

        var url = _spPageContextInfo.webAbsoluteUrl;

        SP.SOD.executeFunc('SP.js', 'SP.ClientContext', Del);

        function Del() {

            try{

                var ctx = new SP.ClientContext(url);

                list = ctx.get_web().get_lists().getByTitle('CustomList');

                var txt = $("#ctl00_ctl40_g_49535078_3b19_431f_aaf9_fec512858a8a_txt").val();

                listItem = list.getItemById(txt);

                listItem.deleteObject();

                ctx.load(list);

                ctx.load(listItem);

                ctx.executeQueryAsync(function () { alert("deleted"); }, function () { alert("Problem deleting this item"); });

            }

            catch (err) {

                alert("Error - " + err.message);

            }

        }

     

    }

       

</script>