├── Code Editor Proj ├── Images │ ├── Close.png │ ├── blue_graph_16.png │ ├── blue_graph_32.png │ ├── blue_graph_64.png │ └── blue_graph_80.png ├── Common.css ├── TextField.js ├── Home.css ├── PivotTab.js ├── Notification.js ├── CollegeBudgetTrackerManifest.xml ├── Office.css ├── Home.html ├── DropDown.js └── Home.js ├── images ├── CollegeBudgetTracker_tracker.PNG └── CollegeBudgetTracker_taskpane1.PNG ├── Visual Studio Proj ├── Excel-Add-in-JS-CollegeBudgetTrackerWeb │ ├── Images │ │ ├── Close.png │ │ ├── blue_graph_16.png │ │ ├── blue_graph_32.png │ │ ├── blue_graph_64.png │ │ └── blue_graph_80.png │ ├── packages.config │ ├── Web.config │ ├── Web.Debug.config │ ├── Web.Release.config │ ├── Properties │ │ └── AssemblyInfo.cs │ ├── App │ │ ├── App.css │ │ ├── Home │ │ │ ├── Home.css │ │ │ ├── Home.html │ │ │ └── Home.js │ │ └── App.js │ ├── Scripts │ │ └── FabricUI │ │ │ ├── TextField.js │ │ │ ├── Pivot.js │ │ │ └── DropDown.js │ ├── Content │ │ ├── OfficeThemes.css │ │ └── Office.css │ └── Excel-Add-in-JS-CollegeBudgetTrackerWeb.csproj ├── Excel-Add-in-JS-CollegeBudgetTracker │ ├── Excel-Add-in-JS-CollegeBudgetTrackerManifest │ │ ├── SharePointProjectItem.spdata │ │ └── Excel-Add-in-JS-CollegeBudgetTracker.xml │ └── Excel-Add-in-JS-CollegeBudgetTracker.csproj └── Excel-Add-in-JS-CollegeBudgetTracker.sln ├── Excel-Add-in-JS-CollegeBudgetTracker.yml ├── LICENSE.txt ├── README-Localized ├── README-zh-cn.md ├── README-zh-tw.md ├── README-ja-jp.md ├── README-pt-br.md ├── README-ru-ru.md ├── README-de-de.md ├── README-fr-fr.md └── README-es-es.md ├── .gitignore └── Readme.md /Code Editor Proj/Images/Close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Code Editor Proj/Images/Close.png -------------------------------------------------------------------------------- /images/CollegeBudgetTracker_tracker.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/images/CollegeBudgetTracker_tracker.PNG -------------------------------------------------------------------------------- /Code Editor Proj/Images/blue_graph_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Code Editor Proj/Images/blue_graph_16.png -------------------------------------------------------------------------------- /Code Editor Proj/Images/blue_graph_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Code Editor Proj/Images/blue_graph_32.png -------------------------------------------------------------------------------- /Code Editor Proj/Images/blue_graph_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Code Editor Proj/Images/blue_graph_64.png -------------------------------------------------------------------------------- /Code Editor Proj/Images/blue_graph_80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Code Editor Proj/Images/blue_graph_80.png -------------------------------------------------------------------------------- /images/CollegeBudgetTracker_taskpane1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/images/CollegeBudgetTracker_taskpane1.PNG -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/Close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/Close.png -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_16.png -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_32.png -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_64.png -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker/HEAD/Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Images/blue_graph_80.png -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/packages.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Web.config: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Excel-Add-in-JS-CollegeBudgetTracker.yml: -------------------------------------------------------------------------------- 1 | ### YamlMime:Sample 2 | sample: 3 | - name: College Budget Tracker Task Pane Add-in Sample for Excel 2016 4 | path: '' 5 | description: 'This task pane add-in shows how to create a college budget tracker using the JavaScript APIs in Excel 2016. It comes in two flavors: code editor and Visual Studio.' 6 | readme: '' 7 | generateZip: FALSE 8 | isLive: TRUE 9 | technologies: 10 | - Office Add-in 11 | azureDeploy: '' 12 | author: umasubra 13 | platforms: [] 14 | languages: 15 | - JavaScript 16 | extensions: 17 | products: 18 | - Excel 19 | scenarios: [] 20 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTracker/Excel-Add-in-JS-CollegeBudgetTrackerManifest/SharePointProjectItem.spdata: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) Microsoft Corporation 2 | 3 | All rights reserved. 4 | 5 | MIT License: 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 8 | 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 10 | 11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /Code Editor Proj/Common.css: -------------------------------------------------------------------------------- 1 | /* Common app styling */ 2 | 3 | body { 4 | margin: 0 !important; 5 | padding: 0; 6 | } 7 | 8 | #content-main { 9 | background: #fff; 10 | overflow: auto; /* Enable scrollbars within main content section */ 11 | } 12 | 13 | .padding { 14 | padding: 15px; 15 | } 16 | 17 | #notification-message { 18 | background-color: #818285; 19 | color: #fff; 20 | position: absolute; 21 | width: 100%; 22 | min-height: 80px; 23 | right: 0; 24 | z-index: 100; 25 | bottom: 0; 26 | display: none; /* Hidden until invoked */ 27 | } 28 | 29 | #notification-message #notification-message-header { 30 | font-size: medium; 31 | margin-bottom: 10px; 32 | } 33 | 34 | #notification-message #notification-message-close { 35 | background-image: url("../Images/Close.png"); 36 | background-repeat: no-repeat; 37 | width: 24px; 38 | height: 24px; 39 | position: absolute; 40 | right: 5px; 41 | top: 5px; 42 | cursor: pointer; 43 | } 44 | 45 | .footer { 46 | position: fixed; 47 | bottom: 0; 48 | width: 100%; 49 | height: 45px; 50 | background-color: #0078D7; 51 | display: block; 52 | box-sizing: border-box; 53 | } 54 | 55 | .footer .brand-text { 56 | padding-top: 12px; 57 | padding-right: 15px; 58 | padding-left: 15px; 59 | font-size: 15px; 60 | font-family: Rockwell; 61 | text-align: center; 62 | vertical-align: bottom; 63 | } 64 | 65 | .ms-Pivot-content { 66 | display: none; 67 | margin-top: 20px; 68 | } 69 | 70 | .ms-Pivot-content.is-selected { 71 | display: block; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("Excel_Add_in_JS_CollegeBudgetTrackerWeb")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("Excel_Add_in_JS_CollegeBudgetTrackerWeb")] 13 | [assembly: AssemblyCopyright("Copyright © 2015")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // The following GUID is for the ID of the typelib if this project is exposed to COM 23 | [assembly: Guid("0faf7af9-ee62-4e47-83b9-d9358264f603")] 24 | 25 | // Version information for an assembly consists of the following four values: 26 | // 27 | // Major Version 28 | // Minor Version 29 | // Build Number 30 | // Revision 31 | // 32 | // You can specify all the values or you can default the Revision and Build Numbers 33 | // by using the '*' as shown below: 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/App/App.css: -------------------------------------------------------------------------------- 1 | /* Common app styling */ 2 | 3 | body { 4 | margin: 0 !important; 5 | padding: 0; 6 | } 7 | 8 | #content-main { 9 | background: #fff; 10 | overflow: auto; /* Enable scrollbars within main content section */ 11 | } 12 | 13 | .padding { 14 | padding: 15px; 15 | } 16 | 17 | #notification-message { 18 | background-color: #818285; 19 | color: #fff; 20 | position: absolute; 21 | width: 100%; 22 | min-height: 80px; 23 | right: 0; 24 | z-index: 100; 25 | bottom: 0; 26 | display: none; /* Hidden until invoked */ 27 | } 28 | 29 | #notification-message #notification-message-header { 30 | font-size: medium; 31 | margin-bottom: 10px; 32 | } 33 | 34 | #notification-message #notification-message-close { 35 | background-image: url("../Images/Close.png"); 36 | background-repeat: no-repeat; 37 | width: 24px; 38 | height: 24px; 39 | position: absolute; 40 | right: 5px; 41 | top: 5px; 42 | cursor: pointer; 43 | } 44 | 45 | .right { 46 | position:absolute; 47 | left:35%; 48 | } 49 | 50 | .footer { 51 | position: fixed; 52 | bottom:0; 53 | width:100%; 54 | height:60px; 55 | background-color: #0078D7; 56 | display:block; 57 | box-sizing:border-box; 58 | } 59 | 60 | .footer .brand-text { 61 | padding-top: 18px; 62 | font-size: 21px; 63 | font-family: Rockwell; 64 | text-align: center; 65 | vertical-align: bottom; 66 | } 67 | 68 | .ms-Button { 69 | font: #E81123; 70 | } 71 | 72 | .ms-Pivot-content { 73 | display: none; 74 | margin-top: 20px; 75 | } 76 | 77 | .ms-Pivot-content.is-selected { 78 | display: block; 79 | } 80 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTracker.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 2013 4 | VisualStudioVersion = 12.0.21005.1 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Excel-Add-in-JS-CollegeBudgetTracker", "Excel-Add-in-JS-CollegeBudgetTracker\Excel-Add-in-JS-CollegeBudgetTracker.csproj", "{4ADF3E4E-B63B-47B4-99EC-66B2D074B802}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Excel-Add-in-JS-CollegeBudgetTrackerWeb", "Excel-Add-in-JS-CollegeBudgetTrackerWeb\Excel-Add-in-JS-CollegeBudgetTrackerWeb.csproj", "{D8526504-AE38-47EF-9BA0-EA1E655ADC9B}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Release|Any CPU = Release|Any CPU 14 | EndGlobalSection 15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 16 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 17 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Debug|Any CPU.Build.0 = Debug|Any CPU 18 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Debug|Any CPU.Deploy.0 = Debug|Any CPU 19 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Release|Any CPU.ActiveCfg = Release|Any CPU 20 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Release|Any CPU.Build.0 = Release|Any CPU 21 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802}.Release|Any CPU.Deploy.0 = Release|Any CPU 22 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 23 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B}.Debug|Any CPU.Build.0 = Debug|Any CPU 24 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B}.Release|Any CPU.ActiveCfg = Release|Any CPU 25 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B}.Release|Any CPU.Build.0 = Release|Any CPU 26 | EndGlobalSection 27 | GlobalSection(SolutionProperties) = preSolution 28 | HideSolutionNode = FALSE 29 | EndGlobalSection 30 | EndGlobal 31 | -------------------------------------------------------------------------------- /Code Editor Proj/TextField.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | /** 4 | * Text Field Plugin 5 | * 6 | * Adds basic demonstration functionality to .ms-TextField components. 7 | * 8 | * @param {jQuery Object} One or more .ms-TextField components 9 | * @return {jQuery Object} The same components (allows for chaining) 10 | */ 11 | (function ($) { 12 | $.fn.TextField = function () { 13 | 14 | /** Iterate through each text field provided. */ 15 | return this.each(function () { 16 | 17 | /** Does it have a placeholder? */ 18 | if ($(this).hasClass("ms-TextField--placeholder")) { 19 | 20 | /** Hide the label on click. */ 21 | $(this).on('click', function () { 22 | $(this).find('.ms-Label').hide(); 23 | }); 24 | 25 | /** Show the label again when leaving the field. */ 26 | $(this).find('.ms-TextField-field').on('blur', function () { 27 | 28 | /** Only do this if no text was entered. */ 29 | if ($(this).val().length === 0) { 30 | $(this).siblings('.ms-Label').show(); 31 | } 32 | }); 33 | } 34 | 35 | /** Underlined - adding/removing a focus class */ 36 | if ($(this).hasClass('ms-TextField--underlined')) { 37 | 38 | /** Add is-active class - changes border color to theme primary */ 39 | $(this).find('.ms-TextField-field').on('focus', function () { 40 | $(this).parent('.ms-TextField--underlined').addClass('is-active'); 41 | }); 42 | 43 | /** Remove is-active on blur of textfield */ 44 | $(this).find('.ms-TextField-field').on('blur', function () { 45 | $(this).parent('.ms-TextField--underlined').removeClass('is-active'); 46 | }); 47 | } 48 | 49 | }); 50 | }; 51 | })(jQuery); -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Scripts/FabricUI/TextField.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | /** 4 | * Text Field Plugin 5 | * 6 | * Adds basic demonstration functionality to .ms-TextField components. 7 | * 8 | * @param {jQuery Object} One or more .ms-TextField components 9 | * @return {jQuery Object} The same components (allows for chaining) 10 | */ 11 | (function ($) { 12 | $.fn.TextField = function () { 13 | 14 | /** Iterate through each text field provided. */ 15 | return this.each(function () { 16 | 17 | /** Does it have a placeholder? */ 18 | if ($(this).hasClass("ms-TextField--placeholder")) { 19 | 20 | /** Hide the label on click. */ 21 | $(this).on('click', function () { 22 | $(this).find('.ms-Label').hide(); 23 | }); 24 | 25 | /** Show the label again when leaving the field. */ 26 | $(this).find('.ms-TextField-field').on('blur', function () { 27 | 28 | /** Only do this if no text was entered. */ 29 | if ($(this).val().length === 0) { 30 | $(this).siblings('.ms-Label').show(); 31 | } 32 | }); 33 | } 34 | 35 | /** Underlined - adding/removing a focus class */ 36 | if ($(this).hasClass('ms-TextField--underlined')) { 37 | 38 | /** Add is-active class - changes border color to theme primary */ 39 | $(this).find('.ms-TextField-field').on('focus', function () { 40 | $(this).parent('.ms-TextField--underlined').addClass('is-active'); 41 | }); 42 | 43 | /** Remove is-active on blur of textfield */ 44 | $(this).find('.ms-TextField-field').on('blur', function () { 45 | $(this).parent('.ms-TextField--underlined').removeClass('is-active'); 46 | }); 47 | } 48 | 49 | }); 50 | }; 51 | })(jQuery); -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Scripts/FabricUI/Pivot.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Pivot Plugin 3 | * 4 | * Adds basic demonstration functionality to .ms-Pivot components. 5 | * 6 | * @param {jQuery Object} One or more .ms-Pivot components 7 | * @return {jQuery Object} The same components (allows for chaining) 8 | */ 9 | (function ($) { 10 | $.fn.Pivot = function () { 11 | 12 | /** Go through each pivot we've been given. */ 13 | return this.each(function () { 14 | 15 | var $pivotContainer = $(this); 16 | 17 | /** When clicking/tapping a link, select it. */ 18 | $pivotContainer.on('click', '.ms-Pivot-link', function (event) { 19 | event.preventDefault(); 20 | /** Check if current selection has elipses child element */ 21 | var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis'); 22 | 23 | /** Find pivot content linked to the current pivot */ 24 | var pivotContentSelector = $(this).attr('data-pivotContent'); 25 | var $pivotContent = $(pivotContentSelector); 26 | 27 | /** Only execute when no elipses element can be found */ 28 | if ($elipsisCheck.length === 0) { 29 | 30 | $(this).siblings('.ms-Pivot-link.is-selected').each(function (index, element) { 31 | 32 | /** Check if the pivot is attached to any content */ 33 | /** Use data attribute as selector instead of forcing id/class */ 34 | var contentSelector = $(element).attr('data-pivotContent'); 35 | if (contentSelector) { 36 | /** Remove selection for pivot content */ 37 | $(contentSelector).removeClass('is-selected'); 38 | } 39 | 40 | /** Remove pivot selection */ 41 | $(this).removeClass('is-selected'); 42 | }); 43 | 44 | /** Add pivot & pivot-content selection */ 45 | $(this).addClass('is-selected'); 46 | $pivotContent.addClass('is-selected'); 47 | } 48 | 49 | }); 50 | 51 | }); 52 | 53 | }; 54 | })(jQuery); -------------------------------------------------------------------------------- /Code Editor Proj/Home.css: -------------------------------------------------------------------------------- 1 | /* Page-specific styling */ 2 | 3 | .padding { 4 | padding :15px; 5 | } 6 | 7 | .line { 8 | height: 2px; 9 | color: #0078D7; 10 | } 11 | 12 | .header { 13 | height: 0px; 14 | } 15 | 16 | .ms-landing-page__header { 17 | border-bottom: solid 2px #0078d7; 18 | display: inline-flex; 19 | width: 100%; 20 | } 21 | 22 | 23 | .ms-landing-page__header--center { 24 | flex: 1 1 auto; 25 | display: inline-flex; 26 | justify-content: flex-start; 27 | align-items: center; 28 | overflow: hidden; 29 | } 30 | 31 | .ms-landing-page__header--center p { 32 | padding: 0 10px; 33 | flex: 1 0 0px; 34 | overflow: hidden; 35 | white-space: nowrap; 36 | text-overflow: ellipsis; 37 | text-align: left; 38 | cursor: pointer; 39 | -moz-transition: background ease 0.1s, color ease 0.1s; 40 | -o-transition: background ease 0.1s, color ease 0.1s; 41 | -webkit-transition: background ease 0.1s, color ease 0.1s; 42 | transition: background ease 0.1s, color ease 0.1s; 43 | padding: 10px; 44 | } 45 | 46 | .ms-landing-page__header--center p:active, .ms-landing-page__header--center p:hover { 47 | background: #c7e0f4; 48 | color: #000; 49 | cursor: pointer; 50 | } 51 | 52 | .ms-landing-page__header--center p:active { 53 | background: #c7e0f4; 54 | -moz-transform: scale3d(0.98, 0.98, 1); 55 | -ms-transform: scale3d(0.98, 0.98, 1); 56 | -o-transform: scale3d(0.98, 0.98, 1); 57 | -webkit-transform: scale3d(0.98, 0.98, 1); 58 | transform: scale3d(0.98, 0.98, 1); 59 | } 60 | 61 | .ms-landing-page__header--center p.disabled { 62 | opacity: 0.6; 63 | pointer-events: none; 64 | cursor: not-allowed; 65 | } 66 | 67 | .ms-landing-page__header--center p.disabled:active, .ms-landing-page__header--center p.disabled:hover { 68 | background: transparent; 69 | } 70 | 71 | .ms-landing-page__header--center p.disabled:active { 72 | -moz-transform: none; 73 | -ms-transform: none; 74 | -o-transform: none; 75 | -webkit-transform: none; 76 | transform: none; 77 | } 78 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/App/Home/Home.css: -------------------------------------------------------------------------------- 1 | .padding { 2 | padding: 15px; 3 | } 4 | 5 | .line { 6 | height: 2px; 7 | color: #0078D7; 8 | } 9 | 10 | .header { 11 | height: 0px; 12 | } 13 | 14 | .ms-landing-page__header { 15 | border-bottom: solid 2px #0078d7; 16 | display: inline-flex; 17 | width: 100%; 18 | } 19 | 20 | 21 | .ms-landing-page__header--center { 22 | flex: 1 1 auto; 23 | display: inline-flex; 24 | justify-content: flex-start; 25 | align-items: center; 26 | overflow: hidden; 27 | } 28 | 29 | .ms-landing-page__header--center p { 30 | padding: 0 10px; 31 | flex: 1 0 0px; 32 | overflow: hidden; 33 | white-space: nowrap; 34 | text-overflow: ellipsis; 35 | text-align: left; 36 | cursor: pointer; 37 | -moz-transition: background ease 0.1s, color ease 0.1s; 38 | -o-transition: background ease 0.1s, color ease 0.1s; 39 | -webkit-transition: background ease 0.1s, color ease 0.1s; 40 | transition: background ease 0.1s, color ease 0.1s; 41 | padding: 10px; 42 | } 43 | 44 | .ms-landing-page__header--center p:active, .ms-landing-page__header--center p:hover { 45 | background: #c7e0f4; 46 | color: #000; 47 | cursor: pointer; 48 | } 49 | 50 | .ms-landing-page__header--center p:active { 51 | background: #c7e0f4; 52 | -moz-transform: scale3d(0.98, 0.98, 1); 53 | -ms-transform: scale3d(0.98, 0.98, 1); 54 | -o-transform: scale3d(0.98, 0.98, 1); 55 | -webkit-transform: scale3d(0.98, 0.98, 1); 56 | transform: scale3d(0.98, 0.98, 1); 57 | } 58 | 59 | .ms-landing-page__header--center p.disabled { 60 | opacity: 0.6; 61 | pointer-events: none; 62 | cursor: not-allowed; 63 | } 64 | 65 | .ms-landing-page__header--center p.disabled:active, .ms-landing-page__header--center p.disabled:hover { 66 | background: transparent; 67 | } 68 | 69 | .ms-landing-page__header--center p.disabled:active { 70 | -moz-transform: none; 71 | -ms-transform: none; 72 | -o-transform: none; 73 | -webkit-transform: none; 74 | transform: none; 75 | } 76 | -------------------------------------------------------------------------------- /README-Localized/README-zh-cn.md: -------------------------------------------------------------------------------- 1 | # 适用于 Excel 2016 的大学预算跟踪程序任务窗格外接程序示例 2 | 3 | _适用于：Excel 2016_ 4 | 5 | 此任务窗格外接程序介绍如何在 Excel 2016 中使用 JavaScript API 创建大学预算跟踪程序。它有两种类型：代码编辑器和 Visual Studio。 6 | 7 | ![大学预算跟踪程序示例](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## 尝试一下 10 | ### 代码编辑器版本 11 | 12 | 部署和测试外接程序最简单的方法是将清单复制到网络共享。 13 | 14 | 1. 在网络共享上创建一个文件夹（如 \\\MyShare\CollegeBudgetTracker）。 15 | 2. 将清单 (CollegeBudgetTrackerManifest.xml) 复制到网络共享（例如 \\\MyShare\\MyManifests）。 16 | 3. 添加将清单作为 Excel 中受信任的应用目录的共享位置。 17 | 18 | a.启动 Excel 并打开一个空白的电子表格。 19 | 20 | b.选择**文件**选项卡，然后选择**选项**。 21 | 22 | c.选择**信任中心**，然后选择**信任中心设置**按钮。 23 | 24 | d.选择**受信任的外接程序目录**。 25 | 26 | e.在**目录 Url**框中，输入在第 3 步中创建的网络共享的路径，然后选择**添加目录**。 27 | 28 | f. 选中“**显示在菜单中**”复选框，然后选择“**确定**”。此时，系统会显示一条消息，提醒你注意你的设置将在 Office 下次启动时应用。 29 | 30 | 4. 测试并运行外接程序。 31 | 32 | a.在 Excel 2016 的**插入选项卡**中，选择**我的外接程序**。 33 | 34 | b.在**Office 外接程序**对话框中，选择**共享文件夹**。 35 | 36 | c.单击主页选项卡中的**大学预算跟踪器**命令。 外接程序在任务窗格中打开，并在活动工作表中创建大学预算跟踪器，如此图中所示。 37 | 38 | ![大学预算跟踪程序示例](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d.使用**添加支出**和**添加收入**选项卡添加一些支出和收入，并查看数据和图表如何动态地更改。 41 | 42 | ![大学预算跟踪器示例](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | 若要使用你自己的外接程序中的清单，编辑清单文件的 元素，使其指向你的 Home.html 文件的共享位置。 45 | 46 | ### Visual Studio 版本 47 | 1. 将项目复制到本地文件夹，并在 Visual Studio 中打开 Excel-Add-in-JS-CollegeBudgetTracker.sln。 48 | 2. 按 F5 生成并部署示例外接程序。Excel 启动并且外接程序会在空白工作簿右侧的任务窗格中打开，如下图所示。 49 | 50 | ![大学预算跟踪程序示例](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. 使用“**添加支出**”和“**添加收入**”选项卡添加一些支出和收入，并查看数据和图表如何动态地更改。 53 | 54 | ![大学预算跟踪程序示例](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### 了解详细信息 58 | 59 | 在您开发外接程序时，Excel JavaScript API 可以提供更多功能。下面只是其中一些可用资源。 60 | 61 | 1. [Excel 外接程序编程概述](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [适用于 Excel 的代码段资源管理器](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Excel 外接程序代码示例](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Excel 外接程序 JavaScript API 参考](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [构建你的第一个 Excel 外接程序](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /Code Editor Proj/PivotTab.js: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | * Pivot Plugin 4 | 5 | * 6 | 7 | * Adds basic demonstration functionality to .ms-Pivot components. 8 | 9 | * 10 | 11 | * @param {jQuery Object} One or more .ms-Pivot components 12 | 13 | * @return {jQuery Object} The same components (allows for chaining) 14 | 15 | */ 16 | 17 | (function ($) { 18 | 19 | $.fn.Pivot = function () { 20 | 21 | 22 | /** Go through each pivot we've been given. */ 23 | 24 | return this.each(function () { 25 | 26 | 27 | var $pivotContainer = $(this); 28 | 29 | /** When clicking/tapping a link, select it. */ 30 | 31 | $pivotContainer.on('click', '.ms-Pivot-link', function (event) { 32 | 33 | event.preventDefault(); 34 | 35 | 36 | /** Check if current selection has elipses child element */ 37 | 38 | var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis'); 39 | 40 | 41 | 42 | /** Find pivot content linked to the current pivot */ 43 | 44 | var pivotContentSelector = $(this).attr('data-pivotContent'); 45 | 46 | var $pivotContent = $(pivotContentSelector); 47 | 48 | 49 | 50 | /** Only execute when no elipses element can be found */ 51 | 52 | if ($elipsisCheck.length === 0) { 53 | 54 | 55 | $(this).siblings('.ms-Pivot-link.is-selected').each(function (index, element) { 56 | 57 | 58 | /** Check if the pivot is attached to any content */ 59 | 60 | /** Use data attribute as selector instead of forcing id/class */ 61 | 62 | var contentSelector = $(element).attr('data-pivotContent'); 63 | 64 | if (contentSelector) { 65 | 66 | /** Remove selection for pivot content */ 67 | 68 | $(contentSelector).removeClass('is-selected'); 69 | 70 | } 71 | 72 | 73 | /** Remove pivot selection */ 74 | 75 | $(this).removeClass('is-selected'); 76 | 77 | }); 78 | 79 | 80 | /** Add pivot & pivot-content selection */ 81 | 82 | $(this).addClass('is-selected'); 83 | 84 | $pivotContent.addClass('is-selected'); 85 | 86 | } 87 | 88 | 89 | }); 90 | 91 | 92 | }); 93 | 94 | 95 | }; 96 | })(jQuery); -------------------------------------------------------------------------------- /README-Localized/README-zh-tw.md: -------------------------------------------------------------------------------- 1 | # Excel 2016 的大學預算追蹤器工作窗格增益集範例 2 | 3 | _適用版本：Excel 2016_ 4 | 5 | 這個工作窗格增益集示範如何使用 Excel 2016 中的 JavaScript API 來建立大學預算追蹤器。共有兩種型態︰程式碼編輯器和 Visual Studio。 6 | 7 | ![大學預算追蹤器範例](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## 進行測試 10 | ### 程式碼編輯器版本 11 | 12 | 部署及測試增益集的最簡單方式，是將資訊清單複製到網路共用。 13 | 14 | 1. 在網路共用上建立資料夾 (例如，\\\MyShare\CollegeBudgetTracker)。 15 | 2. 將資訊清單 (CollegeBudgetTrackerManifest.xml) 複製到網路共用 (例如 \\\MyShare\MyManifests)。 16 | 3. 在 Excel 中，將包含資訊清單的共用位置新增為受信任的應用程式目錄。 17 | 18 | a.啟動 Excel，並開啟空白的試算表。 19 | 20 | b.選擇 **[檔案]** 索引標籤，然後選擇 **[選項]**。 21 | 22 | c.選擇 **[信任中心]**，然後選擇 **[信任中心設定]** 按鈕。 23 | 24 | d.選擇 **[受信任的增益集目錄]**。 25 | 26 | e.在 **[目錄 URL]** 方塊中，輸入您在步驟 3 建立的網路共用路徑，然後選擇 **[新增目錄]**。 27 | 28 | f. 選取 [在功能表中顯示] 核取方塊，然後選擇 [確定]。接著會顯示訊息，通知您下次啟動 Office 時就會套用您的設定。 29 | 30 | 4. 測試並執行增益集。 31 | 32 | a.在 Excel 2016 的 **[插入]** 索引標籤上，選擇 **[我的增益集]**。 33 | 34 | b.在 **[Office 增益集]** 對話方塊中，選擇 **[共用資料夾]**。 35 | 36 | c.在 [首頁] 索引標籤上，按一下 **[大學預算追蹤器]** 命令。 增益集會在工作窗格中開啟，並在使用中工作表中建立大學預算追蹤器，如此圖表所示。 37 | 38 | ![大學預算追蹤器範例](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d.使用 **[新增費用]** 和 **[新增收入]** 索引標籤來新增一些支出和收入，並查看資料和圖表如何動態變更。 41 | 42 | ![大學預算追蹤器範例](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | 若要在您自己的增益集中使用資訊清單，編輯資訊清單檔案的 元素，讓它指向 Home.html 檔案的共用位置。 45 | 46 | ### Visual Studio 版本 47 | 1. 將專案複製到本機資料夾，並在 Visual Studio 中開啟 Excel-Add-in-JS-CollegeBudgetTracker.sln。 48 | 2. 按 F5 建置及部署範例增益集。Excel 會啟動，且增益集會在工作表右側空白部分的工作窗格中開啟，如下圖所示。 49 | 50 | ![大學預算追蹤器範例](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. 使用 [新增費用] 和 [新增收入] 索引標籤來新增一些支出和收入，並查看資料和圖表如何動態變更。 53 | 54 | ![大學預算追蹤器範例](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### 深入了解 58 | 59 | Excel JavaScript API 還有其他許多功能，可供您用於開發增益集。以下列出其中幾個可用的資源。 60 | 61 | 1. [Excel 增益集程式設計概觀](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Excel 的程式碼片段總管](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Excel 增益集程式碼範例](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Excel 增益集 JavaScript API 參考](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [建立第一個 Excel 增益集](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /Code Editor Proj/Notification.js: -------------------------------------------------------------------------------- 1 | /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 2 | See full license at the bottom of this file. */ 3 | 4 | /* Notification functionality */ 5 | 6 | var app = (function () { 7 | "use strict"; 8 | 9 | var app = {}; 10 | 11 | // Common initialization function (to be called from each page) 12 | app.initialize = function () { 13 | $('body').append( 14 | '
' + 15 | '
' + 16 | '
' + 17 | '
' + 18 | '
' + 19 | '
' + 20 | '
'); 21 | 22 | $('#notification-message-close').click(function () { 23 | $('#notification-message').hide(); 24 | }); 25 | 26 | 27 | // After initialization, expose a common notification function 28 | app.showNotification = function (header, text) { 29 | $('#notification-message-header').text(header); 30 | $('#notification-message-body').text(text); 31 | $('#notification-message').slideDown('fast'); 32 | }; 33 | }; 34 | 35 | return app; 36 | })(); 37 | 38 | /* 39 | Excel-Add-in-JS-CollegeBudgetTracker, https://github.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker 40 | 41 | Copyright (c) Microsoft Corporation 42 | 43 | All rights reserved. 44 | 45 | MIT License: 46 | 47 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 48 | associated documentation files (the "Software"), to deal in the Software without restriction, including 49 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 50 | copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 51 | following conditions: 52 | 53 | The above copyright notice and this permission notice shall be included in all copies or substantial 54 | portions of the Software. 55 | 56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 57 | LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 58 | SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 59 | ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 60 | USE OR OTHER DEALINGS IN THE SOFTWARE. 61 | */ -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/App/App.js: -------------------------------------------------------------------------------- 1 | /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 2 | See full license at the bottom of this file. */ 3 | 4 | /* Common app functionality */ 5 | 6 | var app = (function () { 7 | "use strict"; 8 | 9 | var app = {}; 10 | 11 | // Common initialization function (to be called from each page) 12 | app.initialize = function () { 13 | $('body').append( 14 | '
' + 15 | '
' + 16 | '
' + 17 | '
' + 18 | '
' + 19 | '
' + 20 | '
'); 21 | 22 | $('#notification-message-close').click(function () { 23 | $('#notification-message').hide(); 24 | }); 25 | 26 | 27 | // After initialization, expose a common notification function 28 | app.showNotification = function (header, text) { 29 | $('#notification-message-header').text(header); 30 | $('#notification-message-body').text(text); 31 | $('#notification-message').slideDown('fast'); 32 | }; 33 | }; 34 | 35 | return app; 36 | })(); 37 | 38 | /* 39 | Excel-Add-in-JS-CollegeBudgetTracker, https://github.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker 40 | 41 | Copyright (c) Microsoft Corporation 42 | 43 | All rights reserved. 44 | 45 | MIT License: 46 | 47 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 48 | associated documentation files (the "Software"), to deal in the Software without restriction, including 49 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 50 | copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 51 | following conditions: 52 | 53 | The above copyright notice and this permission notice shall be included in all copies or substantial 54 | portions of the Software. 55 | 56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 57 | LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 58 | SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 59 | ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 60 | USE OR OTHER DEALINGS IN THE SOFTWARE. 61 | */ -------------------------------------------------------------------------------- /README-Localized/README-ja-jp.md: -------------------------------------------------------------------------------- 1 | # Excel 2016 用の大学予算追跡ツール作業ウィンドウ アドインのサンプル 2 | 3 | _適用対象: Excel 2016_ 4 | 5 | この作業ウィンドウ アドイン アドインには、Excel 2016 の JavaScript API を使用して大学予算追跡ツールを作成する方法が示されます。コード エディターと Visual Studio のいずれかを選択できます。 6 | 7 | ![大学予算追跡ツールのサンプル](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## お試しください。 10 | ### コード エディターのバージョン 11 | 12 | アドインを展開してテストする最も簡単な方法は、マニフェストをネットワーク共有にコピーすることです。 13 | 14 | 1. ネットワーク共有 (たとえば \\\MyShare\CollegeBudgetTracker) にフォルダーを作成します。 15 | 2. マニフェスト (CollegeBudgetTrackerManifest.xml) をネットワーク共有 (たとえば \\\MyShare\MyManifests) にコピーします。 16 | 3. マニフェストを格納する共有の場所を、Excel で信頼されるアプリ カタログとして追加します。 17 | 18 | a.Excel を起動し、空のスプレッドシートを開きます。 19 | 20 | b.**[ファイル]** タブを選択し、**[オプション]** を選択します。 21 | 22 | c.**[セキュリティ センター]** を選択し、**[セキュリティ センターの設定]** ボタンを選択します。 23 | 24 | d.**[信頼できるアドイン カタログ]** を選択します。 25 | 26 | e.**[カタログの URL]** ボックスで、手順 3 で作成したネットワーク共有のパスを入力し、**[カタログの追加]** を選択します。 27 | 28 | f. **[メニューに表示する]** チェック ボックスをオンにしてから **[OK]** を選択します。これらの設定は Office を次回起動したときに適用されることを示すメッセージが表示されます。 29 | 30 | 4. アドインをテストし、実行します。 31 | 32 | a.Excel 2016 の **[挿入]** タブで、**[個人用アドイン]** を選択します。 33 | 34 | b.**[Office アドイン]** ダイアログ ボックスで、**[共有フォルダー]** を選択します。 35 | 36 | c.**[ホーム]** タブの **[大学予算の追跡ツール]** をクリックします。 アドインが作業ウィンドウで開き、次の図に示すように、作業中のシートで大学予算の追跡ツールが作成されます。 37 | 38 | ![大学予算追跡ツールのサンプル](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d.**[経費の追加]** タブと **[収入の追加]** タブを使用して経費や収入を追加し、データとグラフがどのように動的に変化するかを確認します。 41 | 42 | ![大学予算の追跡ツールのサンプル](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | 独自のアドインでマニフェストを使用するには、マニフェスト ファイルの 要素を編集して、この要素が Home.html ファイルの共有場所を指すようにします。 45 | 46 | ### Visual Studio のバージョン 47 | 1. プロジェクトをローカル フォルダーにコピーし、Visual Studio で Excel-Add-in-JS-CollegeBudgetTracker.sln を開きます。 48 | 2. F5 キーを押して、サンプル アドインをビルドおよび展開します。Excel が起動し、次の図に示すように、空白のワークシートの右側の作業ウィンドウでアドインが開きます。 49 | 50 | ![大学予算追跡ツールのサンプル](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. **[経費の追加]** と **[収入の追加]** タブを使用して経費や収入を追加し、データとグラフがどのように動的に変化するかを確認します。 53 | 54 | ![大学予算追跡ツールのサンプル](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### 詳細を見る 58 | 59 | アドインを開発する際に Excel JavaScript API でできることは他にも数多くあります。以下は、利用可能なリソースのほんの一例です。 60 | 61 | 1. [Excel アドインのプログラミングの概要](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Excel のスニペット エクスプローラー](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Excel アドインのコード サンプル](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Excel アドインの JavaScript API リファレンス](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [初めての Excel アドインを作成する](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Content/OfficeThemes.css: -------------------------------------------------------------------------------- 1 | /* The following classes describe the common theme information for office documents */ 2 | 3 | 4 | 5 | /* Basic Font and Background Colors for text */ 6 | .office-docTheme-primary-fontColor { color:#000000; } 7 | .office-docTheme-primary-bgColor { background-color:#ffffff; } 8 | .office-docTheme-secondary-fontColor { color: #000000; } 9 | .office-docTheme-secondary-bgColor { background-color: #ffffff; } 10 | 11 | 12 | /* Accent color definitions for fonts */ 13 | .office-contentAccent1-color { color:#5b9bd5; } 14 | .office-contentAccent2-color { color:#ed7d31; } 15 | .office-contentAccent3-color { color:#a5a5a5; } 16 | .office-contentAccent4-color { color:#ffc000; } 17 | .office-contentAccent5-color { color:#4472c4; } 18 | .office-contentAccent6-color { color:#70ad47; } 19 | 20 | /* Accent color for backgrounds */ 21 | .office-contentAccent1-bgColor { background-color:#5b9bd5; } 22 | .office-contentAccent2-bgColor { background-color:#ed7d31; } 23 | .office-contentAccent3-bgColor { background-color:#a5a5a5; } 24 | .office-contentAccent4-bgColor { background-color:#ffc000; } 25 | .office-contentAccent5-bgColor { background-color:#4472c4; } 26 | .office-contentAccent6-bgColor { background-color:#70ad47; } 27 | 28 | /* Accent color for borders */ 29 | .office-contentAccent1-borderColor { border-color:#5b9bd5; } 30 | .office-contentAccent2-borderColor { border-color:#ed7d31; } 31 | .office-contentAccent3-borderColor { border-color:#a5a5a5; } 32 | .office-contentAccent4-borderColor { border-color:#ffc000; } 33 | .office-contentAccent5-borderColor { border-color:#4472c4; } 34 | .office-contentAccent6-borderColor { border-color:#70ad47; } 35 | 36 | /* links */ 37 | .office-a {color: #0563c1; } 38 | .office-a:visited { color: #954f72; } 39 | 40 | /* Body Fonts */ 41 | .office-bodyFont-eastAsian { } /* East Asian name of the Font */ 42 | .office-bodyFont-latin { font-family:"Calibri"; } /* Latin name of the Font */ 43 | .office-bodyFont-script { } /* Script name of the Font */ 44 | .office-bodyFont-localized { font-family:"Calibri"; } /* Localized name of the Font. contains the default font name according to the culture currently used in Office */ 45 | 46 | /* Headers Font */ 47 | .office-headerFont-eastAsian { } 48 | .office-headerFont-latin { font-family:"Calibri Light"; } 49 | .office-headerFont-script { } 50 | .office-headerFont-localized { font-family:"Calibri Light"; } 51 | 52 | 53 | 54 | /* The following classes define the Office themes. This classes make sense for the taskpane apps */ 55 | 56 | /* Basic Font and Background Colors for PPT */ 57 | .office-officeTheme-primary-fontColor { color:#b83b1d; } 58 | .office-officeTheme-primary-bgColor { background-color:#dedede; } 59 | .office-officeTheme-secondary-fontColor { color:#262626; } 60 | .office-officeTheme-secondary-bgColor { background-color:#ffffff; } 61 | 62 | /* Basic Font and Background Colors for Outlook Web Access */ 63 | /* remove comments and delete other apps officeTheme classes to get OWA defaults 64 | .office-officeTheme-primary-fontColor { color:#ea4400; } 65 | .office-officeTheme-primary-bgColor { background-color:#ffffff; } 66 | .office-officeTheme-secondary-fontColor { color:#ffffff; } 67 | .office-officeTheme-secondary-bgColor { background-color:#ea4400; } 68 | */ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | build/ 21 | bld/ 22 | [Bb]in/ 23 | [Oo]bj/ 24 | 25 | # Visual Studo 2015 cache/options directory 26 | .vs/ 27 | 28 | # MSTest test Results 29 | [Tt]est[Rr]esult*/ 30 | [Bb]uild[Ll]og.* 31 | 32 | # NUNIT 33 | *.VisualState.xml 34 | TestResult.xml 35 | 36 | # Build Results of an ATL Project 37 | [Dd]ebugPS/ 38 | [Rr]eleasePS/ 39 | dlldata.c 40 | 41 | *_i.c 42 | *_p.c 43 | *_i.h 44 | *.ilk 45 | *.meta 46 | *.obj 47 | *.pch 48 | *.pdb 49 | *.pgc 50 | *.pgd 51 | *.rsp 52 | *.sbr 53 | *.tlb 54 | *.tli 55 | *.tlh 56 | *.tmp 57 | *.tmp_proj 58 | *.log 59 | *.vspscc 60 | *.vssscc 61 | .builds 62 | *.pidb 63 | *.svclog 64 | *.scc 65 | 66 | # Chutzpah Test files 67 | _Chutzpah* 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | *.cachefile 76 | 77 | # Visual Studio profiler 78 | *.psess 79 | *.vsp 80 | *.vspx 81 | 82 | # TFS 2012 Local Workspace 83 | $tf/ 84 | 85 | # Guidance Automation Toolkit 86 | *.gpState 87 | 88 | # ReSharper is a .NET coding add-in 89 | _ReSharper*/ 90 | *.[Rr]e[Ss]harper 91 | *.DotSettings.user 92 | 93 | # JustCode is a .NET coding addin-in 94 | .JustCode 95 | 96 | # TeamCity is a build add-in 97 | _TeamCity* 98 | 99 | # DotCover is a Code Coverage Tool 100 | *.dotCover 101 | 102 | # NCrunch 103 | _NCrunch_* 104 | .*crunch*.local.xml 105 | 106 | # MightyMoose 107 | *.mm.* 108 | AutoTest.Net/ 109 | 110 | # Web workbench (sass) 111 | .sass-cache/ 112 | 113 | # Installshield output folder 114 | [Ee]xpress/ 115 | 116 | # DocProject is a documentation generator add-in 117 | DocProject/buildhelp/ 118 | DocProject/Help/*.HxT 119 | DocProject/Help/*.HxC 120 | DocProject/Help/*.hhc 121 | DocProject/Help/*.hhk 122 | DocProject/Help/*.hhp 123 | DocProject/Help/Html2 124 | DocProject/Help/html 125 | 126 | # Click-Once directory 127 | publish/ 128 | 129 | # Publish Web Output 130 | *.[Pp]ublish.xml 131 | *.azurePubxml 132 | # TODO: Comment the next line if you want to checkin your web deploy settings 133 | # but database connection strings (with potential passwords) will be unencrypted 134 | *.pubxml 135 | *.publishproj 136 | 137 | # NuGet Packages 138 | *.nupkg 139 | # The packages folder can be ignored because of Package Restore 140 | **/packages/* 141 | # except build/, which is used as an MSBuild target. 142 | !**/packages/build/ 143 | # Uncomment if necessary however generally it will be regenerated when needed 144 | #!**/packages/repositories.config 145 | 146 | # Windows Azure Build Output 147 | csx/ 148 | *.build.csdef 149 | 150 | # Windows Store app package directory 151 | AppPackages/ 152 | 153 | # Others 154 | *.[Cc]ache 155 | ClientBin/ 156 | [Ss]tyle[Cc]op.* 157 | ~$* 158 | *~ 159 | *.dbmdl 160 | *.dbproj.schemaview 161 | *.pfx 162 | *.publishsettings 163 | node_modules/ 164 | bower_components/ 165 | 166 | # RIA/Silverlight projects 167 | Generated_Code/ 168 | 169 | # Backup & report files from converting an old project file 170 | # to a newer Visual Studio version. Backup files are not needed, 171 | # because we have git ;-) 172 | _UpgradeReport_Files/ 173 | Backup*/ 174 | UpgradeLog*.XML 175 | UpgradeLog*.htm 176 | 177 | # SQL Server files 178 | *.mdf 179 | *.ldf 180 | 181 | # Business Intelligence projects 182 | *.rdl.data 183 | *.bim.layout 184 | *.bim_*.settings 185 | 186 | # Microsoft Fakes 187 | FakesAssemblies/ 188 | 189 | # Node.js Tools for Visual Studio 190 | .ntvs_analysis.dat 191 | 192 | # Visual Studio 6 build log 193 | *.plg 194 | 195 | # Visual Studio 6 workspace options file 196 | *.opt 197 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTracker/Excel-Add-in-JS-CollegeBudgetTracker.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Debug 6 | AnyCPU 7 | {4ADF3E4E-B63B-47B4-99EC-66B2D074B802} 8 | Library 9 | Properties 10 | Excel_Add_in_JS_CollegeBudgetTracker 11 | Excel-Add-in-JS-CollegeBudgetTracker 12 | v4.5 13 | 15.0 14 | 512 15 | {C1CDDADD-2546-481F-9697-4EA41081F2FC};{14822709-B5A1-4724-98CA-57A101D1B079};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC} 16 | False 17 | {d2475430-d5f2-40c3-97f2-286c0082496c} 18 | {11669773-c1ee-4874-8ee3-11226dfc3202} 19 | {d0520189-40ce-4d6f-b498-67bea645d1a2} 20 | {2286e991-e781-40cc-a3f6-b8a17e6d0dfe} 21 | {2dc35bea-d0c1-4446-b31e-af755269ae2d} 22 | OfficeApp 23 | 24 | 25 | true 26 | full 27 | false 28 | bin\Debug\ 29 | DEBUG;TRACE 30 | prompt 31 | 4 32 | false 33 | 34 | 35 | pdbonly 36 | true 37 | bin\Release\ 38 | TRACE 39 | prompt 40 | 4 41 | false 42 | 43 | 44 | 45 | {f8531db1-fc05-4f27-acc3-e721c5a26c68} 46 | 47 | 48 | manifest-oemanifest 49 | 50 | 51 | 52 | 53 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B} 54 | Excel-Add-in-JS-CollegeBudgetTrackerWeb 55 | True 56 | Web 57 | SharePointWebProjectOutput 58 | Excel-Add-in-JS-CollegeBudgetTrackerWeb 59 | False 60 | 61 | 62 | 63 | 10.0 64 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 65 | 66 | 67 | -------------------------------------------------------------------------------- /README-Localized/README-pt-br.md: -------------------------------------------------------------------------------- 1 | # Exemplo de Controlador de Orçamento Escolar do Suplemento do Painel de Tarefas para o Excel 2016 2 | 3 | _Aplica-se ao: Excel 2016_ 4 | 5 | Esse suplemento do painel de tarefas mostra como criar um controlador de orçamento escolar usando as APIs JavaScript no Excel 2016. Há dois tipos: o editor de código e o Visual Studio. 6 | 7 | ![Exemplo de Controlador de Orçamento Escolar](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## Experimente 10 | ### Versão do editor de código 11 | 12 | A maneira mais fácil de implantar e testar o suplemento é copiar o manifesto em um compartilhamento de rede. 13 | 14 | 1. Crie uma pasta em um compartilhamento de rede (por exemplo, \\\MyShare\CollegeBudgetTracker). 15 | 2. Copie o manifesto (CollegeBudgetTrackerManifest.xml) para um compartilhamento de rede (por exemplo, \\\MyShare\MyManifests). 16 | 3. Adicione o local de compartilhamento que contém o manifesto como um catálogo de aplicativos confiáveis no Excel. 17 | 18 | a. Inicie o Excel e abra uma planilha em branco. 19 | 20 | b. Escolha a guia **Arquivo** e escolha **Opções**. 21 | 22 | c. Escolha **Central de Confiabilidade** e, em seguida, escolha o botão **Configurações da Central de Confiabilidade**. 23 | 24 | d. Escolha **Catálogos de Suplementos Confiáveis**. 25 | 26 | e. Na caixa **URL de Catálogo**, insira o caminho para o compartilhamento de rede que você criou na etapa 3 e escolha **Adicionar Catálogo**. 27 | 28 | f. Marque a caixa de seleção **Mostrar no Menu** e escolha **OK**. Será exibida uma mensagem para informá-lo de que suas configurações serão aplicadas na próxima vez que você iniciar o Office. 29 | 30 | 4. Teste e execute o suplemento. 31 | 32 | a. Na **guia Inserir** no Excel 2016, escolha **Meus Suplementos**. 33 | 34 | b. Na caixa de diálogo **Suplementos do Office**, escolha **Pasta Compartilhada**. 35 | 36 | c. Clique no comando **Controlador de Orçamento Escolar** na guia Página Inicial. O suplemento abre um painel de tarefas e cria o controlador de orçamento escolar na planilha ativa, conforme mostrado neste diagrama. 37 | 38 | ![Exemplo de Controlador de Orçamento Escolar](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d. Adicione algumas despesas e o rendimento usando as guias **Adicionar despesas** e **Adicionar rendimento** e veja como os dados e os gráficos mudam dinamicamente. 41 | 42 | ![Amostra de Controlador de Orçamento Escolar](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | Para usar o manifesto em seu próprio Suplemento, edite o elemento do arquivo de manifesto de modo que ele aponte para o arquivo HTML no local de compartilhamento do arquivo Home.html. 45 | 46 | ### Versão do Visual Studio 47 | 1. Copie o projeto para uma pasta local e abra o Excel-Add-in-JS-CollegeBudgetTracker.sln no Visual Studio. 48 | 2. Pressione F5 para criar e implantar o suplemento de exemplo. O Excel inicia e o suplemento abre em um painel de tarefas à direita da planilha em branco, conforme mostrado na figura a seguir. 49 | 50 | ![Exemplo de Controlador de Orçamento Escolar](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. Adicione algumas despesas e o rendimento usando as guias **Adicionar despesas** e **Adicionar rendimento** e veja como os dados e os gráficos mudam dinamicamente. 53 | 54 | ![Exemplo de Controlador de Orçamento Escolar](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### Saiba mais 58 | 59 | As APIs JavaScript para Excel têm muito mais a oferecer à medida que você desenvolve suplementos. Confira a seguir alguns dos recursos disponíveis. 60 | 61 | 1. [Visão geral da programação de Suplementos do Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Explorador de trecho para Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Exemplos de código de Suplementos do Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Referência da API JavaScript para Suplementos do Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [Crie seu primeiro Suplemento do Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # [ARCHIVED] College Budget Tracker Task Pane Add-in Sample for Excel 2016 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 | _Applies to: Excel 2016_ 6 | 7 | This task pane add-in shows how to create a college budget tracker using the JavaScript APIs in Excel 2016. It comes in two flavors: code editor and Visual Studio. 8 | 9 | ![College Budget Tracker Sample](images/CollegeBudgetTracker_tracker.PNG) 10 | 11 | ## Try it out 12 | ### Code editor version 13 | 14 | The simplest way to deploy and test your add-in is to copy the manifest to a network share. 15 | 16 | 1. Create a folder on a network share (for example, \\\MyShare\CollegeBudgetTracker). 17 | 2. Copy the manifest (CollegeBudgetTrackerManifest.xml) to a network share (for example, \\\MyShare\MyManifests). 18 | 3. Add the share location that contains the manifest as a trusted app catalog in Excel. 19 | 20 | a. Launch Excel and open a blank spreadsheet. 21 | 22 | b. Choose the **File** tab, and then choose **Options**. 23 | 24 | c. Choose **Trust Center**, and then choose the **Trust Center Settings** button. 25 | 26 | d. Choose **Trusted Add-in Catalogs**. 27 | 28 | e. In the **Catalog Url** box, enter the path to the network share you created in step 3, and then choose **Add Catalog**. 29 | 30 | f. Select the **Show in Menu** check box, and then choose **OK**. A message appears to inform you that your settings will be applied the next time you start Office. 31 | 32 | 4. Test and run the add-in. 33 | 34 | a. In the **Insert tab** in Excel 2016, choose **My Add-ins**. 35 | 36 | b. In the **Office Add-ins** dialog box, choose **Shared Folder**. 37 | 38 | c. Click **College Budget Tracker** command in the Home tab. The add-in opens in a task pane and creates the college budget tracker in the active sheet as shown in this diagram. 39 | 40 | ![College Budget Tracker Sample](images/CollegeBudgetTracker_tracker.PNG) 41 | 42 | d. Add some expenses and income using the **Add expenses** and the **Add income** tabs and see how the data and the charts changes dynamically. 43 | 44 | ![College Budget Tracker Sample](images/CollegeBudgetTracker_taskpane1.PNG) 45 | 46 | To use the manifest in your own Add-in, edit the element of the manifest file so that it points to the share location of your Home.html file. 47 | 48 | ### Visual Studio version 49 | 1. Copy the project to a local folder and open the Excel-Add-in-JS-CollegeBudgetTracker.sln in Visual Studio. 50 | 2. Press F5 to build and deploy the sample add-in. Excel launches and the add-in opens in a task pane to the right of a blank worksheet, as shown in the following figure. 51 | 52 | ![College Budget Tracker Sample](images/CollegeBudgetTracker_tracker.PNG) 53 | 54 | 3. Add some expenses and income using the **Add expenses** and the **Add income** tabs and see how the data and the charts changes dynamically. 55 | 56 | ![College Budget Tracker Sample](images/CollegeBudgetTracker_taskpane1.PNG) 57 | 58 | 59 | ### Learn more 60 | 61 | The Excel JavaScript APIs have much more to offer you as you develop add-ins. The following are just a few of the available resources. 62 | 63 | 1. [Excel Add-ins programming overview](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 64 | 2. [Snippet Explorer for Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 65 | 3. [Excel Add-ins code samples](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 66 | 4. [Excel Add-ins JavaScript API Reference](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 67 | 5. [Build your first Excel Add-in](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 68 | -------------------------------------------------------------------------------- /README-Localized/README-ru-ru.md: -------------------------------------------------------------------------------- 1 | # Пример надстройки области задач для Excel 2016, позволяющей отслеживать бюджет учебного заведения 2 | 3 | Область применения: Excel 2016 4 | 5 | Этот пример показывает, как с помощью интерфейсов API JavaScript в Excel 2016 создать надстройку, позволяющую отслеживать бюджет учебного заведения. Надстройка представлена в двух вариантах — для редактора кода и для Visual Studio. 6 | 7 | ![Пример надстройки, позволяющей отслеживать бюджет учебного заведения](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## Проверка 10 | ### Версия для редактора кода 11 | 12 | Самый простой способ развернуть и проверить надстройку — скопировать манифест в сетевую папку. 13 | 14 | 1. Создайте в сетевой папке дочернюю папку (например, \\\MyShare\CollegeBudgetTracker). 15 | 2. Скопируйте манифест (CollegeBudgetTrackerManifest.xml) в сетевую папку (например, \\\MyShare\MyManifests). 16 | 3. Добавьте общую папку, содержащую этот манифест, в качестве доверенного каталога приложений в Excel. 17 | 18 | А. Запустите Excel и откройте пустую электронную таблицу. 19 | 20 | Б. Откройте вкладку **Файл** и выберите пункт **Параметры**. 21 | 22 | В. Выберите пункт **Центр управления безопасностью** и нажмите кнопку **Параметры центра управления безопасностью**. 23 | 24 | Г. Выберите элемент **Надежные каталоги надстроек**. 25 | 26 | Д. В поле **URL-адрес каталога** введите путь к сетевой папке, созданной на шаге 3, и выберите элемент **Добавить каталог**. 27 | 28 | Установите флажок **Показывать в меню** и нажмите кнопку **ОК**. Появится сообщение о том, что параметры будут применены при следующем запуске Office. 29 | 30 | 4. Проверьте и запустите надстройку. 31 | 32 | А. На вкладке **Вставка** в Excel 2016 выберите элемент **Мои надстройки**. 33 | 34 | Б. В диалоговом окне **Надстройки Office** выберите элемент **Общая папка**. 35 | 36 | В. Выберите команду **College Budget Tracker** (Надстройка для отслеживания студенческого бюджета) на вкладке Главная. Надстройка откроется в области задач и создаст таблицы и диаграммы на активном листе для отслеживания студенческого бюджета, как показано на схеме. 37 | 38 | ![Пример надстройки, позволяющей отслеживать бюджет учебного заведения](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | Г. Добавьте данные о расходах и доходах с помощью вкладок **Add expenses** (Добавление расходов) и **Add income** (Добавление доходов) и обратите внимание на динамическое изменение данных таблиц и диаграмм. 41 | 42 | ![Пример надстройки, позволяющей отслеживать бюджет учебного заведения](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | Чтобы использовать манифест в собственной надстройке, измените элемент в файле манифеста так, чтобы он указывал на общую папку файла Home.html. 45 | 46 | ### Версия для Visual Studio 47 | 1. Скопируйте проект в локальную папку и откройте файл Excel-Add-in-JS-CollegeBudgetTracker.sln в Visual Studio. 48 | 2. Нажмите клавишу F5, чтобы собрать и развернуть пример надстройки. Запустится Excel, а надстройка откроется в области задач справа от пустого листа, как показано на представленном ниже рисунке. 49 | 50 | ![Пример надстройки, позволяющей отслеживать бюджет учебного заведения](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. Добавьте данные о расходах и доходах с помощью вкладок **Add expenses** (Добавление расходов) и **Add income** (Добавление доходов) и обратите внимание на динамическое изменение данных и диаграмм. 53 | 54 | ![Пример надстройки, позволяющей отслеживать бюджет учебного заведения](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### Подробнее 58 | 59 | Интерфейсы API JavaScript в Excel предоставляют существенно расширенные возможности для разработки надстроек. Ниже указаны лишь некоторые из доступных ресурсов. 60 | 61 | 1. [Общие сведения о создании надстроек Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Обозреватель фрагментов кода для Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Примеры кода надстроек Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Справочник по API JavaScript для надстроек Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [Создание первой надстройки Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /README-Localized/README-de-de.md: -------------------------------------------------------------------------------- 1 | # Aufgabenbereich-Add-In-Beispiel „Studien-Haushaltsplanverfolgung” für Excel 2016 2 | 3 | _Gilt für: Excel 2016_ 4 | 5 | Dieses Aufgabenbereich-Add-In veranschaulicht, wie mithilfe der JavaScript-APIs in Excel 2016 eine Studien-Haushaltsplanverfolgung erstellt werden kann. Es ist in zwei Versionen verfügbar: Code-Editor und Visual Studio. 6 | 7 | ![Studien-Haushaltsplanverfolgungsbeispiel](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## Probieren Sie es aus 10 | ### Code-Editor-Version 11 | 12 | Am einfachsten können Sie Ihr Add-In bereitstellen und testen, indem Sie das Manifest in eine Netzwerkfreigabe kopieren. 13 | 14 | 1. Erstellen Sie einen Ordner in einer Netzwerkfreigabe (zum Beispiel „\\\MyShare\CollegeBudgetTracker”). 15 | 2. Kopieren Sie das Manifest (CollegeBudgetTrackerManifest.xml) in eine Netzwerkfreigabe (z. B. \\\MyShare\MyManifests). 16 | 3. Fügen Sie den Freigabepfad, unter dem das Manifest enthalten ist, als vertrauenswürdigen App-Katalog in Excel hinzu. 17 | 18 | a. Starten Sie Excel, und öffnen Sie ein leeres Arbeitsblatt. 19 | 20 | b. Klicken Sie auf die Registerkarte **Datei**, und klicken Sie dann auf **Optionen**. 21 | 22 | c. Wählen Sie **Trust Center** aus, und klicken Sie dann auf die Schaltfläche **Einstellungen für das Trust Center**. 23 | 24 | d. Klicken Sie auf **Vertrauenswürdige Add-in-Kataloge**. 25 | 26 | e. Geben Sie im Feld **Katalog-URL** den Pfad zu der in Schritt 3 erstellten Netzwerkfreigabe ein, und klicken Sie auf **Katalog hinzufügen**. 27 | 28 | f. Aktivieren Sie das Kontrollkästchen **Im Menü anzeigen**, und wählen Sie dann **OK**. Eine Meldung wird angezeigt, dass Ihre Einstellungen angewendet werden, wenn Office das nächste Mal gestartet wird. 29 | 30 | 4. Testen und führen Sie das Add-In aus. 31 | 32 | a. Klicken Sie auf der Registerkarte **Einfügen** in Excel 2016 auf **Meine-Add-Ins**. 33 | 34 | b. Wählen Sie im Dialogfenster **Office-Add-Ins** die Option **Freigegebener Ordner** aus. 35 | 36 | c. Klicken Sie auf der Registerkarte „Start“ auf den Befehl **Studien-Haushaltsplanverfolgung**. Das Add-In wird in einem Aufgabenbereich geöffnet, wie in diesem Diagramm dargestellt. 37 | 38 | 39 | ![Studien-Haushaltsplanverfolgungsbeispiel](../images/CollegeBudgetTracker_tracker.PNG) 40 | 41 | d. Fügen Sie einige Ausgaben und Einnahmen mithilfe der Registerkarten **Ausgaben hinzufügen** und **Einnahmen hinzufügen** hinzu, und sehen Sie, wie sich die Daten und die Diagramme dynamisch ändern. 42 | 43 | ![College Budget Tracker Sample](../images/CollegeBudgetTracker_taskpane1.PNG) 44 | 45 | Um das Manifest in Ihrem Add-In zu verwenden, müssen Sie das -Element der Manifestdatei bearbeiten, damit es auf den Freigabepfad für die Datei „Home.html” zeigt. 46 | 47 | ### Visual Studio-Version 48 | 1. Kopieren Sie das Projekt in einen lokalen Ordner, und öffnen Sie die Datei „Excel-Add-in-JS-CollegeBudgetTracker.sln” in Visual Studio. 49 | 2. Drücken Sie F5, um das Beispiel-Add-In zu erstellen und bereitzustellen. Excel wird gestartet und das Add-In wird in einem Aufgabenbereich rechts neben einem leeren Arbeitsblatt geöffnet, wie in der folgenden Abbildung dargestellt. 50 | 51 | ![Studien-Haushaltsplanverfolgungsbeispiel](../images/CollegeBudgetTracker_tracker.PNG) 52 | 53 | 3. Fügen Sie einige Ausgaben und Einnahmen mithilfe der Registerkarten **Ausgaben hinzufügen** und **Einnahmen hinzufügen** hinzu, und sehen Sie, wie sich die Daten und die Diagramme dynamisch ändern. 54 | 55 | ![Studien-Haushaltsplanverfolgungsbeispiel](../images/CollegeBudgetTracker_taskpane1.PNG) 56 | 57 | 58 | ### Weitere Informationen 59 | 60 | Die Excel-JavaScript-APIs haben viel mehr bei der Entwicklung von Add-Ins zu bieten. Im Folgenden werden nur einige der verfügbaren Ressourcen aufgeführt. 61 | 62 | 1. [Programmierungsübersicht für Excel-Add-Ins](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 63 | 2. [Codeausschnitt-Explorer für Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 64 | 3. [Codebeispiele zu Excel-Add-Ins](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 65 | 4. [JavaScript-API-Referenz zu Excel-Add-Ins](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 66 | 5. [Erstellen Ihres ersten Excel-Add-Ins](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 67 | -------------------------------------------------------------------------------- /README-Localized/README-fr-fr.md: -------------------------------------------------------------------------------- 1 | # Exemple de complément de volet Office - Suivi du budget universitaire pour Excel 2016 2 | 3 | _S’applique à : Excel 2016_ 4 | 5 | Ce complément de volet Office montre comment créer un outil de suivi du budget universitaire à l’aide des API JavaScript dans Excel 2016. Il a deux versions : éditeur de code et Visual Studio. 6 | 7 | ![Exemple d’outil de suivi de budget universitaire](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## Essayez ! 10 | ### Version d’éditeur de code 11 | 12 | Pour déployer et tester votre complément, le plus simple consiste à copier le fichier manifeste sur un partage réseau. 13 | 14 | 1. Créez un dossier sur un partage réseau (par exemple, \\MyShare\CollegeBudgetTracker). 15 | 2. Copiez le fichier manifeste (CollegeBudgetTrackerManifest.xml) dans un partage réseau (par exemple, \\\MyShare\MyManifests). 16 | 3. Ajoutez l’emplacement de partage qui contient le fichier manifeste sous forme de catalogue d’applications approuvées dans Excel. 17 | 18 | a. Lancez Excel et ouvrez une feuille de calcul vide. 19 | 20 | b. Choisissez l’onglet **Fichier**, puis choisissez **Options**. 21 | 22 | c. Choisissez **Centre de gestion de la confidentialité**, puis cliquez sur le bouton **Paramètres du Centre de gestion de la confidentialité**. 23 | 24 | d. Choisissez **Catalogues de compléments approuvés**. 25 | 26 | e. Dans la zone **URL du catalogue**, entrez le chemin d’accès du partage réseau que vous avez créé à l’étape 3, puis choisissez **Ajouter un catalogue**. 27 | 28 | Activez la case à cocher **Afficher dans le menu**, puis cliquez sur **OK**. Un message s’affiche pour vous informer que vos paramètres seront appliqués la prochaine fois que vous démarrerez Office. 29 | 30 | 4. Testez et exécutez le complément. 31 | 32 | a. Dans l’onglet **Insertion** d’Excel 2016, choisissez **Mes compléments**. 33 | 34 | b. Dans la boîte de dialogue **Compléments Office**, choisissez **Dossier partagé**. 35 | 36 | c. Cliquez sur la commande **Suivi du budget universitaire** dans l’onglet Accueil. Le complément s’ouvre dans un volet Office et crée le suivi du budget universitaire dans la feuille active, comme indiqué sur le diagramme. 37 | 38 | ![Exemple d’outil de suivi de budget universitaire](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d. Ajoutez des dépenses et des revenus à l’aide des onglets **Ajouter des dépenses** et **Ajouter des revenus**, puis observez la façon dont les données et les graphiques changent de manière dynamique. 41 | 42 | ![Exemple de suivi de budget universitaire](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | Pour utiliser le fichier manifeste dans votre propre complément, modifiez l’élément du fichier manifeste afin qu’il pointe vers l’emplacement de partage de votre fichier Home.html. 45 | 46 | ### Version de Visual Studio 47 | 1. Copiez le projet dans un dossier local et ouvrez le fichier Excel-Add-in-JS-CollegeBudgetTracker.sln dans Visual Studio. 48 | 2. Appuyez sur F5 pour créer et déployer l’exemple de complément. Excel démarre et le complément s’ouvre dans un volet Office à droite de la feuille de calcul active, comme indiqué dans l’illustration suivante. 49 | 50 | ![Exemple d’outil de suivi de budget universitaire](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. Ajoutez des dépenses et des revenus à l’aide des onglets **Ajouter des dépenses** et **Ajouter des revenus**, puis observez la façon dont les données et les graphiques changent de manière dynamique. 53 | 54 | ![Exemple d’outil de suivi de budget universitaire](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### En savoir plus 58 | 59 | Les API JavaScript pour Excel peuvent vous offrir beaucoup pour l’élaboration de vos compléments. Voici quelques-unes des ressources disponibles : 60 | 61 | 1. [Présentation de la programmation pour les compléments Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Explorateur d’extraits de code pour Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Exemples de code pour les compléments Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Référence de l’API JavaScript pour les compléments Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [Créer son premier complément Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /README-Localized/README-es-es.md: -------------------------------------------------------------------------------- 1 | # Ejemplo del complemento del panel de tareas del rastreador de presupuestos universitarios para Excel 2016 2 | 3 | _Se aplica a: Excel 2016_ 4 | 5 | Este complemento del panel de tareas muestra cómo crear un rastreador de presupuestos universitarios con las API de JavaScript de Excel 2016. Hay dos tipos: editor de código y Visual Studio. 6 | 7 | ![Ejemplo de rastreador de presupuestos universitarios](../images/CollegeBudgetTracker_tracker.PNG) 8 | 9 | ## Pruébelo 10 | ### Versión del editor de código 11 | 12 | La forma más sencilla de implementar y probar el complemento consiste en copiar el manifiesto en un recurso compartido de red. 13 | 14 | 1. Cree una carpeta en un recurso compartido de red (por ejemplo, \\MiRecursoCompartido\RastreadorPresupuestosUniversitarios). 15 | 2. Copie el manifiesto (CollegeBudgetTrackerManifest.xml) en un recurso compartido de red (por ejemplo, \\\MiRecursoCompartido\\MisManifiestos). 16 | 3. Agregue la ubicación del recurso compartido que contiene el manifiesto como un catálogo de aplicaciones de confianza en Excel. 17 | 18 | a. Inicie Excel y abra una hoja de cálculo en blanco. 19 | 20 | b. Seleccione la pestaña **Archivo** y haga clic en **Opciones**. 21 | 22 | c. Haga clic en **Centro de confianza** y seleccione el botón **Configuración del Centro de confianza**. 23 | 24 | d. Elija **Catálogos de complementos de confianza**. 25 | 26 | e. En el cuadro **URL de catálogo**, escriba la ruta de acceso al recurso compartido de red que creó en el paso 3 y luego elija **Agregar catálogo**. 27 | 28 | f. Active la casilla **Mostrar en el menú** y elija **Aceptar**. Aparecerá un mensaje para informarle de que la configuración se aplicará la próxima vez que inicie Office. 29 | 30 | 4. Pruebe y ejecute el complemento. 31 | 32 | a. En la pestaña **Insertar** de Excel 2016, elija **Mis complementos**. 33 | 34 | b. En el cuadro de diálogo **Complementos de Office**, seleccione **Carpeta compartida**. 35 | 36 | c. Haga clic en el comando **Seguimiento de presupuesto universitario** de la pestaña Inicio. El complemento se abrirá en un panel de tareas y creará el seguimiento del presupuesto universitario en la hoja activa, tal como se muestra en el diagrama. 37 | 38 | ![Ejemplo de rastreador de presupuestos universitarios](../images/CollegeBudgetTracker_tracker.PNG) 39 | 40 | d. Agregue algunos gastos e ingresos mediante las pestañas **Agregar gastos** y **Agregar ingresos** y vea cómo cambian dinámicamente los datos y los gráficos. 41 | 42 | ![Ejemplo de seguimiento del presupuesto universitario](../images/CollegeBudgetTracker_taskpane1.PNG) 43 | 44 | Para usar el manifiesto en su propio complemento, edite el elemento del archivo de manifiesto para que apunte a la ubicación del recurso compartido del archivo Home.html. 45 | 46 | ### Versión de Visual Studio 47 | 1. Copie el proyecto en una carpeta local y abra Excel-Add-in-JS-CollegeBudgetTracker.sln en Visual Studio. 48 | 2. Pulse F5 para crear e implementar el complemento de ejemplo. Excel se inicia y se abre el complemento en un panel de tareas a la derecha de una hoja de cálculo en blanco, como se muestra en la siguiente ilustración. 49 | 50 | ![Ejemplo de rastreador de presupuestos universitarios](../images/CollegeBudgetTracker_tracker.PNG) 51 | 52 | 3. Agregue algunos gastos e ingresos mediante las pestañas **Add expenses** (Agregar gastos) y **Add income** (Agregar ingresos) y vea cómo cambian dinámicamente los datos y los gráficos. 53 | 54 | ![Ejemplo de rastreador de presupuestos universitarios](../images/CollegeBudgetTracker_taskpane1.PNG) 55 | 56 | 57 | ### Obtener más información 58 | 59 | Las API de JavaScript de Excel tienen mucho que ofrecer para el desarrollo de complementos. A continuación se muestran algunos de los recursos disponibles. 60 | 61 | 1. [Introducción a la programación de complementos de Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-programming-overview.md) 62 | 2. [Explorador de fragmentos de código para Excel](http://officesnippetexplorer.azurewebsites.net/#/snippets/excel) 63 | 3. [Ejemplos de código de complementos de Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-code-samples.md) 64 | 4. [Referencia de la API de JavaScript de complementos de Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/excel-add-ins-javascript-reference.md) 65 | 5. [Compilar el primer complemento de Excel](https://github.com/OfficeDev/office-js-docs/blob/master/excel/build-your-first-excel-add-in.md) 66 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTracker/Excel-Add-in-JS-CollegeBudgetTrackerManifest/Excel-Add-in-JS-CollegeBudgetTracker.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 66706729-0473-4a05-a80c-5202f3e97e7c 9 | 1.0.0.0 10 | [Provider name] 11 | en-US 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ReadWriteDocument 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | <Description resid="Contoso.GetStarted.Description"/> 33 | <LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl"/> 34 | </GetStarted> 35 | <ExtensionPoint xsi:type="PrimaryCommandSurface"> 36 | <OfficeTab id="TabHome"> 37 | <Group id="Contoso.GroupId"> 38 | <Label resid="residLabel"/> 39 | <Icon> 40 | <bt:Image size="16" resid="icon_16x16"/> 41 | <bt:Image size="32" resid="icon_32x32"/> 42 | <bt:Image size="64" resid="icon_64x64"/> 43 | <bt:Image size="80" resid="icon_80x80"/> 44 | </Icon> 45 | <Control xsi:type="Button" id="Contoso.ButtonId"> 46 | <Label resid="residLabelButton"/> 47 | <Supertip> 48 | <Title resid="residLabel"/> 49 | <Description resid="residToolTipDescription"/> 50 | </Supertip> 51 | <Icon> 52 | <bt:Image size="16" resid="icon_16x16"/> 53 | <bt:Image size="32" resid="icon_32x32"/> 54 | <bt:Image size="64" resid="icon_64x64"/> 55 | <bt:Image size="80" resid="icon_80x80"/> 56 | </Icon> 57 | <Action xsi:type="ShowTaskpane"> 58 | <SourceLocation resid="residTaskPane"/> 59 | </Action> 60 | </Control> 61 | </Group> 62 | </OfficeTab> 63 | </ExtensionPoint> 64 | </DesktopFormFactor> 65 | </Host> 66 | </Hosts> 67 | <Resources> 68 | <bt:Images> 69 | <bt:Image id="icon_16x16" DefaultValue="~remoteAppUrl/Images/blue_graph_16.png"/> 70 | <bt:Image id="icon_32x32" DefaultValue="~remoteAppUrl/Images/blue_graph_32.png"/> 71 | <bt:Image id="icon_64x64" DefaultValue="~remoteAppUrl/Images/blue_graph_64.png"/> 72 | <bt:Image id="icon_80x80" DefaultValue="~remoteAppUrl/Images/blue_graph_80.png"/> 73 | </bt:Images> 74 | <bt:Urls> 75 | <bt:Url id="Contoso.GetStarted.LearnMoreUrl" DefaultValue="http://dev.office.com/docs/add-ins/design/add-in-commands"/> 76 | <bt:Url id="residTaskPane" DefaultValue="~remoteAppUrl/App/Home/Home.html"/> 77 | </bt:Urls> 78 | <bt:ShortStrings> 79 | <bt:String id="Contoso.GetStarted.Title" DefaultValue="College Budget Tracker"/> 80 | <bt:String id="residLabel" DefaultValue="College Budget Tracker"/> 81 | <bt:String id="residLabelButton" DefaultValue="Track Budget"/> 82 | </bt:ShortStrings> 83 | <bt:LongStrings> 84 | <bt:String id="residDescription" DefaultValue="Excel Add-in sample in JavaScript that tracks student income and expenses."/> 85 | <bt:String id="Contoso.GetStarted.Description" DefaultValue="Click the College Budget Tracker icon on the ribbon, then select the Expenses or Income tab to get started."/> 86 | <bt:String id="residToolTipDescription" DefaultValue="Excel Add-in sample in JavaScript that tracks student income and expenses."/> 87 | </bt:LongStrings> 88 | </Resources> 89 | </VersionOverrides> 90 | </OfficeApp> 91 | -------------------------------------------------------------------------------- /Code Editor Proj/CollegeBudgetTrackerManifest.xml: -------------------------------------------------------------------------------- 1 | <?xml version="1.0" encoding="UTF-8"?> 2 | <!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9--> 3 | <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" 4 | xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 | xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" 6 | xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" 7 | xsi:type="TaskPaneApp"> 8 | <Id>f67b8491-af94-4004-9240-d63b44123f89</Id> 9 | <Version>1.0.0.0</Version> 10 | <ProviderName>Microsoft</ProviderName> 11 | <DefaultLocale>en-US</DefaultLocale> 12 | <DisplayName DefaultValue="Excel-Add-in-JS-CollegeBudgetTracker" /> 13 | <Description DefaultValue="Excel Add-in sample in JavaScript that tracks student income and expenses."/> 14 | <IconUrl DefaultValue="https://collegebudgettracker.azurewebsites.net/Images/blue_graph_32.png" /> 15 | <Hosts> 16 | <Host Name="Workbook"/> 17 | </Hosts> 18 | 19 | <DefaultSettings> 20 | <SourceLocation DefaultValue="https://collegebudgettracker.azurewebsites.net/home.html"/> 21 | </DefaultSettings> 22 | <Permissions>ReadWriteDocument</Permissions> 23 | 24 | <!--Begin AddinCommandsMode integration--> 25 | <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0"> 26 | <Description resid="residDescription"/> 27 | <Hosts> 28 | <Host xsi:type="Workbook"> 29 | <DesktopFormFactor> 30 | <GetStarted> 31 | <Title resid="Contoso.GetStarted.Title"/> 32 | <Description resid="Contoso.GetStarted.Description"/> 33 | <LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl"/> 34 | </GetStarted> 35 | <ExtensionPoint xsi:type="PrimaryCommandSurface"> 36 | <OfficeTab id="TabHome"> 37 | <Group id="Contoso.GroupId"> 38 | <Label resid="residLabel"/> 39 | <Icon> 40 | <bt:Image size="16" resid="icon_16x16"/> 41 | <bt:Image size="32" resid="icon_32x32"/> 42 | <bt:Image size="64" resid="icon_64x64"/> 43 | <bt:Image size="80" resid="icon_80x80"/> 44 | </Icon> 45 | <Control xsi:type="Button" id="Contoso.ButtonId"> 46 | <Label resid="residLabelButton"/> 47 | <Supertip> 48 | <Title resid="residLabel"/> 49 | <Description resid="residToolTipDescription"/> 50 | </Supertip> 51 | <Icon> 52 | <bt:Image size="16" resid="icon_16x16"/> 53 | <bt:Image size="32" resid="icon_32x32"/> 54 | <bt:Image size="64" resid="icon_64x64"/> 55 | <bt:Image size="80" resid="icon_80x80"/> 56 | </Icon> 57 | <Action xsi:type="ShowTaskpane"> 58 | <SourceLocation resid="residTaskPane"/> 59 | </Action> 60 | </Control> 61 | </Group> 62 | </OfficeTab> 63 | </ExtensionPoint> 64 | </DesktopFormFactor> 65 | </Host> 66 | </Hosts> 67 | <Resources> 68 | <bt:Images> 69 | <bt:Image id="icon_16x16" DefaultValue="https://collegebudgettracker.azurewebsites.net/Images/blue_graph_16.png"/> 70 | <bt:Image id="icon_32x32" DefaultValue="https://collegebudgettracker.azurewebsites.net/Images/blue_graph_32.png"/> 71 | <bt:Image id="icon_64x64" DefaultValue="https://collegebudgettracker.azurewebsites.net/Images/blue_graph_64.png"/> 72 | <bt:Image id="icon_80x80" DefaultValue="https://collegebudgettracker.azurewebsites.net/Images/blue_graph_80.png"/> 73 | </bt:Images> 74 | <bt:Urls> 75 | <bt:Url id="Contoso.GetStarted.LearnMoreUrl" DefaultValue="https://dev.office.com/docs/add-ins/design/add-in-commands"/> 76 | <bt:Url id="residTaskPane" DefaultValue="https://collegebudgettracker.azurewebsites.net/home.html"/> 77 | </bt:Urls> 78 | <bt:ShortStrings> 79 | <bt:String id="Contoso.GetStarted.Title" DefaultValue="College Budget Tracker"/> 80 | <bt:String id="residLabel" DefaultValue="College Budget Tracker"/> 81 | <bt:String id="residLabelButton" DefaultValue="Track Budget"/> 82 | </bt:ShortStrings> 83 | <bt:LongStrings> 84 | <bt:String id="residDescription" DefaultValue="Excel Add-in sample in JavaScript that tracks student income and expenses."/> 85 | <bt:String id="Contoso.GetStarted.Description" DefaultValue="Click the College Budget Tracker icon on the ribbon, then select the Expenses or Income tab to get started."/> 86 | <bt:String id="residToolTipDescription" DefaultValue="Excel Add-in sample in JavaScript that tracks student income and expenses."/> 87 | </bt:LongStrings> 88 | </Resources> 89 | </VersionOverrides> 90 | </OfficeApp> -------------------------------------------------------------------------------- /Code Editor Proj/Office.css: -------------------------------------------------------------------------------- 1 | /*****************************************************************/ 2 | /********************** Office CSS library ***********************/ 3 | /********************** Version: 1.0.2.0 *************************/ 4 | /*****************************************************************/ 5 | 6 | /****************************************************************** 7 | Base 8 | ******************************************************************/ 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | height: 100%; 14 | max-height: 100%; 15 | } 16 | 17 | /****************************************************************** 18 | Typography 19 | ******************************************************************/ 20 | body { 21 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif; 22 | font-size: 12px; 23 | color: #262626; 24 | } 25 | 26 | h1 { 27 | font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif; 28 | font-size: 22px; 29 | line-height: 26px; 30 | font-weight: 500; 31 | } 32 | 33 | h2, h3, h4, h5, h6, th { 34 | font-family: "Segoe WP Semibold", "Segoe UI", "Arial", sans-serif; 35 | } 36 | 37 | h2 { 38 | font-size: 18px; 39 | line-height: 22px; 40 | font-weight: 600; 41 | } 42 | 43 | h3, h4, h5, h6 { 44 | font-size: 13px; 45 | line-height: 16px; 46 | } 47 | 48 | h3 { 49 | font-weight: 600; 50 | } 51 | 52 | h4, h5, h6 { 53 | font-weight: normal; 54 | } 55 | 56 | form, input, select, button, textarea { 57 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif; 58 | font-size: 12px; 59 | line-height: 16px; 60 | } 61 | 62 | /****************************************************************** 63 | General 64 | ******************************************************************/ 65 | a { 66 | color: #336699; 67 | text-decoration: none; 68 | } 69 | 70 | a:focus, a:hover, a:active { 71 | text-decoration: underline; 72 | } 73 | 74 | ul { 75 | margin-left: 1.4em; 76 | padding: 0; 77 | } 78 | 79 | hr { 80 | border: none; 81 | height: 1px; 82 | color: #ebebeb; 83 | background-color: #ebebeb; 84 | clear: both; 85 | } 86 | 87 | img { 88 | border: none; 89 | } 90 | 91 | blockquote { 92 | margin-left: 1.4em; 93 | } 94 | 95 | /****************************************************************** 96 | Forms 97 | ******************************************************************/ 98 | form { 99 | clear: both; 100 | } 101 | 102 | label { 103 | margin-right: 3px; 104 | } 105 | 106 | input, textarea, select, button { 107 | margin: 0 0 5px 0; 108 | padding: 3px; 109 | -webkit-box-sizing: border-box; 110 | -moz-box-sizing: border-box; 111 | box-sizing: border-box; 112 | } 113 | 114 | input[type="checkbox"], input[type="radio"] { 115 | margin-right: 4px; 116 | } 117 | 118 | input[type="checkbox"], input[type="radio"], 119 | input[type="file"], input[type="image"] { 120 | padding: 0; 121 | } 122 | 123 | button, textarea, select, 124 | input:not([type]), 125 | input[type="button"], 126 | input[type="color"], 127 | input[type="date"], 128 | input[type="datetime"], 129 | input[type="datetime-local"], 130 | input[type="email"], 131 | input[type="month"], 132 | input[type="number"], 133 | input[type="password"], 134 | input[type="reset"], 135 | input[type="search"], 136 | input[type="submit"], 137 | input[type="tel"], 138 | input[type="text"], 139 | input[type="time"], 140 | input[type="url"], 141 | input[type="week"] { 142 | border: 1px solid #cccccc; 143 | background-color: white; 144 | } 145 | 146 | button, input[type="button"], 147 | input[type="submit"], input[type="reset"] { 148 | padding-left: 10px; 149 | padding-right: 10px; 150 | text-align: center; 151 | } 152 | 153 | button:hover:enabled, 154 | input[type="button"]:hover:enabled, 155 | input[type="submit"]:hover:enabled, 156 | input[type="reset"]:hover:enabled { 157 | border-color: #7eB4ea; 158 | background-color: #e5f1fc; 159 | } 160 | 161 | button:active:enabled, 162 | input[type="button"]:active:enabled, 163 | input[type="submit"]:active:enabled, 164 | input[type="reset"]:active:enabled { 165 | border-color: #569de5; 166 | background-color: #cee5fc; 167 | } 168 | 169 | /****************************************************************** 170 | Scrollbars 171 | ******************************************************************/ 172 | body { 173 | scrollbar-base-color: white; 174 | scrollbar-arrow-color: #ababab; 175 | scrollbar-highlight-color: #ababab; 176 | scrollbar-darkshadow-color: white; 177 | scrollbar-track-color: white; 178 | scrollbar-face-color: white; 179 | } 180 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Content/Office.css: -------------------------------------------------------------------------------- 1 | /*****************************************************************/ 2 | /********************** Office CSS library ***********************/ 3 | /********************** Version: 1.0.2.0 *************************/ 4 | /*****************************************************************/ 5 | 6 | /****************************************************************** 7 | Base 8 | ******************************************************************/ 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | height: 100%; 14 | max-height: 100%; 15 | } 16 | 17 | /****************************************************************** 18 | Typography 19 | ******************************************************************/ 20 | body { 21 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif; 22 | font-size: 12px; 23 | color: #262626; 24 | } 25 | 26 | h1 { 27 | font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif; 28 | font-size: 22px; 29 | line-height: 26px; 30 | font-weight: 500; 31 | } 32 | 33 | h2, h3, h4, h5, h6, th { 34 | font-family: "Segoe WP Semibold", "Segoe UI", "Arial", sans-serif; 35 | } 36 | 37 | h2 { 38 | font-size: 18px; 39 | line-height: 22px; 40 | font-weight: 600; 41 | } 42 | 43 | h3, h4, h5, h6 { 44 | font-size: 13px; 45 | line-height: 16px; 46 | } 47 | 48 | h3 { 49 | font-weight: 600; 50 | } 51 | 52 | h4, h5, h6 { 53 | font-weight: normal; 54 | } 55 | 56 | form, input, select, button, textarea { 57 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif; 58 | font-size: 12px; 59 | line-height: 16px; 60 | } 61 | 62 | /****************************************************************** 63 | General 64 | ******************************************************************/ 65 | a { 66 | color: #336699; 67 | text-decoration: none; 68 | } 69 | 70 | a:focus, a:hover, a:active { 71 | text-decoration: underline; 72 | } 73 | 74 | ul { 75 | margin-left: 1.4em; 76 | padding: 0; 77 | } 78 | 79 | hr { 80 | border: none; 81 | height: 1px; 82 | color: #ebebeb; 83 | background-color: #ebebeb; 84 | clear: both; 85 | } 86 | 87 | img { 88 | border: none; 89 | } 90 | 91 | blockquote { 92 | margin-left: 1.4em; 93 | } 94 | 95 | /****************************************************************** 96 | Forms 97 | ******************************************************************/ 98 | form { 99 | clear: both; 100 | } 101 | 102 | label { 103 | margin-right: 3px; 104 | } 105 | 106 | input, textarea, select, button { 107 | margin: 0 0 5px 0; 108 | padding: 3px; 109 | -webkit-box-sizing: border-box; 110 | -moz-box-sizing: border-box; 111 | box-sizing: border-box; 112 | } 113 | 114 | input[type="checkbox"], input[type="radio"] { 115 | margin-right: 4px; 116 | } 117 | 118 | input[type="checkbox"], input[type="radio"], 119 | input[type="file"], input[type="image"] { 120 | padding: 0; 121 | } 122 | 123 | button, textarea, select, 124 | input:not([type]), 125 | input[type="button"], 126 | input[type="color"], 127 | input[type="date"], 128 | input[type="datetime"], 129 | input[type="datetime-local"], 130 | input[type="email"], 131 | input[type="month"], 132 | input[type="number"], 133 | input[type="password"], 134 | input[type="reset"], 135 | input[type="search"], 136 | input[type="submit"], 137 | input[type="tel"], 138 | input[type="text"], 139 | input[type="time"], 140 | input[type="url"], 141 | input[type="week"] { 142 | border: 1px solid #cccccc; 143 | background-color: white; 144 | } 145 | 146 | button, input[type="button"], 147 | input[type="submit"], input[type="reset"] { 148 | padding-left: 10px; 149 | padding-right: 10px; 150 | text-align: center; 151 | } 152 | 153 | button:hover:enabled, 154 | input[type="button"]:hover:enabled, 155 | input[type="submit"]:hover:enabled, 156 | input[type="reset"]:hover:enabled { 157 | border-color: #7eB4ea; 158 | background-color: #e5f1fc; 159 | } 160 | 161 | button:active:enabled, 162 | input[type="button"]:active:enabled, 163 | input[type="submit"]:active:enabled, 164 | input[type="reset"]:active:enabled { 165 | border-color: #569de5; 166 | background-color: #cee5fc; 167 | } 168 | 169 | /****************************************************************** 170 | Scrollbars 171 | ******************************************************************/ 172 | body { 173 | scrollbar-base-color: white; 174 | scrollbar-arrow-color: #ababab; 175 | scrollbar-highlight-color: #ababab; 176 | scrollbar-darkshadow-color: white; 177 | scrollbar-track-color: white; 178 | scrollbar-face-color: white; 179 | } 180 | -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/App/Home/Home.html: -------------------------------------------------------------------------------- 1 | <!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 2 | See full license at the bottom of this file. --> 3 | 4 | <!DOCTYPE html> 5 | <html> 6 | <head> 7 | <meta charset="UTF-8" /> 8 | <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 9 | <title>College Budget Tracker 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 |

43 | 44 | Expenses 45 |

46 | 47 | Income 48 |

49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 | 61 | 70 |
71 | 78 |
79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 | 87 | 88 | 95 |
96 | 103 |
104 |
105 |
106 |
107 |
108 |
College Budget Tracker
109 |
110 | 111 | 112 | 113 | 137 | -------------------------------------------------------------------------------- /Code Editor Proj/Home.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | College Budget Tracker 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 |

43 | 44 | Expenses 45 |

46 | 47 | Income 48 |

49 |
50 |
51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 | 60 |
61 |
62 | 63 | 64 | 73 |
74 | 80 |
81 | 82 | 83 |
84 | 85 |
86 | 87 | 88 |
89 |
90 | 91 | 92 | 99 |
100 | 106 |
107 | 108 |
109 | 110 | 111 | 112 | 113 |
114 | 115 |
116 |
117 |
College Budget Tracker
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /Code Editor Proj/DropDown.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | /** 4 | * Dropdown Plugin 5 | * 6 | * Given .ms-Dropdown containers with generic elements inside, this plugin hides the original 7 | * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers. 8 | * 9 | * @param {jQuery Object} One or more .ms-Dropdown containers, each with a dropdown (.ms-Dropdown-select) 10 | * @return {jQuery Object} The same containers (allows for chaining) 11 | */ 12 | (function ($) { 13 | $.fn.Dropdown = function () { 14 | 15 | /** Go through each dropdown we've been given. */ 16 | return this.each(function () { 17 | 18 | var $dropdownWrapper = $(this), 19 | $originalDropdown = $dropdownWrapper.children('.ms-Dropdown-select'), 20 | $originalDropdownOptions = $originalDropdown.children('option'), 21 | newDropdownTitle = '', 22 | newDropdownItems = '', 23 | newDropdownSource = ''; 24 | 25 | /** Go through the options to fill up newDropdownTitle and newDropdownItems. */ 26 | $originalDropdownOptions.each(function (index, option) { 27 | 28 | /** If the option is selected, it should be the new dropdown's title. */ 29 | if (option.selected) { 30 | newDropdownTitle = option.text; 31 | } 32 | 33 | /** Add this option to the list of items. */ 34 | newDropdownItems += '
  • ' + option.text + '
    • '; 35 | 36 | }); 37 | 38 | /** Insert the replacement dropdown. */ 39 | newDropdownSource = '' + newDropdownTitle + '
      ' + newDropdownItems + '
    '; 40 | $dropdownWrapper.append(newDropdownSource); 41 | 42 | function _openDropdown(evt) { 43 | if (!$dropdownWrapper.hasClass('is-disabled')) { 44 | 45 | /** First, let's close any open dropdowns on this page. */ 46 | $dropdownWrapper.find('.is-open').removeClass('is-open'); 47 | 48 | /** Stop the click event from propagating, which would just close the dropdown immediately. */ 49 | evt.stopPropagation(); 50 | 51 | /** Before opening, size the items list to match the dropdown. */ 52 | var dropdownWidth = $(this).parents(".ms-Dropdown").width(); 53 | $(this).next(".ms-Dropdown-items").css('width', dropdownWidth + 'px'); 54 | 55 | /** Go ahead and open that dropdown. */ 56 | $dropdownWrapper.toggleClass('is-open'); 57 | $('.ms-Dropdown').each(function () { 58 | if ($(this)[0] !== $dropdownWrapper[0]) { 59 | $(this).removeClass('is-open'); 60 | } 61 | }); 62 | 63 | /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */ 64 | $(document).bind("click.dropdown", function () { 65 | $dropdownWrapper.removeClass('is-open'); 66 | $(document).unbind('click.dropdown'); 67 | }); 68 | } 69 | } 70 | 71 | /** Toggle open/closed state of the dropdown when clicking its title. */ 72 | $dropdownWrapper.on('click', '.ms-Dropdown-title', function (event) { 73 | _openDropdown(event); 74 | }); 75 | 76 | /** Keyboard accessibility */ 77 | $dropdownWrapper.on('keyup', function (event) { 78 | var keyCode = event.keyCode || event.which; 79 | // Open dropdown on enter or arrow up or arrow down and focus on first option 80 | if (!$(this).hasClass('is-open')) { 81 | if (keyCode === 13 || keyCode === 38 || keyCode === 40) { 82 | _openDropdown(event); 83 | if (!$(this).find('.ms-Dropdown-item').hasClass('is-selected')) { 84 | $(this).find('.ms-Dropdown-item:first').addClass('is-selected'); 85 | } 86 | } 87 | } 88 | else if ($(this).hasClass('is-open')) { 89 | // Up arrow focuses previous option 90 | if (keyCode === 38) { 91 | if ($(this).find('.ms-Dropdown-item.is-selected').prev().siblings().size() > 0) { 92 | $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').prev().addClass('is-selected'); 93 | } 94 | } 95 | // Down arrow focuses next option 96 | if (keyCode === 40) { 97 | if ($(this).find('.ms-Dropdown-item.is-selected').next().siblings().size() > 0) { 98 | $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').next().addClass('is-selected'); 99 | } 100 | } 101 | // Enter to select item 102 | if (keyCode === 13) { 103 | if (!$dropdownWrapper.hasClass('is-disabled')) { 104 | 105 | // Item text 106 | var selectedItemText = $(this).find('.ms-Dropdown-item.is-selected').text(); 107 | 108 | $(this).find('.ms-Dropdown-title').html(selectedItemText); 109 | 110 | /** Update the original dropdown. */ 111 | $originalDropdown.find("option").each(function (key, value) { 112 | if (value.text === selectedItemText) { 113 | $(this).prop('selected', true); 114 | } else { 115 | $(this).prop('selected', false); 116 | } 117 | }); 118 | $originalDropdown.change(); 119 | 120 | $(this).removeClass('is-open'); 121 | } 122 | } 123 | } 124 | 125 | // Close dropdown on esc 126 | if (keyCode === 27) { 127 | $(this).removeClass('is-open'); 128 | } 129 | }); 130 | 131 | /** Select an option from the dropdown. */ 132 | $dropdownWrapper.on('click', '.ms-Dropdown-item', function () { 133 | if (!$dropdownWrapper.hasClass('is-disabled')) { 134 | 135 | /** Deselect all items and select this one. */ 136 | $(this).siblings('.ms-Dropdown-item').removeClass('is-selected'); 137 | $(this).addClass('is-selected'); 138 | 139 | /** Update the replacement dropdown's title. */ 140 | $(this).parents().siblings('.ms-Dropdown-title').html($(this).text()); 141 | 142 | /** Update the original dropdown. */ 143 | var selectedItemText = $(this).text(); 144 | $originalDropdown.find("option").each(function (key, value) { 145 | if (value.text === selectedItemText) { 146 | $(this).prop('selected', true); 147 | } else { 148 | $(this).prop('selected', false); 149 | } 150 | }); 151 | $originalDropdown.change(); 152 | } 153 | }); 154 | 155 | }); 156 | }; 157 | })(jQuery); -------------------------------------------------------------------------------- /Code Editor Proj/Home.js: -------------------------------------------------------------------------------- 1 | /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 2 | See full license at the bottom of this file. */ 3 | 4 | (function () { 5 | "use strict"; 6 | 7 | // The initialize function must be run each time a new page is loaded 8 | Office.initialize = function (reason) { 9 | $(document).ready(function () { 10 | app.initialize(); 11 | 12 | $('#add-expense').click(addExpense); 13 | $('#add-income').click(addIncome); 14 | 15 | // If not using Excel 2016, return 16 | if (!Office.context.requirements.isSetSupported('ExcelApi', '1.1')) { 17 | app.showNotification("Need Office 2016 or greater", "Sorry, this add-in only works with newer versions of Excel."); 18 | return; 19 | } 20 | 21 | createBudgetAnalyzer(); 22 | }); 23 | $(".ms-Pivot").Pivot(); 24 | }; 25 | 26 | function createBudgetAnalyzer() { 27 | 28 | // Run a batch operation against the Excel object model 29 | Excel.run(function (ctx) { 30 | 31 | // Create a proxy object for the active worksheet 32 | var dashboardSheet = ctx.workbook.worksheets.getActiveWorksheet(); 33 | 34 | // Queue a command to clear the contents before inserting data 35 | dashboardSheet.getUsedRange().clear(); 36 | 37 | // Queue a command to rename the sheet 38 | dashboardSheet.name = "Dashboard"; 39 | 40 | // Queue commands to set the title and format it 41 | var title = "College Budget Tracker"; 42 | var range = dashboardSheet.getRange("A1"); 43 | range.values = title; 44 | range.format.font.name = "Rockwell"; 45 | range.format.font.size = 22.5; 46 | 47 | 48 | // Queue commands to add the Expenses table at the bottom of the sheet with sample data 49 | var expenseTable = ctx.workbook.tables.add('Dashboard!A117:C117', true); 50 | expenseTable.name = "expenseTable"; 51 | 52 | expenseTable.getHeaderRowRange().values = [["Description", "Cost", "Category"]]; 53 | var tableRows = expenseTable.rows; 54 | 55 | tableRows.add(null, [["Rent", "$600", "Housing"]]); 56 | tableRows.add(null, [["Movie Club", "$75", "Entertainment"]]); 57 | tableRows.add(null, [["Food", "$450", "Food"]]); 58 | tableRows.add(null, [["Car", "$150", "Transportation"]]); 59 | tableRows.add(null, [["Tuition", "$800", "School costs"]]); 60 | tableRows.add(null, [["Books", "$150", "School costs"]]); 61 | tableRows.add(null, [["Gift", "$100", "Other"]]); 62 | tableRows.add(null, [["Loan", "$250", "Loans/Payments"]]); 63 | 64 | // Queue commands to set the title for the Expenses table and format it 65 | var expenseTableTitle = "Monthly Expenses"; 66 | var range = dashboardSheet.getRange("A116"); 67 | range.values = expenseTableTitle; 68 | range.format.font.name = "Rockwell"; 69 | range.format.font.size = 18; 70 | 71 | // Queue commands to add the Income table at the bottom of the sheet with sample data 72 | var incomeTable = ctx.workbook.tables.add('Dashboard!F117:H117', true); 73 | incomeTable.name = "incomeTable"; 74 | 75 | incomeTable.getHeaderRowRange().values = [["Description", "Amount", "Category"]]; 76 | var tableRows = incomeTable.rows; 77 | 78 | tableRows.add(null, [["Wages", "$2500", "Wages"]]); 79 | tableRows.add(null, [["Parents", "$700", "Assistance from parents"]]); 80 | tableRows.add(null, [["Gift", "$100", "Other"]]); 81 | tableRows.add(null, [["Bank interest", "$250", "From savings"]]); 82 | tableRows.add(null, [["Scholarship", "$500", "Financial aid"]]); 83 | 84 | // Queue commands to set the title for the Expenses table and format it 85 | var incomeTableTitle = "Monthly Income"; 86 | var range = dashboardSheet.getRange("F116"); 87 | range.values = incomeTableTitle; 88 | range.format.font.name = "Rockwell"; 89 | range.format.font.size = 18; 90 | 91 | 92 | // Queue commands to create the summary section at the top right 93 | var summaryValues = [["Percentage of income spent", "=D4/D3"], 94 | ["Income", '=SUM(G117:G217)'], 95 | ["Expenses", '=SUM(B117:B217)'], 96 | ["Balance", "=D3-D4"]]; 97 | 98 | // Set the number format before setting the values 99 | dashboardSheet.getRange("D2:D2").numberFormat = "0.00%"; 100 | dashboardSheet.getRange("D3:D5").numberFormat = "$#"; 101 | dashboardSheet.getRange("C2:D5").values = summaryValues; 102 | 103 | dashboardSheet.getRange("C2:D2").format.font.size = 18; 104 | dashboardSheet.getRange("C2:D2").format.font.color = "red"; 105 | dashboardSheet.getRange("C2:D5").format.font.name = "Rockwell"; 106 | dashboardSheet.getRange("C3:D5").format.font.size = 10; 107 | dashboardSheet.getRange("C2:D5").format.borders.getItem("InsideHorizontal").style = "Continuous"; 108 | dashboardSheet.getRange("C2:D5").format.borders.getItem('EdgeBottom').style = 'Continuous'; 109 | dashboardSheet.getRange("C2:D5").format.borders.getItem('EdgeTop').style = 'Continuous'; 110 | dashboardSheet.getRange("C5:D5").format.font.size = 13; 111 | dashboardSheet.getRange("C5:D5").format.font.name = "Rockwell"; 112 | 113 | 114 | // Queue commands to create the Money In section 115 | var moneyInValues = [["Money coming in", ""], 116 | ["Category", "Amount"], 117 | ["Wages", '=IFERROR(SUMIFS(G117:G217,H117:H217,C10),"")'], 118 | ["Financial aid", '=IFERROR(SUMIFS(G117:G217,H117:H217,C11),"")'], 119 | ["From savings", '=IFERROR(SUMIFS(G117:G217,H117:H217,C12),"")'], 120 | ["Assistance from parents", '=IFERROR(SUMIFS(G117:G217,H117:H217,C13),"")'], 121 | ["Other", '=IFERROR(SUMIFS(G117:G217,H117:H217,C14),"")'], 122 | ["Total", "=sum(D10:D14)"]]; 123 | 124 | // Set the number format before setting the values 125 | dashboardSheet.getRange("D10:D15").numberFormat = "$#"; 126 | dashboardSheet.getRange("C8:D15").values = moneyInValues; 127 | dashboardSheet.getRange("C8:D8").format.font.size = 18; 128 | dashboardSheet.getRange("C8:D8").format.font.color = "red"; 129 | dashboardSheet.getRange("C8:D15").format.font.name = "Rockwell"; 130 | dashboardSheet.getRange("C9:D9").format.font.size = 13; 131 | dashboardSheet.getRange("C10:D14").format.font.size = 10; 132 | dashboardSheet.getRange("C8:D15").format.borders.getItem("InsideHorizontal").style = "Continuous"; 133 | dashboardSheet.getRange("C8:D15").format.borders.getItem('EdgeBottom').style = 'Continuous'; 134 | dashboardSheet.getRange("C8:D15").format.borders.getItem('EdgeTop').style = 'Continuous'; 135 | dashboardSheet.getRange("C15:D15").format.font.size = 13; 136 | dashboardSheet.getRange("C15:D15").format.font.name = "Rockwell"; 137 | 138 | // Queue commands to create the Money Out section 139 | var moneyOutValues = [["Money going out", ""], 140 | ["Category", "Cost"], 141 | ["School costs", '=IFERROR(SUMIFS(B117:B217,C117:C217,C20),"")'], 142 | ["Entertainment", '=IFERROR(SUMIFS(B117:B217,C117:C217,C21),"")'], 143 | ["Food", '=IFERROR(SUMIFS(B117:B217,C117:C217,C22),"")'], 144 | ["Housing", '=IFERROR(SUMIFS(B117:B217,C117:C217,C23),"")'], 145 | ["Transportation", '=IFERROR(SUMIFS(B117:B217,C117:C217,C24),"")'], 146 | ["Loans/Payments", '=IFERROR(SUMIFS(B117:B217,C117:C217,C25),"")'], 147 | ["Other", '=IFERROR(SUMIFS(B117:B217,C117:C217,C26),"")'], 148 | ["Total", "=sum(D20:D26)"]]; 149 | 150 | // Set the number format before setting the values 151 | dashboardSheet.getRange("D19:D27").numberFormat = "$#"; 152 | dashboardSheet.getRange("C18:D27").values = moneyOutValues; 153 | dashboardSheet.getRange("C18:D18").format.font.size = 18; 154 | dashboardSheet.getRange("C18:D18").format.font.color = "red"; 155 | dashboardSheet.getRange("C18:D27").format.font.name = "Rockwell"; 156 | dashboardSheet.getRange("C19:D19").format.font.size = 13;; 157 | dashboardSheet.getRange("C20:D26").format.font.size = 10; 158 | dashboardSheet.getRange("C18:D27").format.borders.getItem("InsideHorizontal").style = "Continuous"; 159 | dashboardSheet.getRange("C18:D27").format.borders.getItem('EdgeBottom').style = 'Continuous'; 160 | dashboardSheet.getRange("C18:D27").format.borders.getItem('EdgeTop').style = 'Continuous'; 161 | dashboardSheet.getRange("C27:D27").format.font.size = 13; 162 | dashboardSheet.getRange("C27:D27").format.font.name = "Rockwell"; 163 | 164 | // Queue commands to autofit rows and columns in a sheet 165 | dashboardSheet.getUsedRange().getEntireColumn().format.autofitColumns(); 166 | dashboardSheet.getUsedRange().getEntireRow().format.autofitRows(); 167 | 168 | // Queue commands to create the income chart 169 | var incomeChartDataRange = dashboardSheet.getRange("C10:D14"); 170 | var chart = dashboardSheet.charts.add("doughnut", incomeChartDataRange, "auto"); 171 | chart.setPosition("A3", "A13"); 172 | chart.title.text = "Income"; 173 | chart.title.format.font.size = 15; 174 | chart.title.format.font.color = "red"; 175 | chart.legend.position = "left"; 176 | chart.legend.format.font.name = "Trebuchet MS (Body)"; 177 | chart.legend.format.font.size = 8; 178 | chart.dataLabels.showPercentage = true; 179 | chart.dataLabels.format.font.size = 8; 180 | chart.dataLabels.format.font.color = "white"; 181 | var points = chart.series.getItemAt(0).points; 182 | points.getItemAt(0).format.fill.setSolidColor("#ff3300"); 183 | points.getItemAt(1).format.fill.setSolidColor("#00cccc"); 184 | points.getItemAt(2).format.fill.setSolidColor("#bf6514"); 185 | points.getItemAt(3).format.fill.setSolidColor("#2be6c2"); 186 | points.getItemAt(4).format.fill.setSolidColor("#993cf3"); 187 | 188 | 189 | // Queue commands to create the expenses chart 190 | var expenseChartDataRange = dashboardSheet.getRange("C20:D25"); 191 | var expenseChart = dashboardSheet.charts.add("doughnut", expenseChartDataRange, "auto"); 192 | expenseChart.setPosition("A16", "A26"); 193 | expenseChart.title.text = "Expenses"; 194 | expenseChart.title.format.font.size = 15; 195 | expenseChart.title.format.font.color = "red"; 196 | expenseChart.legend.position = "left"; 197 | expenseChart.legend.format.font.name = "Trebuchet MS (Body)"; 198 | expenseChart.legend.format.font.size = 8; 199 | expenseChart.dataLabels.showPercentage = true; 200 | expenseChart.dataLabels.format.font.size = 8; 201 | expenseChart.dataLabels.format.font.color = "white"; 202 | var points = expenseChart.series.getItemAt(0).points; 203 | points.getItemAt(0).format.fill.setSolidColor("#ff3300"); 204 | points.getItemAt(1).format.fill.setSolidColor("#00cccc"); 205 | points.getItemAt(2).format.fill.setSolidColor("#bf6514"); 206 | points.getItemAt(3).format.fill.setSolidColor("#2be6c2"); 207 | points.getItemAt(4).format.fill.setSolidColor("#993cf3"); 208 | 209 | // Run the queued-up commands, and return a promise to indicate task completion 210 | return ctx.sync(); 211 | }) 212 | .catch(function (error) { 213 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 214 | app.showNotification("Error: " + error); 215 | console.log("Error: " + error); 216 | if (error instanceof OfficeExtension.Error) { 217 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 218 | } 219 | }); 220 | } 221 | 222 | function addExpense() { 223 | 224 | // Run a batch operation against the Excel object model 225 | Excel.run(function (ctx) { 226 | 227 | // Create a proxy object for the expense table rows 228 | var tableRows = ctx.workbook.tables.getItem('expenseTable').rows; 229 | tableRows.add(null, [[$("#expense-description").val(), $("#expense-cost").val(), $("#expense-category").val()]]); 230 | 231 | // Run the queued-up commands, and return a promise to indicate task completion 232 | return ctx.sync(); 233 | }) 234 | .catch(function (error) { 235 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 236 | app.showNotification("Error: " + error); 237 | console.log("Error: " + error); 238 | if (error instanceof OfficeExtension.Error) { 239 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 240 | } 241 | }); 242 | } 243 | 244 | 245 | function addIncome() { 246 | // Run a batch operation against the Excel object model 247 | Excel.run(function (ctx) { 248 | 249 | // Create a proxy object for the expense table rows 250 | var tableRows = ctx.workbook.tables.getItem('incomeTable').rows; 251 | 252 | // Run the queued-up commands, and return a promise to indicate task completion 253 | tableRows.add(null, [[$("#income-description").val(), $("#income-amount").val(), $("#income-category").val()]]); 254 | 255 | // Run the queued-up commands, and return a promise to indicate task completion 256 | return ctx.sync(); 257 | }) 258 | .catch(function (error) { 259 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 260 | app.showNotification("Error: " + error); 261 | console.log("Error: " + error); 262 | if (error instanceof OfficeExtension.Error) { 263 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 264 | } 265 | }); 266 | } 267 | })(); 268 | 269 | /* 270 | Excel-Add-in-JS-CollegeBudgetTracker, https://github.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker 271 | 272 | Copyright (c) Microsoft Corporation 273 | 274 | All rights reserved. 275 | 276 | MIT License: 277 | 278 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 279 | associated documentation files (the "Software"), to deal in the Software without restriction, including 280 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 281 | copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 282 | following conditions: 283 | 284 | The above copyright notice and this permission notice shall be included in all copies or substantial 285 | portions of the Software. 286 | 287 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 288 | LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 289 | SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 290 | ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 291 | USE OR OTHER DEALINGS IN THE SOFTWARE. 292 | */ -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/App/Home/Home.js: -------------------------------------------------------------------------------- 1 | /* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 2 | See full license at the bottom of this file. */ 3 | 4 | /// 5 | 6 | (function () { 7 | "use strict"; 8 | 9 | // The initialize function must be run each time a new page is loaded 10 | Office.initialize = function (reason) { 11 | $(document).ready(function () { 12 | app.initialize(); 13 | 14 | $('#add-expense').click(addExpense); 15 | $('#add-income').click(addIncome); 16 | 17 | // If not using Excel 2016, return 18 | if (!Office.context.requirements.isSetSupported('ExcelApi', '1.1')) { 19 | app.showNotification("Need Office 2016 or greater", "Sorry, this add-in only works with newer versions of Excel."); 20 | return; 21 | } 22 | 23 | // Wire up the Dropdown control 24 | if ($.fn.Dropdown) { 25 | $('.ms-Dropdown').Dropdown(); 26 | } 27 | 28 | // Wire up the Pivot control 29 | if ($.fn.Pivot) { 30 | $('.ms-Pivot').Pivot(); 31 | } 32 | 33 | createBudgetAnalyzer(); 34 | }); 35 | }; 36 | 37 | function createBudgetAnalyzer() { 38 | 39 | // Run a batch operation against the Excel object model 40 | Excel.run(function (ctx) { 41 | 42 | // Create a proxy object for the active worksheet 43 | var dashboardSheet = ctx.workbook.worksheets.getActiveWorksheet(); 44 | 45 | // Queue a command to clear the contents before inserting data 46 | dashboardSheet.getUsedRange().clear(); 47 | 48 | // Queue a command to rename the sheet 49 | dashboardSheet.name = "Dashboard"; 50 | 51 | // Queue commands to set the title and format it 52 | var title = "College Budget Tracker"; 53 | var range = dashboardSheet.getRange("A1"); 54 | range.values = title; 55 | range.format.font.name = "Rockwell"; 56 | range.format.font.size = 22.5; 57 | 58 | 59 | // Queue commands to add the Expenses table at the bottom of the sheet with sample data 60 | var expenseTable = ctx.workbook.tables.add('Dashboard!A117:C117', true); 61 | expenseTable.name = "expenseTable"; 62 | 63 | expenseTable.getHeaderRowRange().values = [["Description", "Cost", "Category"]]; 64 | var tableRows = expenseTable.rows; 65 | 66 | tableRows.add(null, [["Rent", "$600", "Housing"]]); 67 | tableRows.add(null, [["Movie Club", "$75", "Entertainment"]]); 68 | tableRows.add(null, [["Food", "$450", "Food"]]); 69 | tableRows.add(null, [["Car", "$150", "Transportation"]]); 70 | tableRows.add(null, [["Tuition", "$800", "School costs"]]); 71 | tableRows.add(null, [["Books", "$150", "School costs"]]); 72 | tableRows.add(null, [["Gift", "$100", "Other"]]); 73 | tableRows.add(null, [["Loan", "$250", "Loans/Payments"]]); 74 | 75 | // Queue commands to set the title for the Expenses table and format it 76 | var expenseTableTitle = "Monthly Expenses"; 77 | var range = dashboardSheet.getRange("A116"); 78 | range.values = expenseTableTitle; 79 | range.format.font.name = "Rockwell"; 80 | range.format.font.size = 18; 81 | 82 | // Queue commands to add the Income table at the bottom of the sheet with sample data 83 | var incomeTable = ctx.workbook.tables.add('Dashboard!F117:H117', true); 84 | incomeTable.name = "incomeTable"; 85 | 86 | incomeTable.getHeaderRowRange().values = [["Description", "Amount", "Category"]]; 87 | var tableRows = incomeTable.rows; 88 | 89 | tableRows.add(null, [["Wages", "$2500", "Wages"]]); 90 | tableRows.add(null, [["Parents", "$700", "Assistance from parents"]]); 91 | tableRows.add(null, [["Gift", "$100", "Other"]]); 92 | tableRows.add(null, [["Bank interest", "$250", "From savings"]]); 93 | tableRows.add(null, [["Scholarship", "$500", "Financial aid"]]); 94 | 95 | // Queue commands to set the title for the Expenses table and format it 96 | var incomeTableTitle = "Monthly Income"; 97 | var range = dashboardSheet.getRange("F116"); 98 | range.values = incomeTableTitle; 99 | range.format.font.name = "Rockwell"; 100 | range.format.font.size = 18; 101 | 102 | 103 | // Queue commands to create the summary section at the top right 104 | var summaryValues = [["Percentage of income spent", "=D4/D3"], 105 | ["Income", '=SUM(G117:G217)'], 106 | ["Expenses", '=SUM(B117:B217)'], 107 | ["Balance", "=D3-D4"]]; 108 | 109 | // Set the number format before setting the values 110 | dashboardSheet.getRange("D2:D2").numberFormat = "0.00%"; 111 | dashboardSheet.getRange("D3:D5").numberFormat = "$#"; 112 | dashboardSheet.getRange("C2:D5").values = summaryValues; 113 | 114 | dashboardSheet.getRange("C2:D2").format.font.size = 18; 115 | dashboardSheet.getRange("C2:D2").format.font.color = "red"; 116 | dashboardSheet.getRange("C2:D5").format.font.name = "Rockwell"; 117 | dashboardSheet.getRange("C3:D5").format.font.size = 10; 118 | dashboardSheet.getRange("C2:D5").format.borders.getItem("InsideHorizontal").style = "Continuous"; 119 | dashboardSheet.getRange("C2:D5").format.borders.getItem('EdgeBottom').style = 'Continuous'; 120 | dashboardSheet.getRange("C2:D5").format.borders.getItem('EdgeTop').style = 'Continuous'; 121 | dashboardSheet.getRange("C5:D5").format.font.size = 13; 122 | dashboardSheet.getRange("C5:D5").format.font.name = "Rockwell"; 123 | 124 | 125 | // Queue commands to create the Money In section 126 | var moneyInValues = [["Money coming in", ""], 127 | ["Category", "Amount"], 128 | ["Wages", '=IFERROR(SUMIFS(G117:G217,H117:H217,C10),"")'], 129 | ["Financial aid", '=IFERROR(SUMIFS(G117:G217,H117:H217,C11),"")'], 130 | ["From savings", '=IFERROR(SUMIFS(G117:G217,H117:H217,C12),"")'], 131 | ["Assistance from parents", '=IFERROR(SUMIFS(G117:G217,H117:H217,C13),"")'], 132 | ["Other", '=IFERROR(SUMIFS(G117:G217,H117:H217,C14),"")'], 133 | ["Total", "=sum(D10:D14)"]]; 134 | 135 | // Set the number format before setting the values 136 | dashboardSheet.getRange("D10:D15").numberFormat = "$#"; 137 | dashboardSheet.getRange("C8:D15").values = moneyInValues; 138 | dashboardSheet.getRange("C8:D8").format.font.size = 18; 139 | dashboardSheet.getRange("C8:D8").format.font.color = "red"; 140 | dashboardSheet.getRange("C8:D15").format.font.name = "Rockwell"; 141 | dashboardSheet.getRange("C9:D9").format.font.size = 13; 142 | dashboardSheet.getRange("C10:D14").format.font.size = 10; 143 | dashboardSheet.getRange("C8:D15").format.borders.getItem("InsideHorizontal").style = "Continuous"; 144 | dashboardSheet.getRange("C8:D15").format.borders.getItem('EdgeBottom').style = 'Continuous'; 145 | dashboardSheet.getRange("C8:D15").format.borders.getItem('EdgeTop').style = 'Continuous'; 146 | dashboardSheet.getRange("C15:D15").format.font.size = 13; 147 | dashboardSheet.getRange("C15:D15").format.font.name = "Rockwell"; 148 | 149 | // Queue commands to create the Money Out section 150 | var moneyOutValues = [["Money going out", ""], 151 | ["Category", "Cost"], 152 | ["School costs", '=IFERROR(SUMIFS(B117:B217,C117:C217,C20),"")'], 153 | ["Entertainment", '=IFERROR(SUMIFS(B117:B217,C117:C217,C21),"")'], 154 | ["Food", '=IFERROR(SUMIFS(B117:B217,C117:C217,C22),"")'], 155 | ["Housing", '=IFERROR(SUMIFS(B117:B217,C117:C217,C23),"")'], 156 | ["Transportation", '=IFERROR(SUMIFS(B117:B217,C117:C217,C24),"")'], 157 | ["Loans/Payments", '=IFERROR(SUMIFS(B117:B217,C117:C217,C25),"")'], 158 | ["Other", '=IFERROR(SUMIFS(B117:B217,C117:C217,C26),"")'], 159 | ["Total", "=sum(D20:D26)"]]; 160 | 161 | // Set the number format before setting the values 162 | dashboardSheet.getRange("D19:D27").numberFormat = "$#"; 163 | dashboardSheet.getRange("C18:D27").values = moneyOutValues; 164 | dashboardSheet.getRange("C18:D18").format.font.size = 18; 165 | dashboardSheet.getRange("C18:D18").format.font.color = "red"; 166 | dashboardSheet.getRange("C18:D27").format.font.name = "Rockwell"; 167 | dashboardSheet.getRange("C19:D19").format.font.size = 13;; 168 | dashboardSheet.getRange("C20:D26").format.font.size = 10; 169 | dashboardSheet.getRange("C18:D27").format.borders.getItem("InsideHorizontal").style = "Continuous"; 170 | dashboardSheet.getRange("C18:D27").format.borders.getItem('EdgeBottom').style = 'Continuous'; 171 | dashboardSheet.getRange("C18:D27").format.borders.getItem('EdgeTop').style = 'Continuous'; 172 | dashboardSheet.getRange("C27:D27").format.font.size = 13; 173 | dashboardSheet.getRange("C27:D27").format.font.name = "Rockwell"; 174 | 175 | // Queue commands to autofit rows and columns in a sheet 176 | dashboardSheet.getUsedRange().getEntireColumn().format.autofitColumns(); 177 | dashboardSheet.getUsedRange().getEntireRow().format.autofitRows(); 178 | 179 | // Queue commands to create the income chart 180 | var incomeChartDataRange = dashboardSheet.getRange("C10:D14"); 181 | var chart = dashboardSheet.charts.add("doughnut", incomeChartDataRange, "auto"); 182 | chart.setPosition("A3", "A13"); 183 | chart.title.text = "Income"; 184 | chart.title.format.font.size = 15; 185 | chart.title.format.font.color = "red"; 186 | chart.legend.position = "left"; 187 | chart.legend.format.font.name = "Trebuchet MS (Body)"; 188 | chart.legend.format.font.size = 8; 189 | chart.dataLabels.showPercentage = true; 190 | chart.dataLabels.format.font.size = 8; 191 | chart.dataLabels.format.font.color = "white"; 192 | var points = chart.series.getItemAt(0).points; 193 | points.getItemAt(0).format.fill.setSolidColor("#ff3300"); 194 | points.getItemAt(1).format.fill.setSolidColor("#00cccc"); 195 | points.getItemAt(2).format.fill.setSolidColor("#bf6514"); 196 | points.getItemAt(3).format.fill.setSolidColor("#2be6c2"); 197 | points.getItemAt(4).format.fill.setSolidColor("#993cf3"); 198 | 199 | 200 | // Queue commands to create the expenses chart 201 | var expenseChartDataRange = dashboardSheet.getRange("C20:D25"); 202 | var expenseChart = dashboardSheet.charts.add("doughnut", expenseChartDataRange, "auto"); 203 | expenseChart.setPosition("A16", "A26"); 204 | expenseChart.title.text = "Expenses"; 205 | expenseChart.title.format.font.size = 15; 206 | expenseChart.title.format.font.color = "red"; 207 | expenseChart.legend.position = "left"; 208 | expenseChart.legend.format.font.name = "Trebuchet MS (Body)"; 209 | expenseChart.legend.format.font.size = 8; 210 | expenseChart.dataLabels.showPercentage = true; 211 | expenseChart.dataLabels.format.font.size = 8; 212 | expenseChart.dataLabels.format.font.color = "white"; 213 | var points = expenseChart.series.getItemAt(0).points; 214 | points.getItemAt(0).format.fill.setSolidColor("#ff3300"); 215 | points.getItemAt(1).format.fill.setSolidColor("#00cccc"); 216 | points.getItemAt(2).format.fill.setSolidColor("#bf6514"); 217 | points.getItemAt(3).format.fill.setSolidColor("#2be6c2"); 218 | points.getItemAt(4).format.fill.setSolidColor("#993cf3"); 219 | 220 | // Run the queued-up commands, and return a promise to indicate task completion 221 | return ctx.sync(); 222 | }) 223 | .catch(function (error) { 224 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 225 | app.showNotification("Error: " + error); 226 | console.log("Error: " + error); 227 | if (error instanceof OfficeExtension.Error) { 228 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 229 | } 230 | }); 231 | } 232 | 233 | function addExpense() { 234 | 235 | // Run a batch operation against the Excel object model 236 | Excel.run(function (ctx) { 237 | 238 | // Create a proxy object for the expense table rows 239 | var tableRows = ctx.workbook.tables.getItem('expenseTable').rows; 240 | tableRows.add(null, [[$("#expense-description").val(), $("#expense-cost").val(), $("#expense-category").val()]]); 241 | 242 | // Run the queued-up commands, and return a promise to indicate task completion 243 | return ctx.sync(); 244 | }) 245 | .catch(function (error) { 246 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 247 | app.showNotification("Error: " + error); 248 | console.log("Error: " + error); 249 | if (error instanceof OfficeExtension.Error) { 250 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 251 | } 252 | }); 253 | } 254 | 255 | 256 | function addIncome() { 257 | // Run a batch operation against the Excel object model 258 | Excel.run(function (ctx) { 259 | 260 | // Create a proxy object for the expense table rows 261 | var tableRows = ctx.workbook.tables.getItem('incomeTable').rows; 262 | 263 | // Run the queued-up commands, and return a promise to indicate task completion 264 | tableRows.add(null, [[$("#income-description").val(), $("#income-amount").val(), $("#income-category").val()]]); 265 | 266 | // Run the queued-up commands, and return a promise to indicate task completion 267 | return ctx.sync(); 268 | }) 269 | .catch(function (error) { 270 | // Always be sure to catch any accumulated errors that bubble up from the Excel.run execution 271 | app.showNotification("Error: " + error); 272 | console.log("Error: " + error); 273 | if (error instanceof OfficeExtension.Error) { 274 | console.log("Debug info: " + JSON.stringify(error.debugInfo)); 275 | } 276 | }); 277 | } 278 | })(); 279 | 280 | /* 281 | Excel-Add-in-JS-CollegeBudgetTracker, https://github.com/OfficeDev/Excel-Add-in-JS-CollegeBudgetTracker 282 | 283 | Copyright (c) Microsoft Corporation 284 | 285 | All rights reserved. 286 | 287 | MIT License: 288 | 289 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 290 | associated documentation files (the "Software"), to deal in the Software without restriction, including 291 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 292 | copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 293 | following conditions: 294 | 295 | The above copyright notice and this permission notice shall be included in all copies or substantial 296 | portions of the Software. 297 | 298 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 299 | LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT 300 | SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 301 | ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 302 | USE OR OTHER DEALINGS IN THE SOFTWARE. 303 | */ -------------------------------------------------------------------------------- /Visual Studio Proj/Excel-Add-in-JS-CollegeBudgetTrackerWeb/Excel-Add-in-JS-CollegeBudgetTrackerWeb.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Debug 6 | AnyCPU 7 | 8 | 9 | 2.0 10 | {D8526504-AE38-47EF-9BA0-EA1E655ADC9B} 11 | {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc} 12 | Library 13 | Properties 14 | Excel_Add_in_JS_CollegeBudgetTrackerWeb 15 | Excel-Add-in-JS-CollegeBudgetTrackerWeb 16 | v4.5 17 | true 18 | 44330 19 | 20 | 21 | 22 | 15.0 23 | 24 | 25 | 26 | true 27 | full 28 | false 29 | bin\ 30 | DEBUG;TRACE 31 | prompt 32 | 4 33 | 34 | 35 | pdbonly 36 | true 37 | bin\ 38 | TRACE 39 | prompt 40 | 4 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | Web.config 64 | 65 | 66 | Web.config 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 10.0 354 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | True 364 | True 365 | 62972 366 | / 367 | http://localhost:62972/ 368 | False 369 | False 370 | 371 | 372 | False 373 | 374 | 375 | 376 | 377 | 384 | --------------------------------------------------------------------------------