1

I'm trying to make an interactive task board based on the task list app in SharePoint 2013. The task lisk includes fields like "Title","Description","Status","% Complete","Due Date","Assigned To", etc. I used knockout.js to bind "Title","Description", and "Status" to my HTML controls. Here is some of the code:

var ViewModal = function(items, listname){
var self = this;

self.sortBy = ko.observableArray(sortBy);
self.tasks = ko.observableArray(items);
self.listname = ko.observable(listname);
self.auto = ko.observable(false);

self.getTasks = function() {

    clearTimeout(self.getTasks);

    // server relative url to REST service endpoint
    var ajaxurl = _spPageContextInfo.webServerRelativeUrl + "/_vti_bin/listdata.svc/" + self.listname() + "?$orderby=PriorityValue";

    $.ajax({
        type: "GET",
        url: ajaxurl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        processData: true,
        success: function (data, status, xhr) {

            if (status == "success" && data) {
                ko.mapping.fromJS(data.d.results, mapping, self.tasks)

                $(".task-item").draggable();
            }
        },
        error: alert
    });

    if (self.auto()) {
        setTimeout(self.getTasks, 10000);
    }
};

<div class="tasks-column">
<div class="column-header">Not Started</div>

<!-- ko foreach: tasksNotStarted -->

<div class="task-item">
    <div class="view" data-bind="visible: !IsEditing()">
        <button class="edit" data-bind="click: $root.editTask">edit</button>
        <h2><span data-bind="text: Title"></span></h2>
        <div data-bind="html: Description"></div>
        <span data-bind="text: PriorityValue"></span>
    </div>
    <div clsas="edit" data-bind="visible: IsEditing">
        <button class="save" data-bind="click: $root.saveTask">save</button>
        <input type="text" data-bind="value: Title"></input>
    </div>
</div>

I'm having trouble displaying the data from the "Assigned To" user/group field. I tried:

<span data-bind="text: AssignedTo"></span>

But it displays the field as [object Object]

I tried using $expand

var ajaxurl = _spPageContextInfo.webServerRelativeUrl + "_vti_bin/listdata.svc/" + self.listname() = "?$expand=AssignedTo";

But I still get [object Object]

1

You need to use the syntax Amal suggested but in the select statement, then expand the entire AssignedTo object.

When you're on a page with jQuery loaded open your browser dev tools and enter this into the JavaScript console:

$.getJSON(
    "/_api/lists/getByTitle('Tasks')/items?$select=AssignedTo/Id,AssignedTo/Title&$expand=AssignedTo",
     function(data) { console.log(data) }
)

Note I've used the /_api/ path to make the request, you really should use this endpoint instead of calling in to listdata.svc for all new development against 2013.

The snippet above will log the response object into the Javascript console where you can inspect it. If you expand the response object a couple of levels you'll see that AssignedTo is actually an array of more objects with your Title and Id properties. So if you were going to bind this in your knockout context you would need to use something like:

<div data-bind="foreach: AssignedTo">
    <span data-bind="text: Title"></span>
</div>

Or you can do something more slick like

<span data-bind="text: [].map.call(AssignedTo, function(item) { return item.Title })"></span>

Which will give you a comma separated list, you can add a leading space if you want in the return block too.

If you're super set on using listdata.svc then you would use the same syntax:

"/_vti_bin/listdata.svc/Tasks?$select=AssignedTo/Id,AssignedTo/Title&$expand=AssignedTo"

But the trick here is that when you use listdata.svc like this, your AssignedTo objects will each have their own results object that holds the array of values. So you would need to bind to AssignedTo.value[i].Title

Either way I think this should give you enough to get started -- don't hesitate to crack open your browser tools or use something like postman to inspect the results of your REST calls directly so you can navigate the object hierarchies and get what you're looking for -- you'll learn more as you go this way too!

  • I changed the url to the /_api/ endpoint but I got an error from Postman that basically said AssignedTo doesn't exist. I used listdata.svc and took out the $select and just did $expand=AssignedTo. I set the bind to AssignedTo.Title like Amal mentioned but it returned the user's job title. I used Postman to and found 'Name' and set the bind to AssignedTo.Name and it worked. – stackexchangebro Nov 19 '14 at 8:50
0

You have a couple of options. You could either examine the person object returned in the browser developer toolbar and extract what you need from it but I'd recommend using "Knockout bindings for SharePoint", a great codeplex project for dealing with some of the more complex objects that SharePoint returns.

Once you have added a reference to it (and other dependent JavaScript libraries) your binding would look like this:

<span data-bind="spUser: AssignedTo"></span>

or if you have AssignedTo set to accept multiple selections:

<span data-bind="spUser: AssignedTo, multi:true"></span>

If it is not returning anything, try changing the binding to <span data-bind="spUser:CreatedBy"></span> as this will verify that KOSP is working.

This will render it as a nice clickable link. Have a look at some of the project author's blogs on the subject to get you up and running.

  • I tried using that library but it either doesn't return anything or it returns a blank/null value. – stackexchangebro Nov 17 '14 at 0:46
  • Just added a line in case you returning multi select and a good way of testing KOSP is installed – Adeybaby Nov 17 '14 at 1:18
  • I tried CreatedBy but it didn't work. I'm using ko.sp-1.0.min.Ex.js. I tried it with knockout-2.3.0.js and knockout-3.0.0beta.js but it's still not returning anything. – stackexchangebro Nov 17 '14 at 3:00

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.