Building Apps with Napa Office 365 Development Tools

In this blog post, I will demonstrate how to install Napa Office 365 Development Tools onto your Office 365 developer site and how to building apps for SharePoint and Office by using the Napa developer tools. Microsoft has recently introduced "Napa" which is the new Office 365 development tools that lets the developers to build apps for Office and SharePoint within a browser without the help of Visual Studio. Napa” is a web based free app for SharePoint so that you don't need to install anything on your machine to working with "Napa" Office 365 Development Tools.  “Napa” is an excellent way to start building apps for the new Cloud App Model.

The following steps will demonstrate how to start building apps by using the "Napa" Office 365 Development Tools.

Step 1 – Create an account in Office 365 Developer Site

In order to working with, you need to create an account in the Office 365 Developer Site. An Office 365 Developer Site is SharePoint 2013 Preview site which can use for building and deploying apps for Office 2013 and SharePoint 2013. You can sign up for a Office 365 Developer account from here.This will provision a SharePoint 2013 Preview Developer Site at http://{yourdomain}.onmicrosoft.com and this site will be your developer site where you can install Napa which enables you to develop apps for Office and SharePoint.

Step 2 – Install Napa to Developer Site

In order to working with Napa developer tools,  you need to install "Napa" Office 365 Development Tools onto your developer site. The below picture shows the Office 365 developer site.

image

 

In the  "Get Tools to Build Apps" tile, click “Install free development tools to build apps”

image

Click ADD IT to install the app.

image

Sign in with Microsoft account (previously known as Windows Live Id) when prompt for your credentials.

Click Trust It on the below window

image

After the installing the Napa on the developer site, you would be able to develop apps using the Napa tolls from the browser.

Step 3 - Developing Apps using Napa Office 365 Development Tools

To start developing apps using Napa, click on the "Napa" Office 365 Development Tools icon in your developer site to launch "Napa" Office 365 Development Tools. For this demo, let me choose App for SharePoint and create the project.

image

After creating the project, it will automatically add following files onto the new project

image

The new Cloud App Model is based on web standards which enables the developers to use their existing skills such as HTML, CSS and JavaScript for building apps. In this demo app, I have designed the UI by adding HTML elements onto the Default.aspx and its programming logic written in the JavaScript file App.js which implements all the actions for the events of HTML elements.

Default.aspx

   1:  <%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
   2:  <%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" language="C#" %>
   3:  <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   4:  <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   5:  <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
   6:   
   7:  <%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
   8:  <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
   9:      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
  10:   
  11:      <!-- Add your CSS styles to the following file -->
  12:      <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
  13:   
  14:      <!-- Add your JavaScript to the following file -->
  15:      <script type="text/javascript" src="../Scripts/App.js"></script>
  16:  </asp:Content>
  17:   
  18:  <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
  19:  <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
  20:   
  21:      <div>
  22:          <p id="message">
  23:              <!-- The following content will be replaced with the user name when you run the app - see App.js -->
  24:              initializing...
  25:          </p>
  26:      </div>
  27:      <br />
  28:  <div>
  29:      <button id="getListCount">Get count of lists in web</button>
  30:  </div>
  31:  <br />
  32:  <div id="starter">
  33:      <input type="text" value="List name here" id="createlistbox"/><button id="createlistbutton">Create List</button>
  34:      <p>
  35:      Lists
  36:      <br />
  37:      <select id="selectlistbox" onchange="getitems()"></select> <button id="deletelistbutton">Delete Selected List</button>
  38:      </p>
  39:       <p>
  40:      Items
  41:      <br />
  42:      <input type="text" value="item name here" id="createitembox"/><button id="createitembutton">Create Item</button>
  43:      </p>
  44:      <p>
  45:      <select id="selectitembox"></select> <button id="deleteitembutton">Delete Selected Item</button>
  46:      </p>
  47:  </div>
  48:   
  49:  </asp:Content>

To run the app, click run button on the left lower corner of the project created in Napa.

image

This will launch your app as shown in the below picture

image

The demo app is running in a new browser window as shown the below picture

image

Opening the Napa Solution from Visual Studio

You can open the Napa projects from Visual Studio 2012. To open the projects from Visual Studio, click Open in Visual Studio from the left lower corner of the Napa project window.

image

The below picture shows the project opened from Visual Studio

image 

Summary

The Cloud based app Napa lets the developers to building apps based on the new Cloud App Model. The new Cloud App Model allows the developers to build apps for SharePoint and Office which can be hosted on SharePoint, Windows Azure Web Sites or your on-premise web server.

Published Thursday, August 2, 2012 3:18 AM by shiju

Comments

# re: Building Apps with Napa Office 365 Development Tools

Thursday, August 2, 2012 10:52 AM by Pride

Highly energetic post, I loved that a lot. Will there be a

part 2?

# re: Building Apps with Napa Office 365 Development Tools

Friday, August 3, 2012 2:04 AM by Hernandez

Aw, this was a very nice post. Spending some time and actual effort to create a great article… but what can

I say… I procrastinate a lot and never seem to get anything done.

# re: Building Apps with Napa Office 365 Development Tools

Saturday, August 4, 2012 2:28 PM by Anil

Shiju,

Nice post. We shall explore some more possibilities of NAPA.

# re: Building Apps with Napa Office 365 Development Tools

Friday, August 10, 2012 12:04 AM by Heyward

I visit every day some blogs and websites to read content, but this blog offers quality based content.

# re: Building Apps with Napa Office 365 Development Tools

Monday, January 21, 2013 3:14 AM by Downing

Good post! We are linking to this great article on our website.

Keep up the good writing.

Leave a Comment

(required) 
(required) 
(optional)
(required)