Create Task Pane Office App in C#

Introduction

This article explains how to create a task pane app for Office using Visual Studio C#. We can create a task pane app without Visual Studio. If you do not have Visual Studio then you can do development in the Napa tool. The "Napa" Office 365 Development Tools app. We can use an app in Office 365 using a web browser or Office desktop client.

Office apps

We can now build our Office app with web technologies such like HTML, CSS, JavaScript, Rest API and so on. We can use HTML, ASP, PHP or an aspx page in our Office app. We can publish our app on the Office store. Microsoft has introduce cloud-based technologies for Office as Office 365. Office 365 is a subscription model.

Prerequisite to build Office App

We need the following components to build an Office app. You can build your Office app without Visual Studio.

Using Visual Studio

  1. Microsoft Visual Studio 2013 and the Microsoft Office Developer Tools for Visual Studio 2013 (March 2014 Update)
    -Or-
  2. Microsoft Visual Studio 2012 and the Microsoft Office Developer Tools for Visual Studio 2012
  3. Office 2013

Without Visual Studio

  1. Office 365 developer account
  2. If you do not have Visual Studio then you can do development in the Napa tool. The "Napa" Office 365 Development Tools app.

How to create a task pane Office app in C#?

In this article, we will create a task pane app in Excel. We will create a very simple app to create a task pane app.

Create a project for task pane app in Visual Studio 2012

  1. Open Visual Studio 2012
  2. Click "File" -> "New" -> "Project..."
  3. The New Project dialog box opens
  4. Click Templates -> Visual C# -> Office/SharePoint
  5. Expand Office/SharePoint , Choose Apps and then select “Apps for Office 2013”
  6. Provide an appropriate name for your project and click on the Ok button.
  7. In our sample, I have given the project name as “MyFirstTaskPane”. You can see it in the following screen shot.
         
                                                                                    Figure 1
  1. After clicking on Ok button, you can see the next dialog box open about choosing the type of app you want to create, such as Excel, Word, PowerPoint or Project
  2. By default Task Pane App is selected. We can select the Office application of where we want to display the task pane app.
  3. Leave the checkboxes for all selected Office applications (Excel, Word, PowerPoint and Project)
  4. Click on the Finish button.
  5. After clicking on the Finish button, you can see two projects created in the Solution Explorer. One is “MyFirstTaskPane” and “MyFirstTaskPaneWeb”.
            
                                                                                     Figure 2

Develop the task pane App

To design the functionality and develop your app, you can add your JavaScript in your aspx or HTML page, but in this example, we will go with following procedure to create a task pane app.

  1. By Default two files (“MyFirstTaskPane.js” and “MyFirstTaskPane.html”) are opened after creating the task pane project.
  2. Now, we want to create a Task Pane App.
  3. Open MyFirstTaskPane.html, find the <body> tag.
  4. In opening and closing body tags, you can see the div tag.
  5. Replace or type your content between opening and closing div tags, whatever you want to type it will display in your task pane.
  6. Add the elements "<h1> <b> My First Task Pane </b> </h1>" to your div tags .You can see them in the following screen shot.

                                                                                                                         Figure 3
  1. You can see in the HTML page that there are two input buttons created (set data and get data) in the div tag. We can get the value from the cell using the Get data button. If you want to set the value from your task pane then you can enter a value in the TextBox and click on the set data button.
  2. Run the task pane app in Excel. Press F5 to run your app. You can see the output the same as shown in the following screen shot.
           
 
                                                                                  Figure 4
Publish Office Apps

After completing your task pane app, you can publish our Office app on the Office store. I am not covering here how to publish Office Apps. You can refer to the following link.

http://msdn.microsoft.com/en-us/library/office/jj220068

Summary

In this article, we discussed how to create a task pane app in C#. After that, we saw how to use various options (Excel, Word or PowerPoint) for creating the app. See the following link to learn more about task pane apps.

Reference:
http://msdn.microsoft.com/en-us/library/office/fp142161(v=office.15).aspx

Up Next
    Ebook Download
    View all
    Learn
    View all