Name: Excel-Add-in-JavaScript-SalesTracker
Owner: Office Developer
Description: Display data in Excel tables and charts, and programmatically change the formatting of tables and charts.
Created: 2016-09-26 21:05:38.0
Updated: 2018-05-20 07:44:07.0
Pushed: 2018-01-31 20:32:18.0
Size: 150
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Learn how to programmatically format tables and charts, and how to import data to a spreadsheet, in Excel Web Add-ins. Compare with how these tasks are done in the Tables and Charts VSTO Add-in. This Excel web add-in also shows how to use the design samples from Office Add-in UX Design Patterns Code.
November 2, 2016:
For more information about the design patterns, see UX design pattern templates for Office Add-ins. And for sample implementations, see Office-Add-in-UX-Design-Patterns-Code.
The Office Fabric date picker control has a dependency on the PickADate library. Take the following steps after you have downloaded this sample.
\pickadate.js-3.5.3\lib
folder.compressed
and themes-source
folders, to the project folder: SalesTrackerWeb\Scripts\PickADate
.The code that uses the Office and Word JavaScript APIs is in Home.js and Helpers.js. All of the styling is done with HTML5 and the stylesheet files: settings.css, tab.bar.css and several Office Fabric css files.
Compare this code with the code in Tables and Charts. Note the following:
*_CheckedChanged
methods in the TableAndChartPane.cs file.) In this web add-in, the property is in a JavaScript object that is passed to the setTableOptionsAsync
function. (See the setTableColor
function in the helpers.js file.)ListObjectHeaders_Click
method in the VSTO sample with the toggleColumnVisibility
function in the web add-in.ChartStyle
property. The integer refers to a collection of style settings. See the TableAndChartPane.cs file in the VSTO add-in. In an Excel web add-in you replace the chart with a new one that has the desired style. You can record the current style settings for the chart in a JavaScript object as this sample does in the home.js file. To change a single style setting, your code changes it in the settings object which is then passed to the changeChart
function in helpers.js.switch-case
structure is used to assign a value to a type property. Compare the ChartStyleComboBox_SelectedIndexChanged
method in the VSTO sample with the setChartType
method in this web sample.setChartDataSource
method in the helpers.js file. In a VSTO add-in, your code specifies which column in the table is to be used as the data source by calling the chart object's SetSourceData
function. See the chartDataSourceComboBox_SelectedIndexChanged
method.getSalesData
method in Helpers.js. VSTO add-ins use a WebClient in C# to access online resources. See the GetDataUpdatesFoOneDataSource
method in TableAndChartPane.cs.We'd love to get your feedback about this sample. You can send your feedback to us in the Issues section of this repository.
Questions about Microsoft Office 365 development in general should be posted to Stack Overflow. If your question is about the Office JavaScript APIs, make sure that your questions are tagged with [office-js] and [API].
Copyright (c) 2016 Microsoft Corporation. All rights reserved.
This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.