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

Welcome to the series of articles on the "Napa" Office 365 Development Tools in SharePoint 2013 and Office 365. In this part we will see some details of “App for SharePoint”.

This article will help you to learn how to create a SharePoint App using Napa Tools. Apps are now everything and these days we need several apps for doing many things.

Similarly Microsoft also want it's SharePoint users to understand their requirements and build their own apps in a few clicks. When we all see some new apps, the first thing that comes in mind 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 whose installation was displayed in my previous article. So, let's tell you how to do it.

We'll see it step-by-step.

  • Go to your site contents of the site and click on the Napa Office 365 Development tool.

    App for SharePoint

  • It will ask you what kind of app you want to build, for us in this article it will be App for SharePoint.

  • Provide it a name and click Create.

    click on Create

  • You will get to the default.aspx 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 and HTML files and publish them directly on your app. We can see on the app code where to add your CSS files to use it in your app or JavaScript file to be added on the code.

    Script

  • 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. Making a reference when building an app will be very easy.

  • 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 directly deploy it to the site.

    ribbon

  • 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 the necessary updates to you 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 commands along with the preceding that is used in Napa Tools differentiated as:

      1. Global Commands
      2. Editor Commands

        command and shortcut

        shortcut

        Commands

  • So to deploy an app, click on Run Project. It will first prepare, then deploy and then it will launch.

    deploy launch

  • Here is my app deployed named SharePointApp1 giving a platform to do anything with your app.

    The app will help you to achieve all the features without deploying it using servers, you can create web parts, user apps , and so on just on a click.

    create web parts

This was an article explaining the first level of the app that can be made using Napa tools, there are more to come. Until then, keep learning.

Cheers!