Introduction

I am introducing Office application development in Visual Studio 2013 Preview. As I described in my previous article, Office development is done by Office developer tools. One feature of Office development is Web Integration with Office Apps and using the this feature you can crate an application in Visual Studio for your Office 2013 component.

In that context, you can create various applications for Office in Visual Studio 2013 Preview. You can create the following apps:

Use of Office apps

Mail apps for Outlook

Mail apps can create compelling user experiences by accessing contextual information from Outlook items and with the help of that data you can retrieve extra information from a web server. You must host your web app on the server for publishing your app.

Packaging and Publishing App

To publish your app, you need to choose some settings in the publish wizard. Visual Studio generates all files necessary for publishing an app to SharePoint.

Task Pane or Content App

You can create a task pane app or content app for Word or Excel. The example of creating a task pane app is given below:

  1. Prerequisites

    For getting started, you must have the following components:
    • Visual Studio 2013 Preview
    • Word 2013
    • Excel 2013
  2. Overview

    At first, we'll create an app and execute it. After creating and executing, we'll perform the following tasks:
    • Write data to the current selection in the worksheet.
    • Read data from the current selection and display it in app the User Interface.
  3. Project Creation for the app

    For project creation, you need to use the following procedure.

    Step 1: Open Visual Studio 2013

    Start Page.jpg

    Step 2:     "File" -> "New" -> "Project..." then select "Office/SharePoint" -> "Apps".

    OfficeApp.jpg

    Step 3: Choose the type of your app.

    chooseoption.jpg
  4. App Development

    Visual Studio creates the project and files and folders related to the Office Development display on the Solution Explorer. The default HTML page is "Home.html" and you can either edit this page or you can add an another HTML page.

    Creating a Sample app

    Step 1:     In the page, you can write anything to display in the task pane of Excel 2013. For Example:

    <divid="content-header">

    <divclass="padding">

    <h1>Welcome Nimit in Office 2013</h1>

    </div>

    </div>

    Step 2: For executing, press F5. This will open Excel 2013:

    WelcomePage-in-Excel2013.jpg

    Step 3: Stop debugging.

    Generating Operations in app

    I am creating some operations in my app. For this you can either remove your div and create a new one or leave it and add another. For example:

    <divid="content-main">

    <divclass="padding">

    <p><strong>Getting Started:</strong></p>

    <buttononclick="WriteData()"> Write Data </button><br/>

    <buttononclick="ReadData()"> Read Data </button><br/>

    <span>Results:</span><divid="Result"></div>

    </div>

    </div>

    This will add some buttons in the task pane for performing actions, like Write Data and Read Data.

    Writing Data

    Step 1:     If you want to write some text then you need to add a JavaScript file. You can also add a new JavaScript file. For adding:

    JavaScript-ijn-Office2013.jpg

    Step 2: Now just write the code as shown in this image:

    SampleJs-in-Office2013.jpg

    Step 3: Debug the file.

    Step 4:     Click on "Write Data" to write your text to the current cell. Now if you want to write some other text then don't close the worksheet or stop debugging, otherwise you can close it.

    SampleText-in-Excel2013.jpg

    Step 5:     I am writing some other text. For this go to your JavaScript file without stopping debugging. Replace older text with the new one. For Example:

    function WriteData()

    {

    Office.context.document.setSelectedDataAsync([["I Live in Delhi"], ["Happy Friendship Day"]],function (asyncResult)

    {

    if (asyncResult.status == "failed")

    {

    WriteinPage('Error Message:' + asyncResult.error.message);

    }

    });

    }

    function WriteinPage(text)

    {

    document.getElementById('Result').innerText = text;

    }

    Step 6: Save your application. Open your Excel and Reload your task pane:

    Reload-in-Excel2013.jpg

    Step 7:     Select another cell in the worksheet and click "Write Data":

    NewWrite-in-excel2013.jpg

    Step 8:     Stop debugging.

    Performing Read Data

    Step 1:     Open your JavaScript file and write the following code below the functions you have added previously:

    function ReadData()

    {

    Office.context.document.getSelectedDataAsync("matrix",function (asyncResult)

    {

    if (asyncResult.status === "failed")

    {

    WriteinPage('Error: ' + asyncResult.error.message);

    }

    else

    {

    WriteinPage('Your Selection: ' + asyncResult.value);

    }

    });

    }

    Step 2: Debug your application.

    Step 3: Un the Excel, click on "Write Data" to write text. If the text is already selected then click on "Read Data" otherwise select the text.

    ReadingDataStep1-in-office2013.jpg

    Select the text:

    ReadingDataStep2-in-office2013.jpg

    Step 4: Stop Debugging.

  5. App Modification

    Change the Start Action Property

    If you want to run your app in Word 2013 then you must modify your app using the following procedure.

    Step 1: Select your app in Solution Explorer.

    Step 2: Go to the Properties Window. In the app, change the Start Action type to Microsoft Word.

    PropertiesWindow-in-VisualStudio-2013.jpg

    Debug Application in Word

    Step 1:     Debug your app.

    Step 2: Perform the operations "Write Data" and "Read Data" as in Excel.

    Step 3: Write Data:

    SampleText-in-Word2013.jpg

    Step 4: Read Data:

    ReadData-in-Word2013.jpg

Summary

So far we learned how to create an app, create a task pane in Office Components like (Excel 2013, Word 2013) and perform various operations. I'll post additional articles if I find more features about Office development.