SharePoint 2013 – How to create basic app for SharePoint using “Napa” Office 365 Development Tools

There are number of ways available to create app for SharePoint.

(1) Using “Napa” Office 365 Development Tools

(2) Using Visual Studio 2012 RC

In previous post for SharePoint 2013 Development – Installing and Configuring Visual Studio 2012 RC I tried to explain, how to configure Visual Studio 2012 RC for developing Office and SharePoint Apps.

In this post I will explain how to create a basic app for SharePoint by using “Napa” Office 365 Development Tools.

Prerequisites: You should have An Office 365 account and The “Napa” Office 365 Development Tools app

Note: For more information about how to set up an Office 365 account, see Sign up for an Office 365 Developer Site. For more information about Office 365 development, see Sign up for an Office 365 Developer Site.

Overview: In this post , I will try to explain a simple app which allows me to create List and Lists Item.By using “Napa” Office 365 Development Tools, you can create your apps for SharePoint inside your browser instead of in Visual Studio. At any time, you can download your project and open it in Visual Studio for more advanced scenarios. (This post uses browser interface to create app)

I am assuming, you have setup your Office 365 Developer Site. Once you done with that, your screen would look like as below screen:

Install and deploy “Napa” Office 365 Development Tools: “Napa” Office 365 Development Tools is a browser-based authoring tool that makes developing apps for Office and SharePoint quick and easy. You cannot use the “Napa” Office 365 Development Tools tools to create provider-hosted or autohosted apps for SharePoint, but you can use them to create SharePoint-hosted apps. And because you can download the solutions that you create with the “Napa” Office 365 Development Tools tools and open them in Visual Studio 2012, you can use “Napa” Office 365 Development Tools as a way to get started with developing any kind of app for SharePoint.

To Install and deploy it, Click on the Get Tools to Build Apps tile (I have already implemented this step, so you can not see this option in above screen)

On the details page of the “Napa” Office 365 Development Tools app, choose ADD IT to install the app.

Choose the Trust It button in the next window.

It may prompt for, give your account detail.

After installation is complete click on the “Napa” Office 365 Development Tools icon on the All Site contents page to launch “Napa” Office 365 Development Tools.

How to Create an app for SharePoint Project: Click on “Add New Project” and Choose the App for SharePoint tile, name the project “My SharePoint App” for SharePoint, and then choose the Create button.

The code editor opens and shows the default webpage, which already contains some sample code that you can run without doing anything else.

How to add Controls to Home Page:

Once the project is created, you can see on the left side of the page under the Pages folder, choose the Default.aspx page if it isn’t already selected.

In the PlaceHolderMain section, add appropriate code under the existing HTML. (I will update code and .js file later on)

Run it:

We are done with the first part of the UI and code is in place, so go ahead and run the app to verify whether it works.

At the bottom of the page, choose the run() button.

The app is packaged, deployed, and installed on your Office 365 Developer site.

After installation, the app for SharePoint starts. If the app doesn’t start automatically because, for example, a popup blocker is enabled, choose the app link to start the app.

When you finish, close the browser window, and then choose the Close button in Launch App window to return to the project that you were editing.

How to Share Apps: One of my blog reader post an issue “I have created a “Hello Word” application and that works fine but when i try to access the same aplication URL from another browser with same hotmail account, it says “Access denied, You are not a member of this site. ” any idea how can i share this app to public?”
I work around it and resolved it. The solution is as below:

(1) Give people access to the site by clicking on “SHARE” link and enter email address (Note: you can set permission level as well)

(2) Once you click on Share button, user will receive email notification to accept invitation.

(3) Click on “Accept your Invitation” button. It will redirect you to below screen, it will ask you to use your hotmail account or userid (if you have)

(4) Once you click on selected area from above screen, it will ask you to enter hotmail account or userid.

(5) I have used my hotmail account for login, so it will redirect me to hotmail sign in page, where i need to give my hotmail credentials.

(6) That’s it. I am able to access the shared “Developer Site” using my hotmail account now.

Now you can access all available Apps form this site.

7 comments

  1. I have created a “Hello Word” application and that works fine but when i try to access the same aplication URL from another browser with same hotmail account, it says “Access denied, You are not a member of this site. ” any idea how can i share this app to public?

  2. I just want to mention I am beginner to blogging and absolutely loved your web page. Almost certainly I’m want to bookmark your site . You certainly come with excellent article content. Regards for sharing your web site.

  3. Excellent post at SharePoint 2013 – How to create basic app for SharePoint using “Napa” Office 365 Development Tools SharePoint Solutions. I was checking continuously this blog and I’m impressed! Very helpful info specifically the last part 🙂 I care for such info a lot. I was seeking this particular info for a long time. Thank you and good luck.

  4. Hi – Thanks for the nice post. I developed a simple app and it works fine in its own page ( i.e. default.aspx page). When I try to consume this app (i.e. add the app to some page) – the app doesnt work – the document.ready function isnt calling the sharePointReady function -wondering if i am missing something very simple – if you can help –

  5. It truly is fantastic a chance to make some programs for future years and it’s time to be very glad. I’ve truly check out this release in case I may I need to advise people some appealing items or suggestions. Maybe you may create subsequent content articles mentioning this information. I wish to understand far more reasons for having this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s