SharePoint App Using Napa Development Office 365 Tools

Here are the steps:

The following are the steps to create a new app and add the desired script to perform the operation.

1. Go to office 365 site Home page. Click on Sites settings gear icon and click Site contents.
   
   
2. In Site Contents page select “Napa” Office 365 Development Tools. Here we are using Napa tools to develop SharePoint app. Before that you have to add a Napa Office 365 Development Tools app in your site to create a new app. Click on add an app.
   
   
   
   
3. New search window opens to display matching your apps on SharePoint Store. Click on 1 result in the SharePoint Store.
   
   
   
   
4. It redirects to the SharePoint app Store displaying app that is matching with your search criteria. Click Napa office 365 Development Tools to add into our site.
   
   
   
   
5. If you already added this app into your SharePoint site, it displays the message, otherwise click ADD IT button. It gets added into our SharePoint site:
   
   
   
   
6. This way we added Napa tool app into our existing site.
   
   
   
   
7. Click on Napa tool to create a new and click Add New Project.
   
   
   
   
8. There are certain types of app type listed to build. Select App for SharePoint and enter Project name and click Create button.
   
   
   
   
9. Tool contains left navigation that shows content, images, pages and scripts where we can add images, javascript files and apply reference into the default page. Default page show added css, js file reference in the following figure:
   
   
   
   
10. HTML content need to be placed in Main content placeholder.
    
    
    
    
11. To build the new app click “Run Project”. App contains default App.js and default.aspx page script which display the current user name into newly created app. Go to Site Home page and click on newly created app. The following figure displays the current username
    
    .
    
    This way we can create a new SharePoint app using Napa development office 365 tools.