Office 365: How to Create an App For Outlook Web App Using Napa Tool

The following describes how to sign up for an Office 365 Developer Site.

Be sure you have access to an Office 365 Developer Site. Here are three ways to get one:

  • Are you an MSDN subscriber? Visual Studio Ultimate and Visual Studio Premium with MSDN subscribers receive an Office 365 Developer Subscription as a benefit.

  • Do you have one of the following Office 365 subscription plans?

    • Office 365 Midsize Business
    • Office 365 Enterprise E1, E3, E4, or K1
    • Office 365 Education A2, A3, or A4
    • Office 365 Government G1, G3, G4, or K1

    If so, you can provision a Developer Site from the Office 365 admin center. For more information, see How to: Create a Developer Site within your existing Office 365 subscription.

  • You can either start with a free 30-day trial, or buy an Office 365 developer subscription (with one user license for either option) by using one of the following links. This subscription costs $99.00 per year.

Please refer to Sign up for an Office 365 Developer Subscription and set up your tools and environment for more details.

The following describes how to install the “Napa” Office 365 Development Tools into your developer site.

The "Napa" Office 365 Development Tools is a browser-based authoring tool that makes developing apps for Office and SharePoint quick and easy. You can't use the "Napa" Office 365 Development Tools to create provider-hosted apps for SharePoint, but you can use them to create SharePoint-hosted apps.

Please refer to Install “Napa” Office 365 Development Tools to your developer site for more details.

The following describes how to create an app for Outlook Web App using the Napa Tool:

  1. Navigate to https://portal.office.com/.

  2. Click on the Build Apps link.

    build apps

  3. Click on the Build an app tile.

    Build an app tile

  4. Click on Add New Project.

    Add New Project

  5. Select Mail app for Office, enter the project name and then click on the Create button.

    Mail app for Office

  6. A new project is created with all the files as shown below.

    New project

  7. On the left navigation, right-click on the AppCompose file and then click on Delete. Note: This app will be shown only on Read message.
  8. Home.html contains the HTML contents that will be rendered as the UI for the app.

    UI for the app

  9. Home.JavaScript contains all the functions required for the app.

    Home

Deploy the app

  1. On the left navigation, click on the Run Project button.

    Run Project

  2. Enter the credentials to connect to the Outlook web app and then click on the Continue button.

    MyFirstMailApp

  3. The app is installing.

    information

  4. The app is installed successfully.

    installed successfullyy

Test the app

  1. Navigate to Office 365 developer site. URL.

  2. Click on Outlook.

  3. Click on any email message and you will be able to see the app that we installed. Click on the MyFirstMailApp link.

    email message

  4. The app displays the following information.

    App displays the following information

Summary

Thus in this article you have seen how to create an app for Outlook Web App using the Napa Tool.