Article 1: Basic sharepoint 2010 EcmaScript Client Object Model (Load, Search, AddNew, Edit, Delete)

Demo User Interface

Step 1: Create List and name is ECMAScriptDemo Include Fields name is Title, User

Step 2: Open SPD and code below webpart of NewForm.aspx (Demo)

           Click Webpart NewItem | Scroll below and code after tag close </table> as follow

Step 3: Copy code below

<fieldset id="fldDemo1" style="width:300px">
        <legend>Demo 1 - fetching web title</legend>
        <div id="Div1" class="demoRow">
            <div class="demoControls">
                <button id="btnDemo1" type="button">
                    Fetch web title</button>
            </div>
        </div>
    </fieldset>
    <br/>
    <fieldset id="fldDemo2" style="width:300px">
        <legend>Demo 2 - fetching list items</legend>
        <div id="demo2Row" class="demoRow">
            <div class="demoControls">
                <button id="btnDemo2" type="button">
                    Fetch items</button>
            </div>
            <div class="demoResults">
                <span id="demo2Result" ></span>
            </div>
            <div class="clearer" />
        </div>

    </fieldset>

 <br/>
 <fieldset id="fldDemo3" style="width:300px">
        <legend>Demo 3 - fetching list items with query</legend>
        <div id="demo3Row" class="demoRow">
            <div class="demoControls">
                <label for="txtFilenameContains">
                    Filename contains:</label>
                <input type="text" id="txtFilenameContains" />
            </div>
            <div class="demoResults">
                <span id="demo3Result"> </span>
            </div>
            <div class="clearer" />
        </div>
     
    </fieldset>
   
    <br/>
    <fieldset id="fldDemo4" style="width:300px">
        <legend>Demo 4 - add list items</legend>
        <div id="demo4Row" class="demoRow">
            <div>
                <span class="demoLabel">ECMAScriptDemo title:</span><input id="txtTaskTitle" type="text" /></div>
            <div>
                <button id="btnAddTask" type="button">
                    Add ECMAScriptDemo</button></div>
            <div>
                <span class="demoLabel">Result:</span><span id="addResult" ></span></div>
        </div>
   
    </fieldset>
   
    <br/>
    <fieldset id="fldDemo5" style="width:300px">
        <legend>Demo 5 - edit list items</legend>
        <div id="demo5Row" class="demoRow">
            <div>
                <span class="demoLabel">ECMAScriptDemo title:</span><input id="txtECMAScriptDemoTitle" type="text" />
                <br/>
                <span class="demoLabel">ECMAScriptDemo id:</span><input id="txtECMAScriptDemoID" type="text" />
                </div>
            <div>
                <button id="btnEditECMAScriptDemo" type="button">
                    Edit ECMAScriptDemo</button></div>
            <div>
                <span class="demoLabel">Result:</span><span id="editResult" ></span></div>
        </div>
   
    </fieldset>
    <br/>
    <fieldset id="fldDemo6" style="width:300px">
        <legend>Demo 6 - delete list items</legend>
        <div id="demo6Row" class="demoRow">
            <div>
                <span class="demoLabel">ECMAScriptDemo id:</span><input id="txtECMAScriptDemoIDDelete" type="text" />
                </div>
            <div>
                <button id="btnDeleteECMAScriptDemo" type="button">
                    Delete ECMAScriptDemo</button></div>
            <div>
                <span class="demoLabel">Result:</span><span id="deleteResult" ></span></div>
        </div>
   
    </fieldset>

<script type="text/javascript" src="../../JqueryLibrary/jquery-1.4.2.js"></script>

//Get Title web 

<script type="text/javascript">
     var currentWeb;
     $('#btnDemo1').click(function () {
         //Get current Site
         var ctx = new SP.ClientContext.get_current();
         //Get current Web
         currentWeb = ctx.get_web();
         //Load Web
         ctx.load(currentWeb);
         //Call delegate
         ctx.executeQueryAsync(getWebSuccess, getWebFailure);
     });
     function getWebSuccess(sender, args) {
         alert('Title of current web is: ' + currentWeb.get_title());
     }
     function getWebFailure(sender, args) {
         alert('Failed to get web. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
     }   
 </script>
 //Get All
 <script type="text/javascript">
     var allDocs; $('#btnDemo2').click(function () {
         var ctx = new SP.ClientContext.get_current();
         var targetList = ctx.get_web().get_lists().getByTitle('Shared Documents');
         var query = SP.CamlQuery.createAllItemsQuery();
         allDocs = targetList.getItems(query); ctx.load(allDocs);
         ctx.executeQueryAsync(Function.createDelegate(this, getDocsAllItemsSuccess), Function.createDelegate(this, getDocsAllItemsFailure));
     });
     function getDocsAllItemsSuccess(sender, args) {
         var listEnumerator = allDocs.getEnumerator();
         while (listEnumerator.moveNext()) {
             $('#demo2Result').append(listEnumerator.get_current().get_item("FileLeafRef") + '<br />');
         }
     }
     function getDocsAllItemsFailure(sender, args) {
         alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
     }
 </script>

 // Search Item
  <script type="text/javascript">
      var selectedDocs;
      $('#txtFilenameContains').keyup(function (event) {
          filterDocs();
      });
      function filterDocs() {
          var ctx = new SP.ClientContext.get_current();
          var docLib = ctx.get_web().get_lists().getByTitle('Shared Documents');
          var query = new SP.CamlQuery();
          query.set_viewXml("<View><Query><Where><Contains><FieldRef Name='FileLeafRef'/><Value Type='Text'>" + $('#txtFilenameContains').val() + "</Value></Contains></Where></Query></View>");
          selectedDocs = docLib.getItems(query);
          ctx.load(selectedDocs);
          ctx.executeQueryAsync(getDocsWithQuerySuccess, getDocsWithQueryFailure);
      }
      function getDocsWithQuerySuccess(sender, args) {
          $('#demo3Result').empty();
          var listEnumerator = selectedDocs.getEnumerator();
          while (listEnumerator.moveNext()) {
              $('#demo3Result').append(listEnumerator.get_current().get_item("FileLeafRef") + '<br />');
          }
      }
      function getDocsWithQueryFailure(sender, args) {
          alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
      }
    </script>
         
          //Add New Item
          <script type="text/javascript">
              var newTask;
              $('#btnAddTask').click(function () {
                  var taskTitle = $('#txtTaskTitle').val();
                  //var taskDesc = $('#txtTaskDescription').val();
                  var ctx = new SP.ClientContext.get_current();
                  var taskList = ctx.get_web().get_lists().getByTitle('ECMAScriptDemo');
                  // use ListItemCreationInformation to provide values..       
                  var taskItemInfo = new SP.ListItemCreationInformation();
                  newTask = taskList.addItem(taskItemInfo);
                  newTask.set_item('Title', taskTitle);

                  newTask.set_item('User', 29);
                  // could set other fields here in same way..       
                  newTask.update();
                  ctx.load(newTask);
                  ctx.executeQueryAsync(addTaskSuccess, addTaskFailure);
                  function addTaskSuccess(sender, args) {
                      $('#addResult').html("ECMAScriptDemo " + newTask.get_item('Title') + " added to the ECMAScriptDemo list");
                  }
                  function addTaskFailure(sender, args) {
                      alert('Failed to add new ECMAScriptDemo. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
                  }
              });
          </script>
         
          //Edit Item
          <script type="text/javascript">
              var newTask;
              $('#btnEditECMAScriptDemo').click(function () {
                  updateListItem();
              });
              function updateListItem() {
                  var clientContext = new SP.ClientContext.get_current();
                  var oList = clientContext.get_web().get_lists().getByTitle('ECMAScriptDemo');
                  var title = $('#txtECMAScriptDemoTitle').val();
                  var id = $('#txtECMAScriptDemoID').val();
                  this.oListItem = oList.getItemById(parseInt(id));
                  oListItem.set_item('Title', title);
                  oListItem.update();
                  clientContext.executeQueryAsync(Function.createDelegate(this, this.UpdateQuerySucceeded), Function.createDelegate(this, this.UpdateQueryFailed));
              }

              function UpdateQuerySucceeded() {
                  alert('Item updated!');
              }

              function UpdateQueryFailed(sender, args) {
                  alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
              }         
   </script>
  
   //Delete Item
   <script type="text/javascript">
       var newTask;
       $('#btnDeleteECMAScriptDemo').click(function () {
           deleteListItem();
       });
       var itemId = '';
       function deleteListItem() {
           itemId = $('#txtECMAScriptDemoIDDelete').val();
           var clientContext = new SP.ClientContext.get_current();
           var oList = clientContext.get_web().get_lists().getByTitle('ECMAScriptDemo');
           this.oListItem = oList.getItemById(itemId);
           oListItem.deleteObject();
           clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
       }

       function onQuerySucceeded() {
           alert('Item deleted: ' + itemId);
       }

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

Step 4: Run demo

• Load Title web: when click button Fetch web title automatic popup and get Title of site is TeamSite.

              

• Search Document: when typing character into textbox auto fill result

                        

• Add new item

              When typing value into Textbox and click button Add....

                               

              Result:

                             

• Edit item

                         

              Result:

                       

• Delete item

              

              Result:

               

              

Read More

Article 2: Lock control on Form (NewForm, EditForm...) use JQuery and ECMASCRIPT

Step 1: Create new List name is CallCenter include Field:

Status: Choice (Spending, Holding, Finish)

Agent: Person or Group

PhoneNumber: Single line of text

Step 2: Add some new Item

Step 3: Open Sharepoint Designer 2010 and choose List CallCenter

Step 4: Open File EditForm.aspx  and choose Advanced Mode

Step 5: Choose webpart Edit

Step 6: Code javascript using ECMAScript below tag close table

Step 7: Include script JQuery below

<script type="text/javascript" src="../../JqueryLibrary/jquery-1.4.2.js"></script>

Code javascript

<script type="text/javascript" src="../../JqueryLibrary/jquery-1.4.2.js"></script>

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(GetWebUserData, "sp.js");

        var context = null;

        var web = null;

        var currentUser = null;

                        //Get Current User

        function GetWebUserData() {     

            context = new SP.ClientContext.get_current();

            web = context.get_web();

            currentUser = web.get_currentUser();

            currentUser.retrieve();

            context.load(web);

            context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));

        }

        function onSuccessMethod(sender, args) {

            var currentUser= web.get_currentUser();

            //alert("LoginName: "+currentUser.get_loginName()+ "DisplayName: "+currentUser.get_title());

            GetIDOfEmployeeFormListBaseOnLoginName(currentUser.get_loginName());

                                    // how to get employeeID user profile property?

        }

        function onFailureMethod(sender, args) {

            alert('Unable to find your user information.');

        }

        //Filter Item with Current user login

                        function GetIDOfEmployeeFormListBaseOnLoginName(loginName) {

                                var ctx = new SP.ClientContext.get_current();

                                var list = ctx.get_web().get_lists().getByTitle('Employees');

                                var query = new SP.CamlQuery();

                                query.set_viewXml('<View Scope=\'All Items\'><Query><Where><Eq><FieldRef Name=\'UserName\' /><Value Type=\'User\'>'+currentUser.get_title()+'</Value></Eq></Where></Query></View>');

                                selectedEmployee = list.getItems(query);

                                //Display 2 Field ID,UserName

                                ctx.load(selectedEmployee,"Include(ID,UserName)");

                                ctx.executeQueryAsync(getEmployeeWithQuerySuccess, getEmployeeWithQueryFailure);

                            }

        function getEmployeeWithQuerySuccess(sender, args) {

                                var listEnumerator = selectedEmployee.getEnumerator();

                                while (listEnumerator.moveNext()) {

                                    //alert(listEnumerator.get_current().get_item("ID"));

                                    if(web.get_currentUser().get_title()=="Do Quoc Hung")

                                    {

                                                            //Block Control                          

                                                            $("input[Title='PhoneNumber']").attr("disabled", true);

                                    }                                  

                                }

                            }

                        function getEmployeeWithQueryFailure(sender, args) {

                                alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

                            }

</script>

Step 8: Open List CallCenter and Edit Item

Step 9: Appear Form EditForm.aspx, you see Title Login is Do Quoc Hung and condition is valid => bock control PhoneNumber

Step 10: Finish

Read More