Creating your SharePoint App
Question - What is an App
in SharePoint 2013?
Answer – In SharePoint 2013, you can
create app for SharePoint. Apps for SharePoint are easy-to-use, lightweight web applications that
integrate popular web standards and technologies to extend the capabilities of
a SharePoint website. There are
three types of App.
-
Provider – hosted.
-
Autohosted.
-
SharePoint-hosted.
SharePoint-hosted apps, or apps where all
components are hosted on either an on-premises or Office 365 SharePoint farm.
SharePoint-hosted apps are installed on a SharePoint 2013 website, called the
host web. SharePoint-hosted app uses only html& JavaScript.
Provider-hosted apps for SharePoint include
components that are deployed and hosted outside the SharePoint farm. They are
installed to the host web, but their remote components are hosted on another
server .Provider - hosted, uses any types of programming languages like html,
java script, .net or php.
Autohosted apps for SharePoint are
cloud-hosted apps whose remote components are provisioned and deployed for you
on Windows Azure. As with a provider-hosted app, an autohosted app for
SharePoint can interact with a SharePoint website but also uses resources and
services that are located on a remote site that is hosted by Windows Azure. The
SharePoint 2013 installation provisions and deploys these resources for you.
Step 1 – Open Visual Studio & Select App
for SharePoint 2013
Step 2 – Enter Your SharePoint site Web Url.
Step 3 – Enter User Name & Password.
Step 4 - Default "App" code is
created and let’s have a look at its content. Below are the JavaScript
libraries, css. You can use your own JavaScript libraries
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/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>
<meta name="WebPartPageExpansion" content="full" />
<!-- 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="PlaceHolderMain" runat="server">
<div>
<p id="message">
<!-- The following
content will be replaced with the user name when you run the app - see App.js
-->
initializing...
</p>
</div>
</asp:Content>
Open App.js file under scripts. This file content is
responsible for loading the Context and Web information in which the App is
running. Look at the code and it’s almost self-explanatory.
var context =
SP.ClientContext.get_current();
var user =
context.get_web().get_currentUser();
// This code runs when the DOM is ready and creates
a context object which is needed to use the SharePoint object model
$(document).ready(function () {
getUserName();
});
// This function prepares, loads, and then executes
a SharePoint query to get the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is
successful
// It replaces the contents of the 'message' element
with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name.
Error:' + args.get_message());
}
Add a New Client web Part. This will added in Pages.
Open ClientWebPart.aspx
Add your Code in .
<body>
Hello India ..
</body>
To Change Start Page, Click on AppManifest.xml and change the url of Start Page .
Build & Click on Start to Deploy App in SharePoint.
Here you will see your SharePoint hosted App.
Build & Start the project you will see your
changes.
