SharePoint 2013 Apps – Part V: Build your first app for Office365 using Napa

In order to build SharePoint apps using “Napa” you need the following

When your Office 365 account is created and all artifacts are provisioned, you need a developer site. A developer site is a new site template in SharePoint 2013 which allows you to install apps that are explicitly marked as developer tools, Napa is one of these apps. To create a new site collection you have to navigate to your tenant’s administration site and open up the SharePoint administration.

napa1

 

Figure 1: Navigate to SharePoint Online Administration

 

 

napa2

Figure 2: Create a new private site collection

 

After provisioning the recently created developer site, you have to navigate to the site. Within the site open up the Site Content page and navigate to the SharePoint Store. When opening up the SharePoint Store from a developers site, only dev related apps are shown. Continue w/ installing Napa from the SharePoint store.

 

napa4

Figure 3: Filtered SharePoint Store

 

Creating a simple app w/ Napa

Because Napa is an immersive full page app, you have to launch it from the Site Contents page.

 

napa5

Figure 4: Launch Napa from the Site Contents page

After providing a proper name for the new SharePoint app you can proceed by clicking create.

napa8

Figure 5: Create a new app using the Napa app :)

Napa is offering a lightweight but great web based IDE for building SharePoint apps. As you can see there is syntax-highlighting for all common web languages such as HTML, JS, CSS and of course ASP.NET.

As you can see on the bottom left it’s powered by Visual Studio, looks like a huge step direction cloud based IDE :D #spoiler

 

napa9

Figure 6: The Napa online IDE

In this example I’ll create an part app, so we have to change the app properties, within the app properties you should also provide proper descriptions, names and images for your app.

 

napa10

Figure 7: Napa properties page

 

After setting the properties you can start w/ writing your code using all the common web languages.Only a few lines of JavaScript are required to gather the most recent images from Flickr containing the #SPC11 tag.

 

napa11

Figure 8: Sample Flickr API call

The ClientWebPart.aspx will be rendered when you’ve added the part app to any SharePoint site. So we have to reference the required JS scripts and add some HTML for presenting the images to the user.

napa12

Figure 9: HTML UI components

 

After publishing the app to your SharePoint developer site you can add the app to the SharePoint site, as you’ve done it in SP 2010 w/ legacy web parts.

 

napa13

Figure 10: Adding part apps to a SharePoint site

Finally the app will be rendered if anyone is hitting the website and the JS request pulls out all the images from Flickr.

napa14

Figure 11: SPC11 Flickr part app in action

SharePoint development has never been easier and never been more standardized than w/ the new SharePoint 2013 app model.

 

app developers, app developers, app developers

Technorati Tags: ,,
DotNetKicks-DE Image
Published Dienstag, 17. Juli 2012 14:24 von ThorstenHans
Abgelegt unter: , ,

Kommentare

# SharePoint 2013 Apps – Part V: Build your first app for Office365 using Napa - .NET rocks | SharePoint 2013 | Scoop.it

Ping Antwort von  SharePoint 2013 Apps – Part V: Build your first app for Office365 using Napa - .NET rocks | SharePoint 2013 | Scoop.it

# SharePoint Kaffeetasse 273

Dienstag, 17. Juli 2012 15:07 von Michael Greth [SharePoint MVP]

SharePoint 2013 Artikel Thorsten Hans SharePoint 2013 Apps – Part V: Build your first app for Office365

# Das neue Office ist da, meine Linksammlung passend dazu!

Dienstag, 17. Juli 2012 15:49 von Microsoft Partner Blog

Gestern Abend, 16.07. hat Microsoft-CEO Steve Ballmer in San Francisco die Customer Preview (Vorabversion

# SharePoint 2013 Apps – Part VI: Creating Provider-Hosted Apps for SharePoint 2013

Donnerstag, 19. Juli 2012 04:49 von .NET rocks

Hey guys, welcome to #6 on SharePoint 2013 App. It’s about 3:30 am Let’s get hands on guys, I’m running

# SharePoint ToolBox 53 Apps in SharePoint 2013 | SharePoint ToolBox

Ping Antwort von  SharePoint ToolBox 53 Apps in SharePoint 2013 | SharePoint ToolBox

# propecia

Freitag, 7. Juni 2013 11:12 von propecia

Ping Antwort von  propecia

Kommentar abgeben

(verpflichtend) 
(verpflichtend) 
(optional)
(verpflichtend)