avatar Bipul Raman Engineer | Speaker

Developing SharePoint App on Office365 : Part 2 - SharePoint hosted Apps
Posted by Bipul Raman on July 12, 2015.
It is an application hosted on the same SharePoint environment but on a different sub-domain which is accessible through Site Contents of the Site collection.

Creating a SharePoint hosted app

  1. Create a new project by selecting this option as described in screenshot: 
  2. Enter your SharePoint Site URL and select hosting as SharePoint-hosted as described in below screenshot
  3. A login box will appear asking to Sign-In to Office 365 Account. Follow that and login using that. It will create a connection of your project to your SharePoint online site on office 365
  4. Code your frontend design part in /Pages/Default.aspx and Logic part in JavaScript Object Modem ( JSOM) at /Scripts/App.js
    Make sure that these frameworks has been referred in the aspx page:
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <
    script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/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" src="/_layouts/15/SP.RequestExecutor.js"></script>
    Note: The sequence of these JS Frameworks should be as it is.
  5. Open AppManifest.xml and set the permission as described in screenshot. Permission may be anything e.g. - read, write, full control based on the requirement of your app. 
  6. Right Click on solution and click on “Deploy Solution”
  7. A new tab will be opened in the browser and it will be asking permission to trust the application. Click on “Trust It” and move ahead. 
  8. Your SharePoint Hosted App is ready to use.

Points to Observe: 

  • Site Collection URL: https://example.sharepoint.com
  • SharePoint App URL: https://example-57a0f87c87fb7.sharepoint.com/SharePointApp1/Pages/Default.aspx?SPHostUrl=https%3A%2F%2F example%2Esharepoint%2Ecom&SPLanguage=en%2DUS&SPClientTag=0&SPProductNumber=15%260%3E40%2E1216&SPAppWebUrl=https%3A%2F%example%2Dd57a0f87c87fb7%2Esharepoint%2Ecom%2F SharePointApp1
  • Never remove query strings from the App URL while accessing the App or saving it contains SPHostURL and SPAppWebUrl and other info in the absence of which App may not work.