SharePoint 2013 Online App Development using NAPA Tool

 What is apps

‘Napa’ Office 365 Development Tools

For cretaing app MS has given  project templates in VS 2012 along with debugging tools.
Now MS gives new web based development tool called "Napa" Office 365 Development Tools.
Steps to create App with "Napa"

1. Login to the Office 365
2. Then Office 365 admin center --> developer site navigation --> Napa dev tool
3. Napa tool download available in the home page of the developer site
4. navigated to the Office apps store download site of the download
5. step by step process of installing the Napa development tool to your environment.

This will be added to the trusted list of service in the browser (IE 9 or latter version)
After installation you can find NAPA inside developer site and under the site content section.


 Creating App using Napa (We will write JavaScript code to retrieve the list/library)

1. Open the SharePoint Admin Center
2. Under the site collection, open the developer site.
3. Open the "Napa" Office 365 Development Tools from the developer Site Collection.
4. Now you will be navigated to https://www.napacloudapp.com/.
5. In the following page, you can see “What type of app do you want to build?” with App for SharePoint, Task pane App for Office, Content App for Excel and Mail App for Office project options.
6. Enter the project name and click Create.

After creating the App using Napa, the project will auto create some folders and file as shown above.

Open the Default.aspx file under the Pages folder and add HTML tag to create a dropdown list.


Write JavaScript to retrieve the list names from the current app running context and populate the list names in the dropdown list. Open the file named App.js under the folder name Scripts.


We will write a GetListsToDisplay() which get the list/library name


And now, click on the Run Project button; appear near the status bar of the Internet Explorer.

Now your project will be packaged and installed on your SharePoint server. If this project is already running, the project uninstalls the previous version and installs the latest version.

The following screen capture will show the result for the code we have written in the JavaScript.