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.
- Adding the ‘Napa’ Add-in,
a. Login to the Developer Site.
b. Click on Site Actions Icon and click Add an App.
- Click on SharePoint Store in the left Navigation.
- Click on the Search Box on the top right corner. Type ‘Napa’ and hit enter.
- Click on the ‘Napa’ add-in icon to install the add-in.
- Check the permissions requested by the add-in and click Trust it.
- Once the add-in is installed, it will start appearing on the Site Contents page.
- Click on the App launcher icon to start the App.
- The start page looks as,
- Click on Add New Project.
- Give the project a name,
- Hit the Create Button.
- 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.
- Once you have done the changes you can deploy the app to test it, using the ‘Run Project’ button in the left navigation.
- For creating the app package click on the ‘Publish’ button on the left navigation.
- Once the app is published you can download the .app file from the App Packages library.