Top 10 scenarios for the JavaScript API for Office

Hello Developers!

This is Juan Balmori with another post for the apps for Office blog! I am the Program Manager of the JavaScript API for Office (Office.js). I am excited to share with you top 10 scenarios for the JavaScript API for Office.

It’s great that we now have a platform that can use an iFrame in Office documents, but we needed a key piece to interact with the document data to make apps for Office even more useful. Now we have the best of both worlds―the simplicity of web development and the richness of the best productivity applications―welcome Office.js!

The following are the key scenarios for Office.js.

  1. clip_image002Visualizations: Visualizations is probably one of the most important scenarios for Office.js. Excel and Word already expose very cool out-of-the-box charts and smart art to interact with data, but they do not support all the possible ways to visualize data. A great example of visualization is the Bing Maps content app, capable of charting locations from a document into a map. What is required to creat a visualization? Well, at the minimum, linking to the data to be visualized (in order to read, write content) and subscribing to data and selection change events to refresh the chart. Also, highly desirable, is the capability of storing custom settings, such as the map mode, colors, etc. so that when the document is opened again, the app can restore them. Office.js enables these features.
  2. clip_image004Contextual content and services: Provide relevant information when contextually needed, as well as enable end users to execute specific tasks as a result of it. This pattern is especially important in Outlook since many actions can be triggered as a result of receiving an e-mail, such as getting information from products, customers, etc. The LinkedIn app in Outlook is a great example of this. This app can have access to the email address details of the recipients of an e-mail so that end users can check their LinkedIn profiles and potentially add them as LinkedIn contacts!
  3. clip_image006Data enhancement and analysis: Integrate intelligent services into Office documents, such as validating data against a master source (i.e. phone numbers or zip codes) or getting data from reliable data sources to enhance analysis in Office documents. A great example of this type of app is the “Election Tracker” template. This application gets data from a reliable source and inserts it into a table in Excel, and also offers a great way to visualize and analyze election poll data with a map capable of representing current and historic trends. Excel is and has been the premiere way of analyzing data today, and with apps for Office, it can only get better. Apps like this “Election tracker” require aggregating data into tables in Excel (from the polls) as well as binding and reacting to data additions on them in order to keep the map up to date.
  4. clip_image008Reference & research: Enable users to search and use information from Encyclopedia Britannica, Bing Images, Webster dictionary, and many other services that are literally at your fingertips inside a Word, Excel, or PowerPoint document. You don’t need to switch to those sites to get and reuse the content you are looking for; you just need to get these apps on your task pane. Generally these apps need to identify when a user is making a selection in the document and reading the selection they made to search and find relevant content. Then after the app finds the content, users can reuse the content by inserting it on the current insertion point of the document as plain text or images, or in advanced cases, in Office Open XML, or HTML formats.
  5. clip_image010Master/detail: This pattern is about providing rich information as a result of a user selection in a document. The Bing Finance app is a great example of a Master/Detail app. The app enables a user to create a portfolio of stocks on the task pane and then insert it as a table in Excel. The user can then select items on the table and the task pane will be refreshed with the latest news, quotes and details of the selected symbol. So basically, having a table in Excel, binding to it, reacting when a user is making a selection on that specific table, (not in any other part of the document J), and identifying the exact row where the user made the selection to read the data from it and update the app charts with the right country information.
  6. clip_image012Document authoring: The pattern consists in providing document authoring assistance to create great documents, such as resumes, business proposals, etc. The Avery app is a nice example of how to simplify the creation of a Word document with pre-design templates that offer a “fill-in-the-blanks" experience. To print Avery labels at home, basically the user inserts the app, searches for the available label templates. Once he finds it, he inserts the template into the document. Office.js helps the developer here by enabling writing into the document. This operation can be as simple as writing just plain text or a table, or as rich as inserting HTML or Office Open XML (OOXML) formats to write literally any possible content into a Word document (tables, images, smart art, content controls and a big etc.). The Avery app actually took this capability to the limit by exposing their templates as OOXML with advanced document markup such as margins, images, text format, etc.
  7. Document publishing: This pattern is about publishing a complete document to a service provider such as a printing or a faxing service. Office.js enables two ways of getting the entire document (in Word and PowerPoint): 1) Apps that require access to the entire text of the document, and 2) Apps that require the entire document with 100% fidelity. A good example of the first type is the Pingar Summaries App which is an app for Word capable of creating a smart summary of the current document. This app really only needs access to the plain text of the document in order to output a summary, regardless of the formatting. The eFax app on the other hand, is a Word app that will Fax the current document to the specified fax numbers. This app does require to have access to the entire document with 100% fidelity.
  8. clip_image014Content transformation: This pattern is about using Office or an external service to transform content and get an enhanced version of the original. The Nuance app is a great example of this pattern that uses an Optical Character Recognition (OCR) service in the cloud, This app runs in Word, lets the user selects a PDF file from their hard drive and then sends it to the OCR service. The OCR service scans, analyzes, and returns the file in OOXML format. The app inserts the OOXML in Word document, which is now 100% editable. This type of apps makes use of the ability of the JavaScript API for Office to read and write content in different formats, such as OOXML as in the Nuance app.
  9. Real-time and Social data: This pattern is about obtaining real-time data from a service for consumption or authoring in Office documents. The Medal Tracker and Election Tracker apps are good examples that use this pattern. Each connects to a real time service, brings the data and analyzes it in Excel. The JavaScript API for Office allows apps to insert and display the data as tables or text in Office documents.
  10. clip_image016Dynamic documents: Assist users in capturing and rendering structured data that is contained or associated with Office content. A good example for this app is an Invoice in Word. Using this app, the user selects or searches an invoice in the task pane, and then inserts the details of the invoice in the template. The metadata of an invoice (customer, invoice number, invoice line items, etc.) is modeled with content controls in a Word template and then linked to custom XML parts, and the template can potentially include repetitive structures. Using the JavaScript API for Office, developers can access to custom XML parts and update the content of the invoice dynamically by manipulating those parts.

I hope these scenario examples give you a better idea of the types of apps that you can build using the JavaScript API for Office. Let me know any comments you may have, the types of scenarios you would like to build, and what subjects you would like to see in the future.

Thanks for reading and happy coding!

Comments (3)

  1. Harold Bennett says:

    Need an example of filling in Word Bookmarks using Javascript so I can port the solution to Office 365

  2. Kwazai says:

    I wonder about the abilty to do gant and pert chart(resource loading as in MSProject) scheduling (not necessrily critical path scheduling) with the Outlook set of 'tools'. The other Outlook tools (task manager calendar appointments etc.) appears to be rich enough for a project manager tool of sorts. Most of the MAPI functions are exposed to create common folders, etc and still have the antivirii capabilities of email file transfers (1-5MB pdf and zip at least (isp's…)).

    The critical path tools would be useful too, but more in time dependent areas(construction, manufacturing) not so much for mrp,crp,etc. or designers/architects (like a glorified lawyer time and billing arrangement).

  3. Zach says:

    Good article!

    I'm creating a simple task pane app for Word. There is a button in the app UI, when user clicks it, it search strings of pattern <<xxxx>>  in the Word document and replace them with data from database.

    For example,

    'The total invoice of <<Year>> is <<TotalInvoice>>' will be 'The total invoice of 2015 is $300,000'.

    I don't know how to do the regular expression search and replace in a Word document using the Javascript API. Can you give me some hint?



Skip to main content