This article shows how to get all the site content types using the REST API in SharePoint 2013 Online.
Introduction
SharePoint 2013 introduces a Representational State Transfer (REST) service that is comparable to the existing SharePoint client object models. This allows the developers to interact remotely with SharePoint data using any technology that supports the REST web requests. This means that developers can perform Create, Read, Update, and Delete (CRUD) operations from their apps for SharePoint, solutions, and client applications, using REST web technologies and standard Open Data Protocol (OData) syntax. In this article you will see the following:
- Create an app using NAPA Tool in SharePoint 2013 Online.
- Cross-Domain Requests.
- Get all the site content types from the host site using the REST API.
Endpoint URI:
http://sitename/_api/web/contenttypes
Note: If you are making cross-domain requests then you need to add SP.AppContextSite(@target) and ?@target='<host web url>' to the endpoint URI.
HTTP Request
GET: Read a Resource.
Use the following procedure to create a sample app using the NAPA Tool:
- Navigate to the SharePoint 2013 Online site.
- Click on Site Contents in the quick launch bar.
- Click on “Napa” Office 365 Development Tools.
- Click on Add New Project.
- Select App for SharePoint, enter the Project name and then click on Create.
Permissions
Ensure that an appropriate permission has been provided to access the content. Click on the Properties button and then click on Permissions. Set the required permission to access the content.
Default.aspx
Replace the Default.aspx with the following:
- <%-- 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">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>Site Content Types</b>
- <br />
- <select style="height:300px; width:250px" multiple="multiple" id="selectContentTypes"></select>
- </p>
- </div>
- </asp:Content>
App.js
Replace App.js with the following:
- 'use strict';
- var hostweburl;
- var appweburl;
-
-
- $(document).ready(function() {
-
-
- hostweburl = decodeURIComponent(
- getQueryStringParameter("SPHostUrl"));
- appweburl = decodeURIComponent(
- getQueryStringParameter("SPAppWebUrl"));
-
-
-
- var scriptbase = hostweburl + "/_layouts/15/";
-
-
-
- $.getScript(scriptbase + "SP.RequestExecutor.js", loadPage);
- });
-
-
-
-
- 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() {
- getSiteContentTypes();
- }
-
-
- function getSiteContentTypes() {
- var executor;
-
-
- executor = new SP.RequestExecutor(appweburl);
-
- executor.executeAsync({
- url: appweburl + "/_api/SP.AppContextSite(@target)/web/ContentTypes?@target='" + hostweburl + "'",
- method: "GET",
- headers: {
- "Accept": "application/json; odata=verbose"
- },
- success: getSiteContentTypesSuccessHandler,
- error: getSiteContentTypesErrorHandler
- });
- }
-
-
- function getSiteContentTypesSuccessHandler(data) {
- var jsonObject = JSON.parse(data.body);
- var selectContentTypes = document.getElementById("selectContentTypes");
-
- if (selectContentTypes.hasChildNodes()) {
- while (selectContentTypes.childNodes.length >= 1) {
- selectContentTypes.removeChild(selectContentTypes.firstChild);
- }
- }
-
- var results = jsonObject.d.results;
- for (var i = 0; i < results.length; i++) {
- var selectOption = document.createElement("option");
- selectOption.value = results[i].Name;
- selectOption.innerText = results[i].Name;
- selectContentTypes.appendChild(selectOption);
- }
- }
-
- function getSiteContentTypesErrorHandler(data, errorCode, errorMessage) {
- alert("Could not get site content types: " + errorMessage);
- }
Deploy the App
- Click on Run Project.
- The app will be packaged, deployed and launched.
- Click on “Click here to launch your app in a new window”.
- Click on Trust it.
- All the host site content types are displayed.
Summary
Thus in this article you saw how to get all the site content types using the REST API in SharePoint 2013 Online.