0

I am having trouble displaying a custom field from a SharePoint Online document library. I am able to view all fields. I'm able to show a system field, but when I try to just display a certain custom field it doesn't show up.

Below is my code. Please let me know if I need to be clearer.

Thank you!

HTML

<div graph-data-retriever url="https://example.com/sites/stage/_api/Web/GetFolderByServerRelativeUrl('MainFolder/SubFolder')/Files?$expand=ListItemAllFields">      
<div ng-repeat="item in graphData.result.value">    

{{item}} <!-- Shows all fields and values, including the custom field I'm trying to display - "CustomField" -->
{{item.Title}} <!-- Shows the Title of the document -->
{{item.Name}} <!-- Shows the Name of the document -->
{{item.CustomField}}  <!-- Doesn't display the value of CustomField -->   

</div>
</div>

graphDataRetriever.directive

angular.module('abc.components').directive('graphDataRetriever', function () {
    return {
        restrict: "A",
        bindToController: {
            url: "@",
            verb: "@",
            data: "<"
        },
        controllerAs: "graphData",
        controller: ["$scope", '$timeout', 'graphService', function ($scope, $timeout, graphService) {

            var ctrl = this;
            $scope.$watch('url', loadContent);

            function loadContent() {
                ctrl.result = {};
                ctrl.loading = true;

                graphService.http(ctrl.url, ctrl.verb, ctrl.data).then(success, failed);

                function success(response) {
                    ctrl.result = response;
                    ctrl.loading = false;
                }
                function failed(e) {
                    ctrl.loading = false;
                }
            }           
        }]
    };
});

graphService.service

angular.module('abc.services').service('graphService', ['proxyService', '$q', function (proxyService, $q) {
    var makeReq = function (url, verb, data, headers) {
        var deferred = $q.defer();
        var request = new proxyService.requestPayload(url);
        if (headers) {
            angular.forEach(headers, function (item) {
                request.addHeader(item.key, item.value);
            });
        } else {
            request.addHeader('Content-Type', 'application/json');
            request.addHeader('Accept', 'application/json');
        }

        if(data) {
            request.body = data;
        }
        request.httpVerb = verb || 'GET';

        function success(response) {
            var parsed = angular.fromJson(response);
            deferred.resolve(parsed);
        }
        function failed(e) {
            deferred.reject(e);
        }

        proxyService.azureRequest(request).then(success, failed);

        return deferred.promise;
    }

    return  {
        http: function (url, verb, data, headers) {
            return makeReq(url,verb,data,headers);
        },
        get: function (url, data, headers) {
            return makeReq(url, 'GET', data, headers);
        },
        post: function (url, data, headers) {
            return makeReq(url, 'POST', data, headers);
        }
    }
}]);



georgeawg
  • 48,608
  • 13
  • 72
  • 95
LAL1982
  • 13
  • 3
  • What is the first line in the code for which the "certain custom field it doesn't show up"? Check the Network Tab in the Developer Console. Is it part of the response of the XHR? – georgeawg Jul 31 '19 at 17:04
  • Hi @georgeawg - All of the the code is in this post. I'm not sure what you mean by the "the first line in the code". Yes I was able to find the custom field in the XHR Response. – LAL1982 Jul 31 '19 at 18:19

1 Answers1

0

Try

 {{item.ListItemAllFields.CustomField}}

You could use fiddler to monitor the returned JSON data.

Lee
  • 5,305
  • 1
  • 6
  • 12
  • That worked thank you! Is there documentation on that or is that more common sense. I didn't even think to use ListItemAllFields with item. Would there have been something in fiddler that would have given me a clue to use ListItemAllFields? @Lee_MSFT – LAL1982 Aug 01 '19 at 12:53
  • You can get json data structure in Fiddler, so help for coding(to access json data property) – Lee Aug 02 '19 at 00:46