How To Get All column Values Of A List Using REST API In SharePoint Online And Office 365


Welcome to an article on “How to get all column values of a list using REST API in SharePoint Online and Office 365” where we will see the steps of creating an app using Napa Tool which will help us to view all the column values of a list using REST API.

  • Open the “NAPA” Office 365 Development Tools through your SharePoint store.
  • Click on Add New Project.
  • It will ask you, what type of app do you want to build?build
  • Select SharePoint Add-in and provide a name to your app and click on Create.add in
  • You will see the screen below on the app,content
  • Click on Default.aspx and paste the code below under the,
    1. “<asp:ContentContentPlaceHolderID=“PlaceHolderMain” runat=“server”>”.

    Code:

    1.     All Column Data
    2.     “height:500px; width:400px” multiple=“multiple” id=“selectcolumnitems”>
  • Now on the navigation click on the App.js file and paste the code below removing the previous code completely.Code:

    1. ‘use strict’;
    2. var hostweblink;
    3. var applink;
    4. // Load the links on app load
    5. $(document).ready(function()
    6. {
    7.     hostweblink = decodeURIComponent(
    8.         getQueryStringParameter(“SPHostUrl”));
    9.     applink = decodeURIComponent(
    10.         getQueryStringParameter(“SPAppWebUrl”));
    11.     var scriptlink = hostweblink + “/_layouts/15/”;
    12.     $.getScript(scriptlink + “SP.RequestExecutor.js”, loadPage);
    13. });
    14. //function to retrieve values 
    15. function getQueryStringParameter(paramval)
    16. {
    17.     var paramvalue = document.URL.split(“?”)[1].split(“&”);
    18.     for (var i = 0; i < paramvalue.length; i = i + 1)
    19.     {
    20.         var Paramval1 = paramvalue[i].split(“=”);
    21.         if (Paramval1[0] == paramval) return Paramval1[1];
    22.     }
    23. }
    24. //Function on the app load 
    25. function loadPage()
    26. {
    27.     getcolumndata();
    28. }
    29. //Retrieve all of the list items
    30. function getcolumndata()
    31. {
    32.     var play;
    33.     play = new SP.RequestExecutor(applink);
    34.     //DevData is my list name
    35.     play.executeAsync
    36.     ({
    37.         url: applink + “/_api/SP.AppContextSite(@target)/web/lists/getbytitle(‘DevData’)/items?@target='” + hostweblink + “‘”,
    38.         method: “GET”,
    39.         headers:
    40.         {
    41.             “Accept”“application/json; odata=verbose”
    42.         },
    43.         success: getListdatasuccessful,
    44.         error: getListdatafailure
    45.     });
    46. }
    47. //Displays the data under the Title fields of all the items in the list.
    48. function getListdatasuccessful(data)
    49. {
    50.     var jsonObj = JSON.parse(data.body);
    51.     var selectcolumnitems = document.getElementById(“selectcolumnitems”);
    52.     if (selectcolumnitems.hasChildNodes())
    53.     {
    54.         while (selectcolumnitems.childNodes.length >= 1)
    55.         {
    56.             selectcolumnitems.removeChild(selectcolumnitems.firstChild);
    57.         }
    58.     }
    59.     var result = jsonObj.d.results;
    60.     for (var i = 0; i < result.length; i++)
    61.     {
    62.         var selectOption = document.createElement(“option”);
    63.         selectOption.value = result[i].Title;
    64.         selectOption.innerText = result[i].Title;
    65.         selectcolumnitems.appendChild(selectOption);
    66.     }
    67. }
    68. function getListdatafailure(data, errorCode, errorMessage) {
    69.     alert(“Not able to get the data, view the error: “ + errorMessage);
    70. }
  • Click on the settings icon on the tool on the left.setting
  • Under the properties, select Permissions and provide full control to the app on the Site Collection level.Permissions
  • Click on the deploy button on the left and run the project.deploy
  • Click on the launch button.launch
  • Accept the trust and click on ‘Trust It’.Trust It
  • Your app will be deployed and open for you as per the following screenshot:open
  • Your entire items under the Title column appears here as per the SharePoint List.Title

Here we saw today how to get all column values of a list using REST API in SharePoint Online and Office 365. You will love your app. Keep reading and keep learning!

Keep reading & keep learning!

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s