"Napa" Office 365 Development Tools in SharePoint 2013 & Office 365 - Part 3

Before reading this article, kindly read the previous parts of this series:

• Napa - Office 365 Development Tools in SharePoint 2013 & Office 365 - Part 1
• Napa - Office 365 Development Tools in SharePoint 2013 & Office 365 - Part 2

Welcome to Part 3 of the series on "Napa" Office 365 Development Tools in SharePoint 2013 & Office 365. In this part,  we will see some details on “Task pane app for Office”.

This article will help you to learn how to create a Task Pane app using Napa Tools. Apps are everything these days in this techie world. We need several apps for doing many activities in our daily life.

Similarly Microsoft also want its users to understand their requirements and build their own apps in a few clicks. As I say when we all see some new apps, the first thing we think of a techie is “Even I want to make an app” but people either get carried away or are not able to determine how to start.

Here in this article we will see how to make an app using Napa Tools, we started with its installation in my first article. So, let's keep you excited and show you how to do it.

We'll see it through step-by-step approach as in the following.

• Go to your site contents of the site and click on the Napa Office 365 Tool.
  
  
  
  
• It will ask you what kind of app you want to build, for us in this article it will be a Task pane app for Office.
  
  
• Provide it a name and click Create.
  
  
• Once you click on create, you will get the app as in the following  screenshot:
  
  
  
  
• You will get to the Office.css page of your app displaying the code behind. This app doesn't need an external interface or software. It will use your browser.
  
  
• Here this is like a code editor where you can put your JavaScript, JSON, HTML files, CSS files and publish them directly on your app.
  
  
  
  
• As we have a pattern to write code on a presentation layer in Visual Studio, a similar way can be used in Napa where you can define your CSS folders, image folders, pages, scripts and so on as in the screen above and making a reference when building an app will be very easy.
  
  
• So you can define your code as Content, Images, Office documents and Scripts here and you can also create new levels depending on your requirements.
  
  
• Then on the left we have the ribbon on the tool that will help us to deploy our app without any PowerShell or any WSP. It will deploy it to your site directly.
  
  
  
  
• Lets' see all the options on the ribbon.
  
  
  1. Explore: You can explore the code.
  2. Search: Search for some functions within the code.
  3. Properties: Properties of the app.
  4. Run Project: Once you make all necessary updates to the code, click on the Play button that states “Run Project”. It will deploy your app.
  5. Retract App: Retract the app.
  6. Open in Visual Studio: You can open the same code in Visual Studio.
  7. Share Project: You can share this file among your colleagues.
  8. Publish: To publish it.
  9. Quick Open.
     
     The following are the other commands along with the preceding that is used in Napa Tools differentiated as:
     
     
     1. Global Commands
     2. Editor Commands
        
        
        
        
        
        

• So to deploy an app, click on Run Project. It will first prepare and deploy, then it will launch.
  
  
  
  
• Once deployed the app will be ready to use.
  

Here in this article we saw the third kind of an app that can be made using Napa tools, there are more to come. Until then, keep learning.

Cheers!