Create and debug an Office content app with Napa –hello world

Original address: Http://simpeng.net/office-add-in/%e4%bd%bf%e7%94%a8-napa-%e5%88%9b%e5%bb%ba%e5%b9%b6%e8%b0%83%e8%af%95%e4 %b8%80%e4%b8%aa-office-%e5%86%85%e5%ae%b9%e5%ba%94%e7%94%a8-hello-world/, for the integrity of the content of this blog, reproduced here.

Preparatory work

Developing Office Add-ins is basically the same as developing a common WEB application that Add-ins actually runs in an IFRAME embedded on the Office platform. Let's take a look at what technologies are used in Office add-ins development:

• Interactive UI and custom logic through JavaScript and mature frameworks such as jQuery;
• Using the HTTP protocol and AJAX asynchronous programming techniques to invoke the rest API or other Web services of the corresponding data source;
• Implemented using server-side scripting languages (such as ASP or PHP) that run on the server side;
• Optimize Web page performance and layout with HTML5 and CSS3.

Next, we'll show you how to develop Office add-ins with a simple example.

Microsoft offers two IDE development tools to help us develop:

• Developed on a PC that has Office 2013 (rich client) and Visual Studio 2012 (or later) installed.
• Use the Office 365 Web development tool (Napa) for development – no client software needs to be installed and a Microsoft account is required to sign in.

Here we use the second way to develop, if you have not registered a Microsoft account, please click here to register. In addition, it is worth saying that if you do not want to use VS and Napa development, you can follow the official online steps, using Notepad (obviously I did not try:)).

Start 1. Open Napa

Enter the Napa development tool by clicking on the link above and logging in with your Microsoft account.

2. Create an Office content app.

Click "Add New Item", enter the project name, select "Office content App" and click "Create".

3. Click "Run Project" to wait for the response

After creating a new content app, Napa automatically adds a simple test program, just click "Run Project" and wait for the program to be deployed.

4. Allow the browser to pop up a new window to display the WEB version of the Excel page, the App is like a chart "floating on" above.

Since this created add-in is first inserted in this Excel document, the user is informed before Add-in starts: This is the new Office application, and if you choose to launch it will have access to the contents of this document .... It also tells the user who the publisher of the app is. Users need to click "Start" to use this app.

5. After clicking "Start", the APP launches.

In theory , you can select some of the text in Excel and then click "Get data from Selection", at which point the app will show the data in the selected section in Add-in, while the API used to get the selected text in Excel is JSOM (Office.js) provided by the Office platform. You can learn more about Office platforms on different office software (Word, Excel,powerpoint, ...) on the official website. The API support provided. However, because the open Excel document is also in a read-only state during the debugging phase, it is not possible to add new data for testing (awkward O (>﹏<) o).

6. Let's take a look at the files contained in this content app project.

Home.html is the first page of the app launch (and of course, we can set the first page in the app's Manifest as needed, which will be described later). In addition, like other Web applications, we can add js,css,html, images and other web elements (not limited to static web programming technology, but also use PHP and other languages running on the server).

In addition, you can see that https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js is referenced in home.html, which is the JSOM API provided by the Office platform for interacting with documents.

RELATED LINKS

Overview of Office-related applications

Office-related applications

Introducing "Napa" –office 365 development Tools

Use "Napa" Office 365 development Tools-to-build apps for Office and SharePoint on the browser

Microsoft ' s ' Napa ': Tools for building apps for the new Office, SharePoint

Create and debug an Office content app with Napa –hello world