ECMAScript Client Object Model – Retrieve data from a list


I’m starting on SharePoint Online development. So was examining what are the capabilities of ECMAScripts and what we can really achieve. So started simply to read some values from a SharePoint list.

In the below example I’m trying to retrieve list data and populate them inside a drop down.

In the markup I have one Dropdown list that will get populated with the list data, and a button to trigger the event for retrieving data and populating the dropdown.

image

I have bound the retrieveListItems method to onclick event of the button.

<select id=”ddlCategory”></select> <br />

<input type=”button” value=”GetData” onclick=”retrieveListItems();” />

Then I have written my ECMA Script in a script block as bellow.

Global variables:

<script type=”text/ecmascript” language=”ecmascript”>
    // Site collection url. Whatever the value given here the current site collection that
    // the web part is running is picked automaticaly. Not sure about how it happens.
    // Need to investigate more.
    var siteUrl = ‘/’;
    // Creating object to hold the item collection with the Id and Value. To enable
    // intellisence while coding(for the ItemContainer), uncomment the below line and
    // comment the right below one.
    //var ItemContainer = { ItemList : [{ Id: “”, Value: “” }]};
    var ItemContainer = { ItemList: [] };

Retrieve items:

    function retrieveListItems() {
        var clientContext = new SP.ClientContext(siteUrl);
        // Get the SharePoint list by giving the display name of the list.
        var oList = clientContext.get_web().get_lists().getByTitle(‘Categories’);
        // To retreive all items use the predefined createAllItemsQuery operation.
        var camlQuery = SP.CamlQuery.createAllItemsQuery();
        this.collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
            Function.createDelegate(this, this.onListDataLoadQueryFailed));
    }

Callback functions:

    // Callback function if the item retrieval Async call get successful.
    function onListDataLoadQuerySucceeded(sender, args) {
        var listItemInfo = ”;
        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();
    }
    // Callback function if item retrieval failes.
    function onListDataLoadQueryFailed(sender, args) {
        alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
    }

Fill  the dropdown:

    // Fill  the drop down with the retrieved list item data.
    function fillDropDown() {
        var ddlCategory = document.getElementById(‘ddlCategory’);
        if (ddlCategory != null) {
            for (var i = 0; i < ItemContainer.ItemList.length; i++) {
                var theOption = new Option;
                theOption.value = ItemContainer.ItemList[i].Id;
                theOption.text = ItemContainer.ItemList[i].Value;
                ddlCategory.options[i] = theOption;
            }
        }
    }

So after all above are done if you deploy this web part solution in to a SharePoint Online site, and click on the Get Data button, it will populate your dropdown with the list data.

image

image

Happy Coding with ECMA Scripts Smile

Advertisements

2 thoughts on “ECMAScript Client Object Model – Retrieve data from a list

  1. Pingback: ECMAScript Client Object Model – Update a look up field « Kamil's Blog

  2. Pingback: ECMAScript Client Object Model – Get the values from a multi select lookup column field « Kamil's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s