Here i am going to demonstrate how to create a Auto-hosted SharePoint 2013 app using client side object model. I have deployed this app in SharePoint 2013 online environment. I used the Visual Studio 2013 to build this app.
Let's start
Start visual studio 2013, click File ->New->Project. Select the Apps template and select App for SharePoint 2013 as shown below and give it a proper name.
Specify the URL of SharePoint Site where you want to deploy this app and choose Autohosted as shown below
This will create as solution with two project as shown below
Every autohosted app have two projects, One Project contains the App itself and other web based project contains the code, pages and other logic.Open the default.aspx page under the web project to add html and code you want.
I have created this app that shows the current logged in user name. In the default.aspx page put the below html code.You must use the Jquery file in order to render the chrome container. The below java script creates chrome and app setting link and contact URL's
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
var hostweburl;
// Load the SharePoint resources.
$(document).ready(function () {
// Get the URI decoded app web URL.
hostweburl =
decodeURIComponent(
getQueryStringParameter("SPHostUrl")
);
// The SharePoint js files URL are in the form:
// web_url/_layouts/15/resource.js
var scriptbase = hostweburl + "/_layouts/15/";
// Load the js file and continue to the
// success handler.
$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)
});
// Function to prepare the options and render the control.
function renderChrome() {
// The Help, Account, and Contact pages receive the
// same query string parameters as the main page.
var options = {
"appIconUrl": "../Images/AppIcon.png",
"appTitle": "My First Test App",
"appHelpPageUrl": "Help.html?"
+ document.URL.split("?")[1],
"settingsLinks": [
{
"linkUrl": "specify any link url/",
"displayName": "display of link url "
},
{
"linkUrl": "mailto:specify your mail",
"displayName": "Contact us"
}
]
};
var nav = new SP.UI.Controls.Navigation(
"chrome_ctrl_placeholder",
options
);
nav.setVisible(true);
}
// Function to 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("&");
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>
<form id="form1" runat="server">
<div id="divSPChrome"></div>
<div id="chrome_ctrl_placeholder"></div>
<asp:Label ID="lbltitle" runat="server"></asp:Label>
<asp:Button Text="Click this" ID="btnclick" runat="server" OnClick="btnclick_Click" />
</form>
</body>
In defaault.aspx.cs use the below code on button click event use this code
protected void btnclick_Click(object sender, EventArgs e)
{
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
clientContext.Load(clientContext.Web.CurrentUser);
clientContext.ExecuteQuery();
lbltitle.Text = "Welcome "+clientContext.Web.CurrentUser.Title;
}
}
Double click on the AppManifest.xml and set the Query string as shown below.
Now build web project and then build the app project itself. Now right click on the first project i..e. app project and select Publish
This will open the screen and then select publish and then click publish the app. Now your app is ready to be uploaded to app catalog. App contains the .app extension file and upload this file to your app catalog on SharePoint Online environment or on premises.
On any site choose add an app from the top and then choose app from your organizations and then select the newly uploaded app. Test it and make changes accordingly.
Please let me know if you face any issue. Happy coding, cheers :)
Let's start
Start visual studio 2013, click File ->New->Project. Select the Apps template and select App for SharePoint 2013 as shown below and give it a proper name.
Specify the URL of SharePoint Site where you want to deploy this app and choose Autohosted as shown below
Every autohosted app have two projects, One Project contains the App itself and other web based project contains the code, pages and other logic.Open the default.aspx page under the web project to add html and code you want.
I have created this app that shows the current logged in user name. In the default.aspx page put the below html code.You must use the Jquery file in order to render the chrome container. The below java script creates chrome and app setting link and contact URL's
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
var hostweburl;
// Load the SharePoint resources.
$(document).ready(function () {
// Get the URI decoded app web URL.
hostweburl =
decodeURIComponent(
getQueryStringParameter("SPHostUrl")
);
// The SharePoint js files URL are in the form:
// web_url/_layouts/15/resource.js
var scriptbase = hostweburl + "/_layouts/15/";
// Load the js file and continue to the
// success handler.
$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)
});
// Function to prepare the options and render the control.
function renderChrome() {
// The Help, Account, and Contact pages receive the
// same query string parameters as the main page.
var options = {
"appIconUrl": "../Images/AppIcon.png",
"appTitle": "My First Test App",
"appHelpPageUrl": "Help.html?"
+ document.URL.split("?")[1],
"settingsLinks": [
{
"linkUrl": "specify any link url/",
"displayName": "display of link url "
},
{
"linkUrl": "mailto:specify your mail",
"displayName": "Contact us"
}
]
};
var nav = new SP.UI.Controls.Navigation(
"chrome_ctrl_placeholder",
options
);
nav.setVisible(true);
}
// Function to 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("&");
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>
<form id="form1" runat="server">
<div id="divSPChrome"></div>
<div id="chrome_ctrl_placeholder"></div>
<asp:Label ID="lbltitle" runat="server"></asp:Label>
<asp:Button Text="Click this" ID="btnclick" runat="server" OnClick="btnclick_Click" />
</form>
</body>
In defaault.aspx.cs use the below code on button click event use this code
protected void btnclick_Click(object sender, EventArgs e)
{
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
clientContext.Load(clientContext.Web.CurrentUser);
clientContext.ExecuteQuery();
lbltitle.Text = "Welcome "+clientContext.Web.CurrentUser.Title;
}
}
Double click on the AppManifest.xml and set the Query string as shown below.
Query string tokens are used to get some properties like host site URL, logo URL etc on the app page. We can use these token in java script or client object model. For more on this read at http://msdn.microsoft.com/en-us/library/office/jj163816(v=office.15).aspx
Also on the permissions tab set the appropriate permission setting for this app
Now build web project and then build the app project itself. Now right click on the first project i..e. app project and select Publish
On any site choose add an app from the top and then choose app from your organizations and then select the newly uploaded app. Test it and make changes accordingly.
Please let me know if you face any issue. Happy coding, cheers :)
