Office 365 – SharePoint Online: Creating basic SharePoint Hosted App

Office 365 – SharePoint Online: Creating basic SharePoint Hosted App
5 votes, 5.00 avg. rating (98% score)

Introduction

Apps for SharePoint are self-contained pieces of functionality that you write to extend the capabilities of SharePoint websites to solve well-defined business problems. An app for SharePoint You can say it’s just a replacement of Sandbox solution in earlier version. An App for SharePoint can have SharePoint component or remote component. One of the best feature in SharePoint apps it’s not using the SharePoint server object model; it means it’s not running on SharePoint server. Server side code completely replace with client side code (E.g. CSOM/JSOM/REST Api). It is faster because it runs at client side

What are covered in this snippet

  • Types of SharePoint apps intro
  • Full procedure of How to Create Basic SharePoint Hosted App



Types of Apps

In SharePoint/office 365 you have two types (In Starting it was there types but Microsoft has deprecated “Auto Hosted” App) of apps.

SharePoint Hosted Apps

You can create “SharePoint Hosted App” using JSOM and Rest Api, Using SharePoint hosted apps you can’t do remote event receiver and Timer job. It won’t connect with any other language (Java, C#, PHP). SharePoint-hosted apps consist almost entirely of SharePoint components in an app web. They are sometimes said to have their center in SharePoint.

Provider Hosted Apps

SharePoint-hosted app can also be in a provider-hosted app. But provider-hosted apps are distinguished from SharePoint-hosted apps because they include at least one remote component; such as a web application, service, or database that is hosted externally from the SharePoint farm or SharePoint Online subscription. This could be a server in the same corporate network as a SharePoint farm or a cloud service. The external components can be hosted on any web hosting stack, including the Linux, Apache, MySQL, PHP.

Create Basic SharePoint Hosted App

· Open visual studio Template with run as administrator

· Click on “File”

· Click on “New”

· Click on “Project”


image

You will pop up with below window


image

 

· Expand Installed

· Expand Template

· Expand Visual C#

· Expand Office/SharePoint and select Apps

· Select the “Apps for SharePoint 2013” and enter the Name of Apps “AdiCodeApps”

· Click ok.

You will pop up with below window


image

· Enter the SharePoint site url where you want to deploy the site

· Select the radio button as SharePoint hosted apps

· Click on Next

· It will pop up with user credential window as below, Enter the user site collection admin credential.


image

· Click on sign in

· It will pop up with below window select “SharePoint Online” radio button and click finish.


image

· Wait for a while then you can see your project as below window


image

· You have two files “App.js” and “Default.aspx”.

· You can write all the designer part in Default.aspx and all the backend functionality in “App.js”

· You can see one more file “Appmenifest.xml”, you can set all the permission, version and page start up as below screen shots.


image

· Permission Section


image

· Copy the below Code and paste it into the “Default.Aspx”

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ 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" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- 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="../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">
    Sharepoint 0ffice 365 Apps 
</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">
            Hellow World 
        </p>
    </div>

</asp:Content>

Copy The below code and paste it into the “App.Js”

'use strict';

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());
}

• Save and Run the project

• You have to enter the user credential and click on signing • It will Pop up with below window


image

· Copy the url you can see its different from our host url

· Your host web url is

“https://adicode.sharepoint.com/sites/AdiCodeDev”

· App web url you can see it with extra id under it “-a84a8a54dd1934”

https://adicode-a84a8a54dd1934.sharepoint.com/sites/AdiCodeDev/AdiCodeApps/Pages/Default.aspx

· You can say it’s running outside of your SharePoint environment.

· Open the Host web url “https://adicode.sharepoint.com/sites/AdiCodeDev

· Click on Site content in left navigation

· You can see your app installed under site content as below screen shots


image

Conclusion

We are now ready with our first basic SharePoint Hosted app. Next article will be how to create custom list in SharePoint Hosted app unde App Web. Hope you enjoyed the post. Happy coding :)

October 28, 2015 · Adi · No Comments
Posted in: Apps, Office 365, SharePoint 2013, SharePoint Online

Leave a Reply

What is 7 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)