Note: We will be removing this sample from the site on December 15, 2016. If you’d like to keep a copy of this sample for your own reference, please download or clone the repo.

Table of contents

• Summary
• Prerequisites
• Key components of the sample
• Description of the code
• Build and debug
• Troubleshooting
• Questions and comments
• Additional resources

##Summary There are There are two parts to this sample, a task pane add-in for Excel, and a content add-in for Excel.

• The code in the task pane add-in for Excel demonstrates how to build a simple user interface that saves data to cross-session web browser storage (localStorage). It also shows how to use a dynamically generated div to surface errors to the user.

• The code in the content add-in for Excel demonstrates how to detect when the selection in the spreadsheet changes, how to get the data selected after that event, and how to monitor the shared data source for changes. It captures the data from the spreadsheet in an array, evaluates the spreadsheet data with the data from the task pane add-in, and then displays the results in a table.

This sample requires the following:

• Excel 2013.
• Visual Studio 2013 with Update 5 or Visual Studio 2015.
• Any browser that supports ECMAScript 5.1, HTML5, and CSS3, such as Internet Explorer 9, Edge, Chrome 13, Firefox 5, Safari 5.0.6, or a later version of these browsers.
• Familiarity with JavaScript, CSS, jQuery, and HTML5.

The Excel Add-in: JavaScript Communication Between add-ins sample contains the following important files:

CommunicationBetweenAddInsContent project, including:

• CommunicationBetweenAddInsContent.xml manifest
• ContentHome.js file
• ContentHome.html file
• MortgageCalculator.js file

CommunicationBetweenAddInsTaskPane project, including:

• CommunicationBetweenAddInsTaskPane.xml manifest
• TaskPaneTaskPaneHome.js file
• TaskPaneTaskPaneHome.html file
• toast.js file

1. Choose the F5 key to build and deploy the add-ins. Two instances of Excel 2013 will open, one with the content add-in (“Mortgage Calculator”) displayed and the other with the task pane add-in (“Mortgage Info add-in”) displayed.
2. In one of the two instances of Excel 2013, on the Insert tab, in the add-ins for Office group, choose the arrow below add-in, and then choose the add-in that you want to insert.
3. The other add-in will be inserted into the current instance of Excel. Both add-ins should now be inserted in the same Excel session.
4. In the content add-in (“Mortgage Calculator”), choose Connect to Data to establish a connection between the two add-ins (listening for changes in the data source).
5. In the task pane add-in, enter numbers into the two text box inputs and select an option from the drop-down list. Choose the Submit button when you have entered your data.
6. In the Excel spreadsheet, enter numbers into one or more rows in a single column. Select the rows singly or as a range in a single column. These numbers must be greater than the down payment amount in the task pane app. These numbers will be used to calculate the loan amount in the content app whenever the selection changes to include one or more of these numbers.

##Troubleshooting

If the add-in fails to install, ensure that the SourceLocation element in the CommunicationBetweenAddInsContent.xml and CommunicationBetweenAddInsTaskPane.xml files has the correct URL value for the DefaultValue attribute.

##Questions and comments##

• If you have any trouble running this sample, please log an issue.
• Questions about Office Add-in development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [office-addins].

• More Add-in samples
• Introduction to Web Storage
• Document.SelectionChanged event
• Document.getSelectedDataAsync method

Copyright (c) 2015 Microsoft. All rights reserved.