Working with Napa Office 365 Development Tools

In my previous article I gave an introduction on how to start Office 365 development with SharePoint Online and how to Add the app into SharePoint online. In this article I will be focusing on working with Napa Office 365 Development Tools. You can go to the development portal at https://www.napacloudapp.com/. Make sure you have signed into Office 365 so the apps available for the particular environment will be displayed. 

Napa Projects Home

Click on the Add New Project link and a popup will appear. Select App for SharePoint and give a project name. (I give mine as DemoApp1). You will be navigated to the development environment. 

The Development Environment

Napa Development Environment

• The properties section allows setting Title, Name, Icons, defining the Client Web Part, Permissions and Remote Endpoints.
• The Run Project option allows running an instance of the app directly in the developer site. The app has its own sub site here.
• The Retract App option removes the currently installed app from the developer site if installed. 
• Open in Visual Studio option allows opening a copy in Visual Studio after downloading it. This lets the user select the language to be either Visual Basic or Visual C#. 
• The Share Project option gives the opportunity to share the current version of the project with public using a public link.
• The Publish option lets the user publish the app directly to the SharePoint site with an app name and a version. This also provide the opportunity to submit package to the Office store if you have a developer account. 
• The quick open option shows the recently accessed files which is similar to the Alt + tab version of the windows desktop.

The Project Explorer

If you go to the Napa Project explorer, you will find a well organized structured file explorer. There are folders named Content, Images, Pages and Scripts. 

From here on wards you can look at as a normal HTML, CSS, JavaScipt project and apply any style according to the preference. The next thing you need to know is the SharePoint JavaScript Client Side Object Model.

The Defalt.aspx file is the starting page of the project which can be changed using the project properties.

Run the project

You can run your project by clicking the 'Run Project' icon available in the menu. It will Package, Deploy and provide a link to Launch the app.