Tuesday, 30 June 2015

Append Data on Choice Field by getting the data using ECMASCript in SharePoint 2013



Here we are getting some data from the custom list and show that data in the choice filed in the list form.
To Get the data from the custom list, we are using ECMAScript and then we store that data in some collection and then we append that data one by one to the Choice filed using javascript.

Here we accept that, we put the reference of the jquery file in the page.


<script language-="ecmascript" type="text/ecmascript">
       
       
        var siteUrl = '/';
       
        var ItemContainer = { ItemList: [] };
       
        function retrieveListItems(lookupItem) {
       
        //alert('Hi..RetriveListItems');
        ItemContainer = { ItemList: [] };
        var clientContext = SP.ClientContext.get_current();
        // Get the SharePoint list by giving the display name of the list.
        var oList = clientContext.get_web().get_lists().getByTitle('Process');
        // To retreive all items use the predefined createAllItemsQuery operation.
        //alert(oList);
       
       // var camlQuery = SP.CamlQuery.createAllItemsQuery();

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='OfficeType'/><Value Type='Lookup'>"+lookupItem+"</Value></Eq></Where></Query></View>");
       
        this.collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
       
        //alert('Go to call Method');
        this.clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
            Function.createDelegate(this, this.onListDataLoadQueryFailed));
    }
   
   
     // Callback function if the item retrieval Async call get successful.
    function onListDataLoadQuerySucceeded(sender, args) {
   
   
    //alert('On Success Method');
        var listItemInfo = "";
      var  listItemEnumerator="";
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            // Fill a json object with Id and Value properties.
            var tempItem = { Id: oListItem.get_id(), Value: oListItem.get_item('Title') };
            ItemContainer.ItemList.push(tempItem);
        }
       
       
        // Fill the drop down with retrieved data.
        fillDropDown();
    }
 
 
    // Fill  the drop down with the retrieved list item data.
    function fillDropDown() {
   
    //alert('in fill dropdown');
    //alert(ItemContainer.ItemList.length);
    $("Select[Title='Process']").empty();
        var ddlCategory = $("Select[Title='Process']");
       
       
       
        if (ddlCategory != null) {
       
       // alert('In If loop .. found the dropdown');
        var newOption="<option value='0'>Choose Process</option>";
        $("Select[Title='Process']").append(newOption);
       
       
      //  alert(newOption);
       
            for (var i = 0; i < ItemContainer.ItemList.length; i++) {
           
                var theOption = new Option;
               
               // alert(ItemContainer.ItemList.length);
                //alert(ItemContainer.ItemList[i].Id);
                theOption.value = ItemContainer.ItemList[i].Id;
               
               
                //alert(ItemContainer.ItemList[i].Value);
                theOption.text = ItemContainer.ItemList[i].Value;
               
                //alert(theOption.text);
               
              //alert(ddlCategory.Items.length);
             
              //alert(ddlCategory.options[i]);
               
               // ddlCategory.options[i] = theOption;
                                               
var newOption = "<option value='"+theOption.value+"'>"+theOption.text+"</option>";

// alert(newOption);


$("Select[Title='Process']").append(newOption);





               
               
                //alert('success for dropdown');
               
                //alert(ddlCategory.options[i]);
            }
        }
    }
   
   
  function   onListDataLoadQueryFailed(sender, args)
  {
 
  //alert('In Fail');
  }
       
       
        </script>

No comments:

Post a Comment