Creating SharePoint Add-in Using ‘Napa’

Napa is an Office 365 Development tool, introduced by Microsoft to facilitate development on the fly. In this article we will setup the Development Add-in on the SharePoint online site collection and develop a sample SharePoint hosted App (Add-in).

Note: SharePoint Apps are now called SharePoint Add-in, hence I would be using the two words interchangeably in this article.

As we already know, ‘Napa’ is a Development Add-in available to be installed on your SharePoint site, it does has some limitations. Talking from SharePoint Add-in perspective, we can only create SharePoint hosted add-in using this tool.

Firstly, we need to have SharePoint online site collection setup with a ‘Developer Site’ Template. This is needed because the ‘Napa’ add-in can only be installed to the Developer Site.

1. Adding the ‘Napa’ Add-in,
   
   a. Login to the Developer Site.
   b. Click on Site Actions Icon and click Add an App.
   
   
   
   
2. Click on SharePoint Store in the left Navigation.
   
   
   
   
3. Click on the Search Box on the top right corner. Type ‘Napa’ and hit enter.
   
   
4. Click on the ‘Napa’ add-in icon to install the add-in.
   
   
   
   
   
5. Check the permissions requested by the add-in and click Trust it.
   
   
   
   
6. Once the add-in is installed, it will start appearing on the Site Contents page.
   
   
   
   
7. Click on the App launcher icon to start the App.
   
   
8. The start page looks as,
   
   
   
   
9. Click on Add New Project.
   
   
10. Give the project a name,
    
    
    
    
11. Hit the Create Button.
    
    
12. The project is created with the Default SharePoint hosted app template.
    
    a. It contains a default.aspx page.
    b. ClientWebPart.aspx for the App part creation.
    c. Folders: Content, Images, Pages, Scripts (Names self-explanatory about the content).
    d. All the UI (HTML) changes go in the default.aspx page and script changes are done in the App.js file inside the Scripts folder.
    
    
13. Once you have done the changes you can deploy the app to test it, using the ‘Run Project’ button in the left navigation.
    
    
14. For creating the app package click on the ‘Publish’ button on the left navigation.
    
    
    
    
    
    
15. Once the app is published you can download the .app file from the App Packages library.