Skip to content

Commit b8ad669

Browse files
davidchesnutdavidchesnut
authored
archiving repo
1 parent 137dbe5 commit b8ad669

File tree

1 file changed

+107
-120
lines changed

1 file changed

+107
-120
lines changed

‎README.md

+107-120
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,107 @@
1-
---
2-
page_type: sample
3-
products:
4-
- office-excel
5-
- office-365
6-
languages:
7-
- javascript
8-
- csharp
9-
- javascript
10-
extensions:
11-
contentType: samples
12-
technologies:
13-
- Add-ins
14-
createdDate: 9/26/2016 2:05:38 PM
15-
---
16-
# Excel Web Add-in for Manipulating Table and Chart Formatting
17-
18-
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](https://code.msdn.microsoft.com/VSTO-Generate-tables-and-f19859b3) VSTO Add-in. This Excel web add-in also shows how to use the design samples from [Office Add-in UX Design Patterns Code](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code).
19-
20-
## Table of Contents
21-
* [Change History](#change-history)
22-
* [Prerequisites](#prerequisites)
23-
* [Design templates used in this add-in](#design-templates-used-in-this-add-in)
24-
* [Get the PickADate library](get-the-pickadate-library)
25-
* [Run the project](#run-the-project)
26-
* [Compare this Excel web add-in code with the VSTO add-in sample](#compare-this-web-add-in-code-with-the-VSTO-add-in-sample)
27-
* [Questions and comments](#questions-and-comments)
28-
* [Additional resources](#additional-resources)
29-
30-
## Change History
31-
32-
November 2, 2016:
33-
34-
* Updated code sample to use Fabric JS 1.2.0
35-
* Initial version.
36-
37-
## Prerequisites
38-
39-
* Excel 2016 for Windows (build 16.0.6727.1000 or later), Excel Online, or Excel for Mac (build 15.26 or later).
40-
* Visual Studio 2015
41-
42-
## Design templates used in this add-in
43-
44-
- Landing page
45-
- Brand bar
46-
- Tab bar
47-
- Settings
48-
49-
For more information about the design patterns, see [UX design pattern templates for Office Add-ins](https://dev.office.com/docs/add-ins/design/ux-design-patterns). And for sample implementations, see [Office-Add-in-UX-Design-Patterns-Code](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code).
50-
51-
## Get the PickADate library
52-
53-
The Office Fabric date picker control has a dependency on the PickADate library. Take the following steps *after* you have downloaded this sample.
54-
55-
1. Download version 3.5.3 of the library from [pickadate.js](https://github.com/amsul/pickadate.js/releases/tag/3.5.3).
56-
2. Unzip the package and navigate to the `\pickadate.js-3.5.3\lib` folder.
57-
3. Copy all the files and folders in that folder, *except* the `compressed` and `themes-source` folders, to the project folder: `SalesTrackerWeb\Scripts\PickADate`.
58-
59-
## Run the project
60-
61-
1. Open the Visual Studio solution file.
62-
2. Press **F5**.
63-
3. When Excel opens, click the **Track sales** button on the right end of the **Home** ribbon. The add-in opens in a task pane.
64-
65-
#### Import data
66-
67-
4. On the **Home** page, enter one of the following product names (case sensitive) in the **Product name** box: **Keyboard**, **Mouse**, **Monitor**, **Laptop**,
68-
5. Use the date picker control to pick a date no later than September 16th, 2016, because there are no sales after this date in the sample data.
69-
6. Select the **Get sales data** button. After a few seconds, the workbook will switch focus to a new **Sales** worksheet.
70-
71-
#### Change table settings
72-
73-
1. Select **Table** on the tab bar.
74-
2. Deselect radio buttons as needed, to hide the corresponding columns.
75-
3. Select a color for the table.
76-
77-
#### Change chart settings
78-
79-
1. Select **Chart** on the tab bar.
80-
2. Select a data source for the chart.
81-
3. Select a chart type.
82-
4. Select a chart color theme.
83-
84-
## Compare this Excel web add-in code with the VSTO add-in sample
85-
86-
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.
87-
88-
Compare this code with the code in [Tables and Charts](https://code.msdn.microsoft.com/VSTO-Generate-tables-and-f19859b3). Note the following:
89-
90-
91-
- Excel Web add-ins are supported across several platforms including Windows, Mac, and Office Online. VSTO add-ins are only supported on Windows.
92-
- Changing the style of a table is similar in both VSTO and web add-ins. In both cases, your code assigns a style name, such as TableStyleMedium3 to a property. In the VSTO add-in, this is a table object. (See the various `*_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.)
93-
- Toggling the visibility of columns in a table is very similar in the VSTO and web add-ins. Compare the logic of the `ListObjectHeaders_Click` method in the VSTO sample with the `toggleColumnVisibility` function in the web add-in.
94-
- To change the style of a chart in a VSTO add-in, you assign an integer to the chart object's `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.
95-
- Changing a chart *type*, such as Line, Area, ClusteredColumn, is very similar in both the VSTO add-in and this web add-in. In both cases a `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.
96-
- In an Excel web add-in, like this one, when you want to track a *single* value over time (or any horizontal axis), the chart must be built off of a table with only two visible columns; one that provides the horizontal axis (dates, in this case), and a second that provides the value that is being displayed in the chart. For this reason, the add-in creates a *hidden* worksheet with a copy of the sales data table. This table has only two visible columns; the **Date** column, and the column with the chosen data source for the chart. Although the chart appears on the **Sales** worksheet beside the table, it is getting it's data from the table on the hidden (temp) worksheet.
97-
- To change the data source for a chart in the Excel web add-in, your code toggles the visibility of the columns on the hidden table. See the `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.
98-
- In Office web add-ins, you can leverage HTML5, JavaScript and CSS to make rich UIs like the UI in this code sample.
99-
- Because Office web add-ins make asynchronous method calls, the UI never blocks.
100-
- Office Web add-ins make AJAX calls to retrieve data from online service providers. This sample simply fetches JSON data from a local JSON file. See the `getSalesData` method in Helpers.js. VSTO add-ins use a WebClient in C# to access online resources. See the `GetDataUpdatesFoOneDataSource` method in TableAndChartPane.cs.
101-
102-
103-
## Questions and comments
104-
105-
We'd love to get your feedback about this sample. You can send your feedback to us in the *Issues* section of this repository.
106-
107-
Questions about Microsoft Office 365 development in general should be posted to [Stack Overflow](http://stackoverflow.com/questions/tagged/office-js+API). If your question is about the Office JavaScript APIs, make sure that your questions are tagged with [office-js] and [API].
108-
109-
## Additional resources
110-
111-
* [Office add-in documentation](https://dev.office.com/docs/add-ins/overview/office-add-ins)
112-
* [Office Dev Center](http://dev.office.com/)
113-
* More Office Add-in samples at [OfficeDev on Github](https://github.com/officedev)
114-
115-
## Copyright
116-
Copyright (c) 2016 Microsoft Corporation. All rights reserved.
117-
118-
119-
120-
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
1+
# [ARCHIVED] Excel Web Add-in for Manipulating Table and Chart Formatting
2+
3+
**Note:** This repo is archived and no longer actively maintained. Security vulnerabilities may exist in the project, or its dependencies. If you plan to reuse or run any code from this repo, be sure to perform appropriate security checks on the code or dependencies first. Do not use this project as the starting point of a production Office Add-in. Always start your production code by using the Office/SharePoint development workload in Visual Studio, or the [Yeoman generator for Office Add-ins](https://github.com/OfficeDev/generator-office), and follow security best practices as you develop the add-in.
4+
5+
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](https://code.msdn.microsoft.com/VSTO-Generate-tables-and-f19859b3) VSTO Add-in. This Excel web add-in also shows how to use the design samples from [Office Add-in UX Design Patterns Code](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code).
6+
7+
## Table of Contents
8+
* [Change History](#change-history)
9+
* [Prerequisites](#prerequisites)
10+
* [Design templates used in this add-in](#design-templates-used-in-this-add-in)
11+
* [Get the PickADate library](get-the-pickadate-library)
12+
* [Run the project](#run-the-project)
13+
* [Compare this Excel web add-in code with the VSTO add-in sample](#compare-this-web-add-in-code-with-the-VSTO-add-in-sample)
14+
* [Questions and comments](#questions-and-comments)
15+
* [Additional resources](#additional-resources)
16+
17+
## Change History
18+
19+
November 2, 2016:
20+
21+
* Updated code sample to use Fabric JS 1.2.0
22+
* Initial version.
23+
24+
## Prerequisites
25+
26+
* Excel 2016 for Windows (build 16.0.6727.1000 or later), Excel Online, or Excel for Mac (build 15.26 or later).
27+
* Visual Studio 2015
28+
29+
## Design templates used in this add-in
30+
31+
- Landing page
32+
- Brand bar
33+
- Tab bar
34+
- Settings
35+
36+
For more information about the design patterns, see [UX design pattern templates for Office Add-ins](https://dev.office.com/docs/add-ins/design/ux-design-patterns). And for sample implementations, see [Office-Add-in-UX-Design-Patterns-Code](https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code).
37+
38+
## Get the PickADate library
39+
40+
The Office Fabric date picker control has a dependency on the PickADate library. Take the following steps *after* you have downloaded this sample.
41+
42+
1. Download version 3.5.3 of the library from [pickadate.js](https://github.com/amsul/pickadate.js/releases/tag/3.5.3).
43+
2. Unzip the package and navigate to the `\pickadate.js-3.5.3\lib` folder.
44+
3. Copy all the files and folders in that folder, *except* the `compressed` and `themes-source` folders, to the project folder: `SalesTrackerWeb\Scripts\PickADate`.
45+
46+
## Run the project
47+
48+
1. Open the Visual Studio solution file.
49+
2. Press **F5**.
50+
3. When Excel opens, click the **Track sales** button on the right end of the **Home** ribbon. The add-in opens in a task pane.
51+
52+
#### Import data
53+
54+
4. On the **Home** page, enter one of the following product names (case sensitive) in the **Product name** box: **Keyboard**, **Mouse**, **Monitor**, **Laptop**,
55+
5. Use the date picker control to pick a date no later than September 16th, 2016, because there are no sales after this date in the sample data.
56+
6. Select the **Get sales data** button. After a few seconds, the workbook will switch focus to a new **Sales** worksheet.
57+
58+
#### Change table settings
59+
60+
1. Select **Table** on the tab bar.
61+
2. Deselect radio buttons as needed, to hide the corresponding columns.
62+
3. Select a color for the table.
63+
64+
#### Change chart settings
65+
66+
1. Select **Chart** on the tab bar.
67+
2. Select a data source for the chart.
68+
3. Select a chart type.
69+
4. Select a chart color theme.
70+
71+
## Compare this Excel web add-in code with the VSTO add-in sample
72+
73+
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.
74+
75+
Compare this code with the code in [Tables and Charts](https://code.msdn.microsoft.com/VSTO-Generate-tables-and-f19859b3). Note the following:
76+
77+
78+
- Excel Web add-ins are supported across several platforms including Windows, Mac, and Office Online. VSTO add-ins are only supported on Windows.
79+
- Changing the style of a table is similar in both VSTO and web add-ins. In both cases, your code assigns a style name, such as TableStyleMedium3 to a property. In the VSTO add-in, this is a table object. (See the various `*_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.)
80+
- Toggling the visibility of columns in a table is very similar in the VSTO and web add-ins. Compare the logic of the `ListObjectHeaders_Click` method in the VSTO sample with the `toggleColumnVisibility` function in the web add-in.
81+
- To change the style of a chart in a VSTO add-in, you assign an integer to the chart object's `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.
82+
- Changing a chart *type*, such as Line, Area, ClusteredColumn, is very similar in both the VSTO add-in and this web add-in. In both cases a `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.
83+
- In an Excel web add-in, like this one, when you want to track a *single* value over time (or any horizontal axis), the chart must be built off of a table with only two visible columns; one that provides the horizontal axis (dates, in this case), and a second that provides the value that is being displayed in the chart. For this reason, the add-in creates a *hidden* worksheet with a copy of the sales data table. This table has only two visible columns; the **Date** column, and the column with the chosen data source for the chart. Although the chart appears on the **Sales** worksheet beside the table, it is getting it's data from the table on the hidden (temp) worksheet.
84+
- To change the data source for a chart in the Excel web add-in, your code toggles the visibility of the columns on the hidden table. See the `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.
85+
- In Office web add-ins, you can leverage HTML5, JavaScript and CSS to make rich UIs like the UI in this code sample.
86+
- Because Office web add-ins make asynchronous method calls, the UI never blocks.
87+
- Office Web add-ins make AJAX calls to retrieve data from online service providers. This sample simply fetches JSON data from a local JSON file. See the `getSalesData` method in Helpers.js. VSTO add-ins use a WebClient in C# to access online resources. See the `GetDataUpdatesFoOneDataSource` method in TableAndChartPane.cs.
88+
89+
90+
## Questions and comments
91+
92+
We'd love to get your feedback about this sample. You can send your feedback to us in the *Issues* section of this repository.
93+
94+
Questions about Microsoft Office 365 development in general should be posted to [Stack Overflow](http://stackoverflow.com/questions/tagged/office-js+API). If your question is about the Office JavaScript APIs, make sure that your questions are tagged with [office-js] and [API].
95+
96+
## Additional resources
97+
98+
* [Office add-in documentation](https://dev.office.com/docs/add-ins/overview/office-add-ins)
99+
* [Office Dev Center](http://dev.office.com/)
100+
* More Office Add-in samples at [OfficeDev on Github](https://github.com/officedev)
101+
102+
## Copyright
103+
Copyright (c) 2016 Microsoft Corporation. All rights reserved.
104+
105+
106+
107+
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

0 commit comments

Comments
 (0)