Search This Blog

Sunday, September 13, 2015

Search Items from a List

var productcollection;
function getProducts(title) {
    try {
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        var list = web.get_lists().getByTitle('product');
        var query = '<View Scope=\'RecursiveAll\'>'+
                        '<Query>'+
                            '<Where>'+
                            '<Contains>'+
                                '<FieldRef Name=\'ProductName\'/>' +
                                '<Value Type=\'Text\'>' + title +'</Value>'+
                            '</Contains>'+
                            '</Where>'+
                        '</Query>'+
                             '</View>';
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(query);

        this.productcollection = list.getItems(camlQuery);
        context.load(this.productcollection, 'Include(ProductName, ProductDescription, ProductType, LaunchDate, AvailableQuantity)');
        context.executeQueryAsync(Function.createDelegate(this, this.productsReceived), Function.createDelegate(this, this.failed));
    }
    catch (e) {
        alert(e);
    }
}
function productsReceived() {
    alert('got products');
    prcessProducts(this.productcollection);
}
function failed(sender, args) {
    alert('failed. Message:' + args.get_message());
}

Get and Set The List Item Value in SharePoint 2010 Using ECMAScript

Introduction

In this article you will see how to get and set the list item value in SharePoint 2010 using ECMAScript. I have a custom list named "Custom" which has the following items.

IM1.gif

I have two columns "SampleOne" and "SampleTwo". I need to get the "SampleOne" field value and set the same to the "SampleTwo" field using ECMAScript.

Steps Involved
  1. Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).
  2. Go to Site Actions, click on Edit Page.

    IM2.gif
  3. Click on the Insert tab in the ribbon interface and then click on Web Part button.

    IM3.gif
  4. Select Media and Content in the Categories section and then click on Content Editor.

    IM4.gif
  5. Click on Add.
  6. The Content Editor web part will be added to the site page.
  7. Click on down arrow and then click on Edit Web Part.

    IM5.gif
  8. Click on "Click here to add new content".

    IM6.gif
  9. Click on the Format Text tab in the ribbon interface and then click on HTML drop down.

    IM7.gif
  10. Click on Edit HTML source.
  11. The HTML source window will pop up.

    IM8.gif
  12. Copy and paste the following script.
    <script language="ecmascript" type="text/ecmascript"> 
            var listItem;
            var list;
            var clientContext;
            function getSetListItem() {
                this.clientContext = SP.ClientContext.get_current();
                if (this.clientContext != undefined && clientContext != null) {
                    var webSite = clientContext.get_web();
                    this.list = webSite.get_lists().getByTitle("Custom");
                    this.listItem = list.getItemById(3);
                    clientContext.load(this.listItem);
                    this.clientContext.executeQueryAsync(Function.createDelegate(thisthis.OnLoadSuccess),
    Function.createDelegate(thisthis.OnLoadFailed));
                }
            } 
            function OnLoadSuccess(sender, args) {
                var value = this.listItem.get_item("SampleOne");
                this.listItem.set_item("SampleTwo", value);
                this.listItem.update();
                this.clientContext.load(this.listItem);
                this.clientContext.executeQueryAsync(Function.createDelegate(thisthis.OnLoadSuccess1),
    Function.createDelegate(thisthis.OnLoadFailed));
            } 
            function OnLoadSuccess1(sender, args) {
                alert(this.listItem.get_item("SampleTwo"));
            } 
            function OnLoadFailed(sender, args) {
                alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }</script
    >    <input id="btnGetSetListItem" onclick="getSetListItem()" type="button" value="Get & Set List Item" />

     
  13. Click on Ok.
  14. In the ribbon interface click on Save & Close button.

    IM10.gif
  15. In the Content Editor web part you can find a button named "Get & Set List Item", click on that button.

    IM11.gif
  16. An alert will pop up.
Reference

SP.ListItem.item Property - http://msdn.microsoft.com/en-us/library/ee549053.aspx

Get the Lookup Field Value For a List Item in SharePoint 2010 Using ECMAScript

Introduction
In this article you will see how to get the lookup field value for a list item in SharePoint 2010 using ECMAScript. I have a custom list named "Custom" which has a lookup column named "LookupSingleValue".
img1.gif
And I have the following item in the list as shown in the following figure.
img2.gif
Steps Involved:
  1.  Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).
  2.  Go to Site Actions, click on Edit Page.
img3.gif
   3. Click on Insert tab in the ribbon interface and then click on Web Part button.
img4.gif
   4. Select Media and Content in the Categories section and then click on Content Editor.
img5.gif
   5. Click on Add.
   6. The Content editor web part will be added to the site page.
   7. Click on the down arrow and then click on Edit Web Part.
img6.gif
   8. Click on "Click here to add new content".
img7.gif
   9. Click on the Format Text tab in the ribbon interface and then click on the HTML drop down.
img8.gif
   10. Click on Edit HTML source.
   11. the HTML source window will pop up.
img9.gif
   12. Copy and paste the following script.
<script language="ecmascript" type="text/ecmascript">

        var listItem;
        var list;
        var clientContext;

        function getLookUp() {
            this.clientContext = SP.ClientContext.get_current();
            if (this.clientContext != undefined && clientContext != null) {
                var webSite = clientContext.get_web();
                this.list = webSite.get_lists().getByTitle("Custom");
                this.listItem = list.getItemById(5);
                clientContext.load(this.listItem);
                this.clientContext.executeQueryAsync(Function.createDelegate(this,this.OnLoadSuccess), Function.createDelegate(thisthis.OnLoadFailed));
            }
        }

        function OnLoadSuccess(sender, args) {
            var lookup = this.listItem.get_item("LookupSingleValue");
            alert("Lookup Id: " + lookup.get_lookupId() + "\n Lookup Value: " + lookup.get_lookupValue());


        }

        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }</script>
    <input id="btnGetLookUp" onclick="getLookUp()" type="button" value="Get Look Up" />

   13. Click on Ok.
   14. In the ribbon interface click on Save & Close button.
img10.gif
   15.  In the content editor web part you can find a button named "Get Look Up"; click on that button.
img11.gif
   16. An alert will pop up.
img12.gif
References
  1. SP.FieldLookupValue.lookupId Property - http://msdn.microsoft.com/en-us/library/ee553739.aspx

  2.  SP.FieldLookupValue.lookupValue Property - http://msdn.microsoft.com/en-us/library/ee551154.aspx



Set the Default Value for the Field in SharePoint 2010 using ECMAScript

Introduction

In this article you will see how to set the default value for the field in SharePoint 2010 using ECMAScript. I have a list named "List Request" which has the following fields (Navigate to the list, click on List tab in the ribbon interface. Click on List Settings button).

Script1.gif

I am going to set the default value for the column named "Description" using ECMAScript.

Steps Involved

Step 1 : Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).

Step 2 : Go to Site Actions, click on Edit Page.

SharePoint2.gif

Step 3 : Click on the Insert tab in the ribbon interface and then click on Web Part button.

SharePoint3.gif

Step 4 : Select Media and Content in the Categories section and then click on Content Editor.

SharePoint4.gif

Step 5 : Click on Add.

Step 6 : The Content Editor web part will be added to the site page.

Step 7 : Click on the down arrow and then click on Edit Web Part.

SharePoint5.gif

Step 8 : Click on "Click here to add new content".

SharePoint6.gif

Step 9 : Click on Format Text tab in the ribbon interface and then click on HTML drop down.

SharePoint7.gif

Step 10 : Click on Edit HTML source.

Step 11 : The HTML source window will pop up.

SharePoint8.gif

Step 12 : Copy and paste the following script.
<script language="ecmascript" type="text/ecmascript"> 
        var fieldCollection;
        var field;
        var list;
        function fieldDefaultValue() {
            var clientContext = SP.ClientContext.get_current();
            if (clientContext != undefined && clientContext != null) {
                var webSite = clientContext.get_web();
                this.list = webSite.get_lists().getByTitle("List Request");
                this.fieldCollection = list.get_fields();
                this.field = fieldCollection.getByTitle("Description");
                this
.field.set_defaultValue("Default");                this.field.update();                clientContext.load(this.field);
                clientContext.executeQueryAsync(Function.createDelegate(thisthis.OnLoadSuccess),
Function.createDelegate(thisthis.OnLoadFailed));
            }
        } 
        function OnLoadSuccess(sender, args) {
            
alert(this.field.get_defaultValue());        } 
        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
</
script
>    <input id="btnFieldDefaultValue" onclick="fieldDefaultValue()" type="button" value="Field Default Value" />

Step 13 : Click on Ok.

Step 14 : In the ribbon interface click on the Save & Close button.

SharePoint9.gif

Step 15 : In the content editor web part you can find a button named "Field Default Value"; click on that button.

SharePoint10.gif

Step 16 : An alert will pop up which displays the default value for the field.

Script2.gif

Reference
  1. SP.Field.defaultValue() Property - http://msdn.microsoft.com/en-us/library/ee547636.aspx
  2. SP.Field.update() Method - http://msdn.microsoft.com/en-us/library/ee659278.aspx

Get The List Content Types in SharePoint 2010 Using ECMAScript

Introduction

In this article you will see how to get the list content types in SharePoint 2010 using ECMAScript. I have a list named "List Request" which has the following content types (Navigate to the list, click on List tab in the ribbon interface. Click on List Settings button).
  1. Item.
  2. Folder.
  3. Central Content Type.
Steps Involved
  1. Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).
  2. Go to Site Actions, click on the Edit Page.

    LstCntSHr1.gif
     
  3. Click on the Insert tab in the ribbon interface and then click on the Web Part button.

    LstCntSHr2.gif
     
  4. Select Media and Content in the Categories section and then click on Content Editor.

    LstCntSHr3.gif
     
  5. Click on Add.
  6. The Content Editor web part will be added to the site page.
  7. Click on the down arrow and then click on Edit Web Part.

    LstCntSHr4.gif
     
  8. Click on "Click here to add new content".

    LstCntSHr5.gif
     
  9. Click on Format Text tab in the ribbon interface and then click on HTML drop down.

    LstCntSHr6.gif
     
  10. Click on Edit HTML source.
  11. HTML source window will pop up.

    LstCntSHr7.gif
     
  12. Copy and paste the following script.
       <script language="ecmascript" type="text/ecmascript">        var contentTypeCollection;
            var listCollection;
            var list;
            function getListContentTypes() {
                var clientContext = new SP.ClientContext.get_current();
                if (clientContext != undefined && clientContext != null) {
                    var web = clientContext.get_web();
                    this.listCollection = web.get_lists();
                    this.list = listCollection.getByTitle("List Request");
                    this.contentTypeCollection = list.get_contentTypes();                clientContext.load(this.contentTypeCollection);
                    clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));
                }
            }
            function onQuerySucceeded() {
                var contentType = 'List Content Types:\n '            var contentTypeEnumerator = this.contentTypeCollection.getEnumerator();
                while (contentTypeEnumerator.moveNext()) {
                    var content = contentTypeEnumerator.get_current();
                    contentType += content.get_name() + '\n';
                }
                alert(contentType);
            }
            function onQueryFailed(sender, args) {
                alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());


     
  13. Click on Ok.
  14. In the ribbon interface click on Save & Close button.

    LstCntSHr8.gif
     
  15. In the content editor web part you can find a button named "Get List Content Types"; click on that button.

    LstCntSHr9.gif
     
  16. An alert will pop up displaying the list content types.

    LstCntSHr10.gif
Reference

SP.List.contentTypes Property - http://msdn.microsoft.com/en-us/library/ee556719.aspx 

Get "CreatedBy" and "ModifiedBy" Values From SharePoint 2010 List Using ECMAScript

In this article you will see how to get the "CreatedBy" and "ModifiedBy" values from SharePoint 2010 list using ECMAScript.
 
Introduction 
In this article you will see how to get the "CreatedBy" and "ModifiedBy" values from SharePoint 2010 list using ECMAScript. I have a custom list named "CustomList" which has the following columns:
 
img1.jpg
Steps Involved
1. Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).
2. Go to Site Actions, click on Edit Page.
img2.jpg
3. Click on the Insert tab in the ribbon interface and then click on Web Part Button.
img3.jpg
4. Select Media and Content in the Categories section and then click on Content Editor.
img4.jpg
5. Click on Add.
6. The Content Editor web part will be added to the site page.
7. Click on the down arrow and then click on Edit Web Part.
img5.jpg
8. Click on "Click here to add new content".
img6.jpg
9. Click on the Format Text tab in the ribbon interface and then click on HTML DropDown.

img7.jpg
10. Click on Edit HTML source.
11. The HTML source window will pop up.
img8.jpg
12. Copy and paste the following script.
<script language="ecmascript" type="text/ecmascript">

        var listItem;
        var list;
        var clientContext;

        function getFieldUserValue() {

            this.clientContext = SP.ClientContext.get_current();
            if (this.clientContext != undefined && clientContext != null) {
                var webSite = clientContext.get_web();
                this.list = webSite.get_lists().getByTitle("CustomList");
                this.listItem = list.getItemById(1);
                clientContext.load(this.listItem);
                this.clientContext.executeQueryAsync(Function.createDelegate(this,this.OnLoadSuccess), Function.createDelegate(thisthis.OnLoadFailed));
            }
        }

        function OnLoadSuccess(sender, args) {
            var fieldUserValueCreatedBy = this.listItem.get_item("Author");
            var fieldUserValueModifiedBy = this.listItem.get_item("Editor");
            alert("Created By: " + fieldUserValueModifiedBy.get_lookupValue() + "\n Modified By: "fieldUserValueModifiedBy.get_lookupValue() + "\n");
        }


        function OnLoadFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }</script>
    <input id="btnGetFieldUserValue" onclick="getFieldUserValue()" type="button" value="Get Created by and Modified by" />

13. Click on Ok.
14. In the ribbon interface click on the Save & Close button.
img9.jpg
15. In the content editor web part you can find a button named "Get Created By and Modified By"; click on that Button.

img10.jpg
16. An alert will pop up.
img11.jpg
Reference
  1. SP.FieldUserValue.lookupValue Property - http://msdn.microsoft.com/en-us/library/ee550746.aspx