4

I need to bind the SharePoint 2010 choice column in the HTML dropdown of the content editor webpart..

I have followed this blog but it could not achieve my requirement.

I have replace my listname, columnname and select id of dropdown.

I have put below code in the text file and give the path in the contentEditor webpart. Please check the code below and let me know what wrong i have done.

Code snippet:

<select id="input2" style="width:30%"><option>Any</option></select>

<script type="text/javascript">
    window.onload = retrieveListItems;
    var deptChoiceField;

    function retrieveListItems() {
        varclientContext = SP.ClientContext.get_current();
        var webSite = clientContext.get_web();
        var lists = webSite.get_lists();
        var oList = lists.getByTitle('as');
        deptChoiceField = clientContext.castTo(oList.get_fields().getByInternalNameOrTitle('Engineer'), SP.FieldChoice);
        clientContext.load(deptChoiceField);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.fillDropDown), Function.createDelegate(this, this.onListDataLoadQueryFailed));
    }

    function onListDataLoadQueryFailed(sender, args) {
        alert(‘Request failed.‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
    }

    function fillDropDown() {
        var choices = deptChoiceField.get_choices();
        var ddlCategory = document.getElementById(‘input2‘);
        if (ddlCategory != null) {
            for (var i = 0; i < choices.length; i++) {
                var theOption = new Option;
                theOption.text = choices[i];
                ddlCategory.options[i] = theOption;
            }
        }
    }
</script>
</body>
</html>

My List name is 'as'. My choice field column name is 'Engineer'. and dropdown id is 'input2'

  • Please post and format your code. This always helps to see where you might have made a mistake. – Robert Kaucher Jun 24 '13 at 13:06
  • Which browser are you using? Is fillDropDown actually getting invoked? – Robert Kaucher Jun 26 '13 at 14:42
1

One very easy way to do this is using the ListData.svc.

Imagine your list is called IssueTracker and your field is called Products. Using the library of your choice, I am using DataJS (from Microsoft) in this example but you could just as easily use jQuery or Kendo UI's DataSource.

OData.read(
    "../_vti_bin/ListData.svc/IssueTrackerProducts",
    function (data, response) {
        list.taskList.hasReturned = true;
        onSuccessMethod(data, response);
    },
    function (error) {
        list.taskList.hasReturned = true;
        onFailureMethod(error);
    }
);

{
    "d": {
        "results": [
            {
                "__metadata": {
                    "uri": "http://sp-server.domain.com/_vti_bin/ListData.svc/IssueTrackerProduct('Aftermarket%20Hardware')",
                    "type": "Microsoft.SharePoint.DataService.IssueTrackerProductValue"
                },
                "Value": "Aftermarket Hardware"
            },
            {
                "__metadata": {
                    "uri": "http://sp-server.domain.com/_vti_bin/ListData.svc/IssueTrackerProduct('Aftermarket%20Software')",
                    "type": "Microsoft.SharePoint.DataService.IssueTrackerProductValue"
                },
                "Value": "Aftermarket Software"
            }
        ]
    }
}

As far as the JS CSOM goes the code on that blog is incomplete in one of the lines. Here is a snippet I have put together for you that I have tested:

var field,
    fieldChoices;
var ctx = new SP.ClientContext.get_current();
var web = ctx.get_web();
var list = web.get_lists().getByTitle('IssueTracker');
field = list.get_fields().getByInternalNameOrTitle('Product');
var choiceField = ctx.castTo(field, SP.FieldChoice);
ctx.load(field);
ctx.executeQueryAsync(function () {
          fieldChoices = choiceField.get_choices();
          //FieldChoices is now an array with the possible values for
          //that field
},
function(sender, args){console.log("Handle error");});

Edit: The code you added seems right. Here is an example that is a little different from yours as it takes into account IE7 as well.http://jsbin.com/iyojir/1/edit

  • I got the JS CSOM code above from this page a while ago and have been using it since then: blogs.technet.com/b/pfemike/archive/2012/07/12/… – Robert Kaucher Jun 24 '13 at 13:38
  • Hi Robert, How to use data.js(odata.read) in the ContentEditor webpart? I am new to using odata. – user17813 Jun 26 '13 at 13:28
  • Have you tried the code in my second example? That is just the SharePoint ECMA Client Object Model. It might be easier just to use it. – Robert Kaucher Jun 26 '13 at 13:30
  • S.. I have tried... I could not able to get the output. I have copy the code and add it in the txt file and uploaded in the shared document and the url given in the Content editor webpart. Note: Above i have attached my code.. Can you check and tell where i went wrong when i give as txt file...Please help.. – user17813 Jun 26 '13 at 13:59
  • Are you saying you saved it as a .txt file in a shared documents library and not as a .js file? – Robert Kaucher Jun 28 '13 at 1:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.