Discover what Office Add-ins can do for you today!
- Achieve more with Office integration
- Unlock features and functionality
- Create and visualize like a pro
Modify the source files, then click Run.
Run
--------------------------------------------------------------------------------
/dist/taskpane.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the project root for license information.
4 | */
5 |
6 | html,
7 | body {
8 | width: 100%;
9 | height: 100%;
10 | margin: 0;
11 | padding: 0;
12 | }
13 |
14 | ul {
15 | margin: 0;
16 | padding: 0;
17 | }
18 |
19 | .ms-welcome__header {
20 | padding: 20px;
21 | padding-bottom: 30px;
22 | padding-top: 100px;
23 | display: -webkit-flex;
24 | display: flex;
25 | -webkit-flex-direction: column;
26 | flex-direction: column;
27 | align-items: center;
28 | }
29 |
30 | .ms-welcome__main {
31 | display: -webkit-flex;
32 | display: flex;
33 | -webkit-flex-direction: column;
34 | flex-direction: column;
35 | -webkit-flex-wrap: nowrap;
36 | flex-wrap: nowrap;
37 | -webkit-align-items: center;
38 | align-items: center;
39 | -webkit-flex: 1 0 0;
40 | flex: 1 0 0;
41 | padding: 10px 20px;
42 | }
43 |
44 | .ms-welcome__main > h2 {
45 | width: 100%;
46 | text-align: center;
47 | }
48 |
49 | .ms-welcome__features {
50 | list-style-type: none;
51 | margin-top: 20px;
52 | }
53 |
54 | .ms-welcome__features.ms-List .ms-ListItem {
55 | padding-bottom: 20px;
56 | display: -webkit-flex;
57 | display: flex;
58 | }
59 |
60 | .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
61 | margin-right: 10px;
62 | }
63 |
64 | .ms-welcome__action.ms-Button--hero {
65 | margin-top: 30px;
66 | }
67 |
68 | .ms-Button.ms-Button--hero .ms-Button-label {
69 | color: #0078d7;
70 | }
71 |
72 | .ms-Button.ms-Button--hero:hover .ms-Button-label,
73 | .ms-Button.ms-Button--hero:focus .ms-Button-label{
74 | color: #005a9e;
75 | cursor: pointer;
76 | }
77 |
78 | b {
79 | font-weight: bold;
80 | }
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "name": "Excel Desktop",
9 | "type": "node",
10 | "request": "attach",
11 | "port": 9229,
12 | "protocol": "inspector",
13 | "timeout": 600000,
14 | "trace": true,
15 | "preLaunchTask": "Debug: Desktop",
16 | "postDebugTask": "Stop Debug",
17 | "outFiles": [ "${workspaceFolder}/dist/**/*.js" ]
18 | },
19 | {
20 | "name": "Office Online (Chrome)",
21 | "type": "chrome",
22 | "request": "launch",
23 | // To debug your Add-in:
24 | // 1. When prompted, enter the url (share link) to an Office Online document.
25 | // 2. Sideload your Add-in. https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing
26 | "url": "${input:officeOnlineDocumentUrl}",
27 | "webRoot": "${workspaceFolder}",
28 | "preLaunchTask": "Debug: Web"
29 | },
30 | {
31 | "name": "Office Online (Edge)",
32 | "type": "edge",
33 | "request": "launch",
34 | // To debug your Add-in:
35 | // 1. When prompted, enter the url (share link) to an Office Online document.
36 | // 2. Sideload your Add-in. https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing
37 | "url": "${input:officeOnlineDocumentUrl}",
38 | "webRoot": "${workspaceFolder}",
39 | "preLaunchTask": "Debug: Web"
40 | }
41 | ],
42 | "inputs": [
43 | {
44 | "id": "officeOnlineDocumentUrl",
45 | "type": "promptString",
46 | "description": "Please enter the url for the Office Online document."
47 | }
48 | ]
49 | }
--------------------------------------------------------------------------------
/src/taskpane/taskpane.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the project root for license information.
4 | */
5 | /* $ms-neutralPrimary:"[theme:neutralPrimary, default:#333333]"; */
6 |
7 | html,
8 | body {
9 | width: 100%;
10 | height: 100%;
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | ul {
16 | margin: 0;
17 | padding: 0;
18 | }
19 |
20 | .ms-welcome__header {
21 | /* background-color: "[theme: neutralDark, default: #212121]"; */
22 | padding: 20px;
23 | padding-bottom: 30px;
24 | padding-top: 60px;
25 | display: -webkit-flex;
26 | display: flex;
27 | -webkit-flex-direction: column;
28 | flex-direction: column;
29 | align-items: center;
30 | }
31 |
32 | #grid_overview_header_row.ms-Grid-col,
33 | h3 {
34 | color: #164cdf;
35 | height: 8px;
36 | font-family: "Segoe UI Semibold";
37 | }
38 |
39 | .ms-welcome__header > h1 {
40 | color: #ffffff;
41 | }
42 |
43 | .ms-welcome__main {
44 | display: -webkit-flex;
45 | display: flex;
46 | -webkit-flex-direction: column;
47 | flex-direction: column;
48 | -webkit-flex-wrap: nowrap;
49 | flex-wrap: nowrap;
50 | -webkit-align-items: center;
51 | align-items: center;
52 | -webkit-flex: 1 0 0;
53 | flex: 1 0 0;
54 | padding: 10px 20px;
55 | }
56 |
57 | .ms-welcome__main > h2 {
58 | width: 100%;
59 | text-align: center;
60 | }
61 |
62 | .ms-welcome__features {
63 | list-style-type: none;
64 | margin-top: 20px;
65 | }
66 |
67 | .ms-welcome__features.ms-List .ms-ListItem {
68 | padding-bottom: 20px;
69 | display: -webkit-flex;
70 | display: flex;
71 | }
72 |
73 | .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
74 | margin-right: 10px;
75 | }
76 |
77 | .ms-welcome__action.ms-Button--hero {
78 | margin-top: 30px;
79 | }
80 |
81 | .ms-Button.ms-Button--hero .ms-Button-label {
82 | color: #0078d7;
83 | }
84 |
85 | .ms-Button.ms-Button--hero:hover .ms-Button-label,
86 | .ms-Button.ms-Button--hero:focus .ms-Button-label {
87 | color: #005a9e;
88 | cursor: pointer;
89 | }
90 |
91 | b {
92 | font-weight: bold;
93 | }
94 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Custom functions in Excel
2 |
3 | Custom functions enable you to add new functions to Excel by defining those functions in JavaScript as part of an add-in. Users within Excel can access custom functions just as they would any native function in Excel, such as `SUM()`.
4 |
5 | This repository contains the source code used by the [Yo Office generator](https://github.com/OfficeDev/generator-office) when you create a new custom functions project. You can also use this repository as a sample to base your own custom functions project from if you choose not to use the generator. For more detailed information about custom functions in Excel, see the [Custom functions overview](https://docs.microsoft.com/office/dev/add-ins/excel/custom-functions-overview) article in the Office Add-ins documentation or see the [additional resources](#additional-resources) section of this repository.
6 |
7 | ## Debugging custom functions
8 |
9 | This template supports debugging custom functions from [Visual Studio Code](https://code.visualstudio.com/). For more information see [Custom functions debugging](https://aka.ms/custom-functions-debug). For general information on debugging task panes and other Office Add-in parts, see [Test and debug Office Add-ins](https://docs.microsoft.com/office/dev/add-ins/testing/test-debug-office-add-ins).
10 |
11 | ## Questions and comments
12 |
13 | We'd love to get your feedback about this sample. You can send your feedback to us in the *Issues* section of this repository.
14 |
15 | Questions about Microsoft Office 365 development in general should be posted to [Stack Overflow](http://stackoverflow.com/questions/tagged/office-js+API). If your question is about the Office JavaScript APIs, make sure it's tagged with [office-js].
16 |
17 | ## Additional resources
18 |
19 | * [Custom functions overview](https://docs.microsoft.com/office/dev/add-ins/excel/custom-functions-overview)
20 | * [Custom functions best practices](https://docs.microsoft.com/office/dev/add-ins/excel/custom-functions-best-practices)
21 | * [Custom functions runtime](https://docs.microsoft.com/office/dev/add-ins/excel/custom-functions-runtime)
22 | * [Office add-in documentation](https://docs.microsoft.com/office/dev/add-ins/overview/office-add-ins)
23 | * More Office Add-in samples at [OfficeDev on Github](https://github.com/officedev)
24 |
25 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
26 |
27 | ## Copyright
28 |
29 | Copyright (c) 2017 Microsoft Corporation. All rights reserved.
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const devCerts = require("office-addin-dev-certs");
2 | const CleanWebpackPlugin = require("clean-webpack-plugin");
3 | const CopyWebpackPlugin = require("copy-webpack-plugin");
4 | const CustomFunctionsMetadataPlugin = require("custom-functions-metadata-plugin");
5 | const HtmlWebpackPlugin = require("html-webpack-plugin");
6 | const webpack = require("webpack");
7 |
8 | module.exports = async (env, options) => {
9 | const dev = options.mode === "development";
10 | const config = {
11 | devtool: "source-map",
12 | entry: {
13 | functions: "./src/functions/functions.ts",
14 | polyfill: "@babel/polyfill",
15 | taskpane: "./src/taskpane/taskpane.ts",
16 | commands: "./src/commands/commands.ts"
17 | },
18 | resolve: {
19 | extensions: [".ts", ".tsx", ".html", ".js"]
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.ts$/,
25 | exclude: /node_modules/,
26 | use: "babel-loader"
27 | },
28 | {
29 | test: /\.tsx?$/,
30 | exclude: /node_modules/,
31 | use: "ts-loader"
32 | },
33 | {
34 | test: /\.html$/,
35 | exclude: /node_modules/,
36 | use: "html-loader"
37 | },
38 | {
39 | test: /\.(png|jpg|jpeg|gif)$/,
40 | use: "file-loader"
41 | }
42 | ]
43 | },
44 | plugins: [
45 | new CleanWebpackPlugin({
46 | cleanOnceBeforeBuildPatterns: dev ? [] : ["**/*"]
47 | }),
48 | new CustomFunctionsMetadataPlugin({
49 | output: "functions.json",
50 | input: "./src/functions/functions.ts"
51 | }),
52 | new HtmlWebpackPlugin({
53 | filename: "functions.html",
54 | template: "./src/functions/functions.html",
55 | chunks: ["polyfill", "functions"]
56 | }),
57 | new HtmlWebpackPlugin({
58 | filename: "taskpane.html",
59 | template: "./src/taskpane/taskpane.html",
60 | chunks: ["polyfill", "taskpane"]
61 | }),
62 | new CopyWebpackPlugin([
63 | {
64 | to: "taskpane.css",
65 | from: "./src/taskpane/taskpane.css"
66 | }
67 | ]),
68 | new HtmlWebpackPlugin({
69 | filename: "commands.html",
70 | template: "./src/commands/commands.html",
71 | chunks: ["polyfill", "commands"]
72 | })
73 | ],
74 | devServer: {
75 | headers: {
76 | "Access-Control-Allow-Origin": "*"
77 | },
78 | https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
79 | port: process.env.npm_package_config_dev_server_port || 3000
80 | }
81 | };
82 |
83 | return config;
84 | };
85 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "excel-custom-functions",
3 | "version": "2.0.0",
4 | "repository": {
5 | "type": "git",
6 | "url": "https://github.com/OfficeDev/Excel-Custom-Functions.git"
7 | },
8 | "license": "MIT",
9 | "config": {
10 | "app-to-debug": "excel",
11 | "app-type-to-debug": "desktop",
12 | "dev-server-port": 3000,
13 | "source-bundle-url-path": "index.win32"
14 | },
15 | "scripts": {
16 | "build": "webpack -p --mode production --https false",
17 | "build:dev": "webpack --mode development --https false",
18 | "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
19 | "dev-server": "webpack-dev-server --mode development",
20 | "lint": "office-addin-lint check",
21 | "lint:fix": "office-addin-lint fix",
22 | "prettier": "office-addin-lint prettier",
23 | "start": "office-addin-debugging start manifest.xml",
24 | "start:desktop": "office-addin-debugging start manifest.xml desktop",
25 | "start:web": "office-addin-debugging start manifest.xml web",
26 | "stop": "office-addin-debugging stop manifest.xml",
27 | "validate": "office-addin-manifest validate manifest.xml",
28 | "watch": "webpack --mode development --watch"
29 | },
30 | "dependencies": {
31 | "@microsoft/sp-office-ui-fabric-core": "^1.10.0",
32 | "@types/react": "16.7.22",
33 | "@types/react-dom": "16.0.11",
34 | "@types/react-redux": "latest",
35 | "office-ui-fabric-react": "6.148.1",
36 | "react": "^16.13.1"
37 | },
38 | "devDependencies": {
39 | "@babel/core": "^7.9.0",
40 | "@babel/polyfill": "^7.8.7",
41 | "@babel/preset-env": "^7.9.0",
42 | "@types/custom-functions-runtime": "^1.5.0",
43 | "@types/find-process": "1.2.0",
44 | "@types/office-js": "^1.0.91",
45 | "@types/office-runtime": "^1.0.13",
46 | "babel-loader": "^8.1.0",
47 | "clean-webpack-plugin": "^2.0.1",
48 | "copy-webpack-plugin": "^5.1.1",
49 | "custom-functions-metadata-plugin": "^1.0.26",
50 | "eslint-config-office-addins": "^1.0.15",
51 | "file-loader": "^4.2.0",
52 | "html-loader": "^0.5.5",
53 | "html-webpack-plugin": "^4.0.4",
54 | "office-addin-cli": "^1.0.9",
55 | "office-addin-debugging": "^3.0.25",
56 | "office-addin-dev-certs": "^1.5.0",
57 | "office-addin-lint": "^1.0.21",
58 | "office-addin-manifest": "^1.5.0",
59 | "office-addin-prettier-config": "^1.0.12",
60 | "source-map-loader": "^0.2.4",
61 | "ts-loader": "^6.2.2",
62 | "typescript": "^3.8.3",
63 | "webpack": "^4.42.1",
64 | "webpack-cli": "^3.3.11",
65 | "webpack-dev-server": "^3.10.3",
66 | "@types/react": "16.7.22",
67 | "@types/react-dom": "16.0.11",
68 | "@types/react-redux": "latest",
69 | "office-ui-fabric-react": "6.148.1"
70 | },
71 | "prettier": "office-addin-prettier-config"
72 | }
73 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // See https://go.microsoft.com/fwlink/?LinkId=733558
3 | // for the documentation about the tasks.json format
4 | "version": "2.0.0",
5 | "tasks": [
6 | {
7 | "label": "Build (Development)",
8 | "type": "npm",
9 | "script": "build:dev",
10 | "group": {
11 | "kind": "build",
12 | "isDefault": true
13 | },
14 | "presentation": {
15 | "clear": true,
16 | "panel": "shared",
17 | "showReuseMessage": false
18 | }
19 | },
20 | {
21 | "label": "Build (Production)",
22 | "type": "npm",
23 | "script": "build",
24 | "group": "build",
25 | "presentation": {
26 | "clear": true,
27 | "panel": "shared",
28 | "showReuseMessage": false
29 | }
30 | },
31 | {
32 | "label": "Debug: Desktop",
33 | "type": "npm",
34 | "script": "start:desktop",
35 | "presentation": {
36 | "clear": true,
37 | "panel": "shared",
38 | "showReuseMessage": false
39 | },
40 | "problemMatcher": []
41 | },
42 | {
43 | "label": "Debug: Web",
44 | "type": "npm",
45 | "script": "start:web",
46 | "presentation": {
47 | "clear": true,
48 | "panel": "shared",
49 | "showReuseMessage": false
50 | },
51 | "problemMatcher": []
52 | },
53 | {
54 | "label": "Dev Server",
55 | "type": "npm",
56 | "script": "dev-server",
57 | "presentation": {
58 | "clear": true,
59 | "panel": "dedicated"
60 | },
61 | "problemMatcher": [],
62 | "runOptions": {
63 | "runOn": "folderOpen"
64 | }
65 | },
66 | {
67 | "label": "Install",
68 | "type": "npm",
69 | "script": "install",
70 | "presentation": {
71 | "clear": true,
72 | "panel": "shared",
73 | "showReuseMessage": false
74 | },
75 | "problemMatcher": []
76 | },
77 | {
78 | "label": "Lint: Check for problems",
79 | "type": "npm",
80 | "script": "lint",
81 | "problemMatcher": [
82 | "$eslint-stylish"
83 | ]
84 | },
85 | {
86 | "label": "Lint: Fix all auto-fixable problems",
87 | "type": "npm",
88 | "script": "lint:fix",
89 | "problemMatcher": [
90 | "$eslint-stylish"
91 | ]
92 | },
93 | {
94 | "label": "Stop Debug",
95 | "type": "npm",
96 | "script": "stop",
97 | "presentation": {
98 | "clear": true,
99 | "panel": "shared",
100 | "showReuseMessage": false
101 | },
102 | "problemMatcher": []
103 | },
104 | {
105 | "label": "Watch",
106 | "type": "npm",
107 | "script": "watch",
108 | "presentation": {
109 | "clear": true,
110 | "panel": "dedicated"
111 | },
112 | "problemMatcher": []
113 | },
114 | ]
115 | }
116 |
--------------------------------------------------------------------------------
/dist/taskpane.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=308)}({308:function(e,t){var n=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(o,u){function i(e){try{a(r.next(e))}catch(e){u(e)}}function l(e){try{a(r.throw(e))}catch(e){u(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,l)}a((r=r.apply(e,t||[])).next())}))},r=this&&this.__generator||function(e,t){var n,r,o,u,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function l(u){return function(l){return function(u){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return i.label++,{value:u[1],done:!1};case 5:i.label++,r=u[1],u=[0];continue;case 7:u=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){i=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]
32 |