<%-- The markup and script in the following Content element will be placed in the <head>of the page --%>
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">Page Title</asp:content>
<%-- The markup and script in the following Content element will be placed in the <body>of the page --%>
<asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">REST API Examples</asp:content>
<%-- The markup and script in the following Content element will be placed in the <body>of the page --%>
<asp:content contentplaceholderid="PlaceHolderMain" runat="server">
<div>
<p>
<b>List Columns</b>
<br />
<select style="height:300px; width:250px" multiple="multiple" id="selectColumns"></select>
</p>
</div>
</asp:content>
'use strict';
var hostweburl;
var appweburl;
// Load the required SharePoint libraries.
$(document).ready(function () {
//Get the URI decoded URLs.
hostweburl = decodeURIComponent(
getQueryStringParameter("SPHostUrl"));
appweburl = decodeURIComponent(
getQueryStringParameter("SPAppWebUrl"));
// Resources are in URLs in the form:
// web_url/_layouts/15/resource
var scriptbase = hostweburl + "/_layouts/15/";
// Load the js file and continue to load the page with information about the list columns.
// SP.RequestExecutor.js to make cross-domain requests
$.getScript(scriptbase + "SP.RequestExecutor.js", loadPage);
});
//Utilities
// Retrieve a query string value.
// For production purposes you may want to use a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}
function loadPage() {
getListColumns();
}
//Retrieve all of the list columns
function getListColumns() {
var executor;
// Initialize the RequestExecutor with the app web URL.
executor = new SP.RequestExecutor(appweburl);
executor.executeAsync({
url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Custom List')/Fields?@target='" + hostweburl + "'",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: getListColumnsSuccessHandler,
error: getListColumnsErrorHandler
});
}
//Populate the selectColumns control after retrieving all of the list columns.
function getListColumnsSuccessHandler(data) {
var jsonObject = JSON.parse(data.body);
var selectColumns = document.getElementById("selectColumns");
if (selectColumns.hasChildNodes()) {
while (selectColumns.childNodes.length >= 1) {
selectColumns.removeChild(selectColumns.firstChild);
}
}
var results = jsonObject.d.results;
for (var i = 0; i < results.length; i++) {
var selectOption = document.createElement("option");
selectOption.value = results[i].Title;
selectOption.innerText = results[i].Title;
selectColumns.appendChild(selectOption);
}
}
function getListColumnsErrorHandler(data, errorCode, errorMessage) {
alert("Could not get List columns: " + errorMessage);
}