SharePoint 2013 API OData For Lookup Fields

When using SharePoint data lists as the backend for an application, we can leverage the use of REST and OData to fetch the information from a data list. When the list contains lookup fields, a normal GET operation on the list only returns the id from the lookup field which may not be enough for some cases. 

In the case that more information is needed from the lookup or reference field, we can leverage the OData $expand parameter. This parameter is used to expand the related data so that in addition of the id other information also becomes available. As an example, we can look at a simple Project data list which has a lookup field named Client. This field uses the Client list as reference.

Project List Fields (internal names)	Client List Fields (internal names)
id	Id
Name	Name
Client  (lookup to Client)	CodeProject

How to fetch the data:

Note: my.sharepoint.com should be replaced with a specific domain name.

https://my.sharepoint.com/_api/web/lists/getbytitle('project')/items

In this URL string, we are using the getbytitle API which allows us to query a list by name. The items route suffix indicates to fetch all the items with no explicit filters (where clause) and all the available fields. The resulting data contains the fields Id, Name, ClientId (where is this coming from?) and other fields that are created by the SharePoint platform.  For our purposes, our focus is only on our custom fields (Name, ClientId)

We can notice that there is a ClientId field, but the field that we defined is named Client. SharePoint by default returns the lookup field id using this format: field name + id. In this case, the name is ClientId which as we can guess is the id of the client record.

What about also getting the client name?

In the case that more lookup data is required as in the case of client name, we must use a couple of OData parameters to expand on the selection of the look up fields: $select, $expand

Parameter	Description
$select	Use this parameter to control what fields should be selected.
$expand	Use this field to indicate what lookup field should be expanded to get additional information from that field. Field to expand must be in the $select parameter.

As an example, our request can be changed to this: (no domain name listed)

_api/web/lists/getbytitle('project')/items?$select=Client/Name,ClientId,Name,Id&$expand=Client

URL Segments:

URL Segment	Description
_api/web/lists/getbytitle('project')/items	This is the API and route to query a list by name and retrieve the items (records)
$select=Client/Name,ClientId,Name,Id	OData request parameter to select fields by name
$expand=Client	OData request parameter to indicate what look up field should be expanded to get additional information.

When using the $expand query parameter, the $select query parameter must also be used, and the field to be expanded must be explicitly declared as shown on our example above. The result of this request returns the project name and id as well as client name and client id.  We should note the format used to get the client name, Client/Name. This format is what indicates that we want the Name field from the Client list.

Sample Result:

A sample of the response is shown below. The results array contains each record, for which we can find the selected fields as well as the client property (object) with the name property (client name).

Expanded Results:

As shown above, the USE of OData request parameters are very important when there is a need to get related/lookup data with one request.


Originally Posted on ozkary.com

SharePoint Choice Field Options with AngularJS $resource

A SharePoint data list can have a field of type = Choice which is used to provide the options for a dropdown control. When building SharePoint apps with AngularJS, we need to build the dropdown control with the options that are defined by the field’s metadata. Let’s see how we can go about to get this information.

In order to fetch the options from the Choice field from a given data list, we can use the REST APIs with OData operations. To show how this can be done using the AngularJS $resource service, we can take a look at an example in which we have a Task data list with a status field (type = Choice) with the following options:

Status (Choice) field options

Pending

In-Progress

Complete

We start by building an AngularJS service which uses the $resource service for our API calls. Note that we could also use the $http service as well.  Our service defines the $resource operation as follows: (note the relative path and the use of the getbytitle API route to get list information)

 var apiUrl = "../_api/web/lists/getbytitle('task')/:route";

       

        var api = $resource(apiUrl, { route: '@route' }, {

            //Other methods and routes

            status: { method: 'GET',params: {route:'fields'},isArray:false}        

        })

When making the call to get the data list status information, we need to send on the request an OData parameter to tell the API that we are interested in getting the information from a particular field. In our case, we need the metadata from the Status field which includes the choices that are available. Note that the Choice field does not provide a text/value pair. It only provides the text part of the options. This must be used for the value/text properties of the drop-down control. When updating the model and consequentially making a Create/Update API calls, we must persist the text value as this is the expected data (constraint) on the data list.

Our service and the Status method implementation to get the field's metadata looks like this:

function svcTask($q, $resource) {

        var apiUrl = "../_api/web/lists/getbytitle('task')/:route";

       

        var api = $resource(apiUrl, { route: '@route' }, {

            //Other methods and routes

            status: { method: 'GET', params: {route:'fields'}, isArray:false}        

        })

      

        var service = {

            /*

              name:status

              gets the options from a choice field type (sharepoint)

            */

            status: function () {

                var deferred = $q.defer();

 

 //gets the field by title

                var params = { '$filter': "Title eq 'Status'" };

               

api.status(params, function (data) {

                    statusOk(data);

                },

                    function (err) {

                        deferred.reject(err);

                    }

                );

                function statusOk(data) {

                    var result = data.value[0].Choices;

                    var list = [];

                    for (var idx = 0; idx < result.length; idx++) {

                        var item = { code: result[idx], name: result[idx] };

                        list.push(item);

                    }

                    service.statusList = list;

                    deferred.resolve(list);

                }

                return deferred.promise;

            }          

        }

        return service;

    }

A few notes about this code:

• The getbytitle API is used to query a list metadata as well as data.
• The Fields route segment is used to tell the API that we are interested in requesting field metadata information. This is where the options are defined.
• The $filter OData parameter is used to tell the API which field we need to query by filtering on the title property.
• The choices property is contained on the response Value property and has a results array.

The request is made by using the OData $filter request parameter. If the response is OK, the statusOk function is called. Otherwise an error is return by calling deferred.reject(err).

In the statusOk function, the code iterates thru the list and builds a JSON array that contains the value/text pairs. This is the model for our dropdown. Since there is a bit of data mapping/transformation that we need to do, and we want to encapsulate this away from the controller, the Status method returns a deferred promised. This allows us to handle the asynchronous request and perform the data mapping yet still keeping the asynchronous behavior. We then return the transformed data by calling deferred.resolve(list). 

The controller can now consume this service by calling the status method as shown below:

    function ctrlTask(svcTask) {

        var ctrl = this;

        ctrl.statusOptions = [];   //model for the status dropdown

        //load the status options waiting on a promise

        svcTask.status().then(function (data) {

            ctrl.statusOptions = data;

        },

            function (err) {

                $log.error(err);

            }

        );

    }

The ctrl.statusOptions is the model that holds the options for our dropdown on the view.

Finally, this is how the module is defined with both service and controller:

(function (angular) {

    'use strict';

    var appName = 'app';

    var app = angular.module(appName,['ngRoute', 'ngResource']);

    app.factory('svcTask', ['$q', '$resource', svcTask]);

    app.controller('ctrlTask', ['svcTask', ctrlTask]);

CodeProject

    function svcTask($q, $resource) {

        //...           

    }

    function ctrlTask(svcTask) {

        //...

    }

})(angular);

I hope this tip helps you build SharePoint Apps with AngularJS.

Origunally Posted on ozkary.com