In previous post ‘SharePoint hosted Add-In : Read list data
: JSOM’, we saw how to create SharePoint hosted Add-In to read data from
SharePoint. In this post, we will see how to deploy SharePoint Add-In as App
Part. So that, this Add-In can be added to any page in SharePoint.
Step 1- Add new Client Web Part to your Add -In project.
Step 2- Create a new page or you can also use existing
Default.aspx page of Add-In for client web part content.
Step 3- Create a blog subsite ‘Vendor’. In App part, we will
read data from this blog posts.
Step 4- Open Client web part Element.xml file and update
Title and Description.
Step 5- Deploy your Add-In
Step 6- Add your App Part from Apps category as shown below.
Step 7- Now you can see your Add-In as App part in your
SharePoint sites page.
Code of App Part
<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
// Set the
style of the client web part page to be consistent with the host web.
(function () {
'use strict';
var hostUrl = '';
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i
< params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
link.setAttribute('href', hostUrl + '/_layouts/15/defaultcss.ashx');
break;
}
}
}
if (hostUrl == '') {
link.setAttribute('href', '/_layouts/15/1033/styles/themable/corev15.css');
}
document.head.appendChild(link);
})();
</script>
<script type="text/javascript">
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
files and continue to the successHandler
$.getScript(scriptbase + "SP.RequestExecutor.js",
execCrossDomainRequest);
});
// Function to
prepare and issue the request to get
// SharePoint data
function execCrossDomainRequest() {
// executor:
The RequestExecutor object
// Initialize
the RequestExecutor with the app web URL.
var executor = new SP.RequestExecutor(appweburl);
// Issue the
call against the app web.
// To get the
title using REST we can hit the endpoint:
//
appweburl/_api/web/lists/getbytitle('listname')/items
// The response
formats the data in the JSON format.
// The
functions successHandler and errorHandler attend the
// sucess and error events respectively.
executor.executeAsync(
{
url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Posts')/items?@target='" + hostweburl + "/Vendor'&$top=3",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: successHandler,
error: errorHandler
}
);
}
// Function to
handle the success event.
// Prints the
data to the page.
function successHandler(data) {
var jsonObject = JSON.parse(data.body);
var blogsHTML = "";
var results = jsonObject.d.results;
for (var i = 0; i
< results.length; i++) {
blogsHTML = blogsHTML + "<div><a href=\"" + hostweburl + "/Vendor/Lists/Posts/Post.aspx?ID=" + results[i].ID + "\"
target=\"_blank\">" +
results[i].Title + "</a></div><br>";
}
$('#myDiv').append(blogsHTML);
}
// Function to
handle the error event.
// Prints the
error message to the page.
function errorHandler(data, errorCode, errorMessage) {
document.getElementById("myDiv").innerText =
"Could
not complete cross-domain call: " +
errorMessage;
}
// Function to
retrieve a query string value.
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i
< params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
</script>
</head>
<body>
<div>
<div><strong> Vendors</strong></div>
<div id="myDiv"></div>
</div>
</body>
</html>
