How to: Create your first task pane or content app for Word or Excel by using a text editor

apps for Office

Learn how to create a simple app for Office by using a text editor.

Last modified: February 27, 2014

Applies to: Excel 2013 | Excel 2013 RT | Excel Online | PowerPoint 2013 | PowerPoint 2013 RT | PowerPoint Online | Project 2013 | Word 2013 | Word 2013 RT

   Office.js: v1.0, v1.1

   Apps for Office manifests schema: v1.0, v1.1

In this article
Introduction
Create a Hello World app for Office
Add programming logic to the Hello World app
Additional resources

The simplest app for Office for Excel 2013 or Word 2013 consists of a manifest XML file that points to a webpage or website. This topic will show you how to create a simple app that consists of only an XML manifest and an HTML file with a text editor.

To implement this app, you need to create the following files:

  • An HTML file that implements the UI of the app.

  • An XML manifest file that defines the metadata required to display and run the app in Word or Excel.

  • A CSS file to define a style sheet for the app.

  • A project.js file that contains JavaScript programming logic that can use the JavaScript API for Office (Office.js) to perform data access operations against the content in the Word or Excel document.

The UI of the app is provided by an HTML file that can optionally provide JavaScript programming logic. This first set of steps will show you how to create a Hello World app without programming logic. After you complete a Hello World app, we'll show you how to add some programming logic that interacts with the document or worksheet content.

To create the files for a Hello World app

  1. Create a folder on your local drive named HelloWorld (for example C:\HelloWorld). Save all of the files created in the following steps into this folder.

  2. Create a file named HelloWorld.html that contains the following HTML code.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
            <link rel="stylesheet" type="text/css" href="program.css" />
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>
    
    

    This file provides the minimum set of HTML tags to display the UI of an app.

  3. Create a file named program.css that contains the following CSS code.

    body
    {
        position:relative;
    }
    li :hover
    {  
        text-decoration: underline;
        cursor:pointer;
    }
    h1,h3,h4,p,a,li
    {
        font-family: "Segoe UI Light","Segoe UI",Tahoma,sans-serif;
        text-decoration-color:#4ec724;
    }
    
    

    This file provides the style sheet for the app.

  4. Create an XML file named HelloWorld.xml that contains the following XML code.

    Important note Important

    Replace the value in the <id> tag with a GUID that you have generated yourself.

    <?xml version="1.0" encoding="utf-8"?>
    <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:type="TaskPaneApp">
      <Id>08afd7fe-1631-42f4-84f1-5ba51e242f98</Id>
      <Version>1.0</Version>
      <ProviderName>Microsoft</ProviderName>
      <DefaultLocale>EN-US</DefaultLocale>
      <DisplayName DefaultValue="Hello World app"/>
      <Description DefaultValue="My first app."/>
      <IconUrl DefaultValue=
        "http://officeimg.vo.msecnd.net/_layouts/images/general/office_logo.jpg"/>
    
      <Capabilities>
        <Capability Name="Document"/>
        <Capability Name="Workbook"/>
      </Capabilities>
    
      <DefaultSettings>
        <SourceLocation DefaultValue="\\MyShare\MyManifests\HelloWorld\HelloWorld.html"/>
      </DefaultSettings>
      <Permissions>ReadWriteDocument</Permissions>
    </OfficeApp>
    
    

    This file provides the manifest XML file for the app.

The next two procedures describe how to copy your files to a network share, and then specify that location as a trusted app catalog, so that you can test your app.

To specify a trusted location for the manifest

  1. Create a folder on a network share (for example, \\MyShare\MyManifests). Be sure that the <SourceLocation> element of the HelloWorld.xml manifest file points to this location for the .html page of the app. Save all of the files you created into this folder.

    Note Note

    Alternatively, you can save only the HelloWorld.xml manifest file to this share, and then put the .html file on a web server. If you do that, be sure that the <SourceLocation> element of the HelloWorld.xml manifest file points to the URL of the HelloWorld.html file on that server.

  2. Open a new document in Excel or Word.

  3. Choose the File tab, and then choose Options.

  4. Choose Trust Center, and then choose the Trust Center Settings button.

  5. Choose Trusted App Catalogs.

  6. In the Catalog Url box, enter the path to the network share you created in Step 1, and then choose Add Catalog.

  7. Select the Show in Menu check box, and then choose OK.

    A message is displayed to inform you that your settings will be applied the next time you start Office.

  8. Close and restart Excel or Word.

To test and run the Hello World app

  1. On the Insert tab, choose the Apps for Office.

  2. In the Insert App dialog box, choose Shared Folder.

  3. Choose Hello World app, and then choose Start.

    The app will open in a task pane to the right of the current document or worksheet.

The next set of steps will show you how to add some basic programming logic to the Hello World app so that it can interact with the document or worksheet content.

To add programming logic to the Hello World app

  1. Open the HelloWorld.html file and add the <script> tags inside the <head> tags of the file.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
            <link rel="stylesheet" type="text/css" href="program.css" />
            <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
            <script src="Program.js"></script>
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>
    

    This adds a reference to the Office.js library file that implements the JavaScript API for Office. It also adds a reference to Program.js, which is a file we’ll create to contain the programming logic for the app.

    NoteNote

    The src attribute of the <script> tag references the JavaScript API for Office (office.js) that will be externally available.

  2. Replace <p>Hello World!</p> with the lines inside the <body> tags of the file.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
            <link rel="stylesheet" type="text/css" href="program.css" />
            <script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
            <script src="Program.js"></script>
        </head>
        <body>
            <button onclick="writeData()"> Write Data </button></br>
            <button onclick="ReadData()"> Read Selected Data </button></br>
            Results: <div id="results"></div>
        </body>
    </html>
    
    

    This adds two buttons to the app UI and defines a div to display results.

  3. Create a file named Program.js that contains the following JavaScript code.

    Note Note

    Office.initialize must be initialized as a function at the beginning of the code file so that the Office.context property will be available when called from the functions that follow.

    // The initialize function is required for all apps.
    Office.initialize = function (reason) {
        // Checks for the DOM to load using the jQuery ready function.
        $(document).ready(function () {
        // After the DOM is loaded, app-specific code can run.
        // Add any initialization logic to this function.
        });
    }
    var MyArray = [['Berlin'],['Munich'],['Duisburg']];
    
    function writeData() {
        Office.context.document.setSelectedDataAsync(MyArray, { coercionType: 'matrix' });
    }
    
    function ReadData() {
        Office.context.document.getSelectedDataAsync("matrix", function (result) {
            if (result.status === "succeeded"){
                printData(result.value);
            }
    
            else{
                printData(result.error.name + ":" + err.message);
            }
        });
    }
    
          function printData(data) {
        {
            var printOut = "";
    
            for (var x = 0 ; x < data.length; x++) {
                for (var y = 0; y < data[x].length; y++) {
                    printOut += data[x][y] + ",";
                }
            }
           document.getElementById("results").innerText = printOut;
        }
    }
    
    
  4. Redeploy the app files as described in the "To specify a trusted location for the manifest" procedure.

  5. Insert and test the app as described in the "To test and run the Hello World app" procedure.

Show:
© 2014 Microsoft