├── .nvmrc ├── .github ├── images │ ├── fruit.jpg │ ├── msn-logo.png │ ├── crustacean.jpg │ ├── green-leaf.jpg │ ├── xbox-logo.png │ ├── chili-peppers.jpg │ ├── dried-legume.jpg │ ├── microsoft-logo.png │ └── addin-samples-gallery-screenshot.png └── workflows │ └── auto-publish.yml ├── snippet-extractor-metadata ├── excel.xlsx ├── word.xlsx ├── outlook.xlsx └── powerpoint.xlsx ├── view ├── project.json └── powerpoint.json ├── view-prod ├── project.json └── powerpoint.json ├── .gitattributes ├── playlists-prod └── project.yaml ├── playlists └── project.yaml ├── .vscode ├── cSpell.json └── launch.json ├── samples ├── excel │ ├── 16-custom-functions │ │ ├── basic-function.yaml │ │ ├── volatile-function.yaml │ │ ├── web-call-function.yaml │ │ ├── streaming-function.yaml │ │ ├── custom-functions-errors.yaml │ │ └── custom-enum.yaml │ ├── default.yaml │ ├── 01-basics │ │ ├── basic-api-call.yaml │ │ ├── basic-api-call-es5.yaml │ │ └── basic-common-api-call.yaml │ ├── 50-workbook │ │ └── workbook-get-active-cell.yaml │ └── 54-worksheet │ │ └── list-worksheets.yaml ├── project │ ├── basics │ │ └── basic-common-api-call.yaml │ └── default.yaml ├── web │ └── default.yaml ├── outlook │ ├── default.yaml │ ├── 25-item-save-and-close │ │ ├── close.yaml │ │ ├── save.yaml │ │ └── close-async.yaml │ ├── 90-other-item-apis │ │ ├── get-subject-read.yaml │ │ ├── get-item-class-read.yaml │ │ ├── get-location-read.yaml │ │ ├── get-conversation-id-message.yaml │ │ ├── get-internet-message-id-read.yaml │ │ ├── get-normalized-subject-read.yaml │ │ ├── get-date-time-created-read.yaml │ │ ├── get-date-time-modified-read.yaml │ │ ├── send-async.yaml │ │ ├── get-item-type.yaml │ │ ├── get-eml-format.yaml │ │ ├── item-id-compose.yaml │ │ ├── set-selected-data.yaml │ │ ├── get-in-reply-to.yaml │ │ ├── get-item-class-async.yaml │ │ ├── get-end-read.yaml │ │ ├── get-start-read.yaml │ │ ├── get-set-subject-compose.yaml │ │ └── get-conversation-index.yaml │ ├── 30-recipients-and-attendees │ │ ├── get-organizer-appointment-attendee.yaml │ │ ├── get-cc-message-read.yaml │ │ ├── get-sender-message-read.yaml │ │ ├── get-from-message-read.yaml │ │ ├── get-from-message-compose.yaml │ │ ├── get-organizer-appointment-organizer.yaml │ │ ├── get-optional-attendees-appointment-attendee.yaml │ │ └── get-required-attendees-appointment-attendee.yaml │ ├── 50-recurrence │ │ ├── get-series-id.yaml │ │ └── get-recurrence-read.yaml │ ├── 20-item-body │ │ ├── get-body-format.yaml │ │ └── get-selected-data.yaml │ ├── 40-attachments │ │ └── get-attachments-read.yaml │ ├── 85-tokens-for-exchange-on-premises │ │ ├── user-identity-token.yaml │ │ └── user-callback-token.yaml │ └── 55-display-items │ │ └── display-existing-message.yaml ├── powerpoint │ ├── basics │ │ ├── basic-common-api-call.yaml │ │ ├── basic-api-call-ts.yaml │ │ └── basic-api-call-js.yaml │ ├── default.yaml │ └── slide-management │ │ └── get-slide-metadata.yaml ├── onenote │ └── default.yaml └── word │ ├── default.yaml │ ├── 01-basics │ ├── basic-common-api-call.yaml │ ├── basic-api-call.yaml │ └── basic-api-call-es5.yaml │ ├── 30-properties │ └── get-built-in-properties.yaml │ └── 99-preview-apis │ └── close-document-window.yaml ├── tsconfig.json ├── .gitignore ├── package.json ├── config ├── snippet.d.ts ├── libraries.processor.ts └── status.ts ├── tslint.json └── SECURITY.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 6.10.0 -------------------------------------------------------------------------------- /.github/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/fruit.jpg -------------------------------------------------------------------------------- /.github/images/msn-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/msn-logo.png -------------------------------------------------------------------------------- /.github/images/crustacean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/crustacean.jpg -------------------------------------------------------------------------------- /.github/images/green-leaf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/green-leaf.jpg -------------------------------------------------------------------------------- /.github/images/xbox-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/xbox-logo.png -------------------------------------------------------------------------------- /.github/images/chili-peppers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/chili-peppers.jpg -------------------------------------------------------------------------------- /.github/images/dried-legume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/dried-legume.jpg -------------------------------------------------------------------------------- /.github/images/microsoft-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/microsoft-logo.png -------------------------------------------------------------------------------- /snippet-extractor-metadata/excel.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/snippet-extractor-metadata/excel.xlsx -------------------------------------------------------------------------------- /snippet-extractor-metadata/word.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/snippet-extractor-metadata/word.xlsx -------------------------------------------------------------------------------- /snippet-extractor-metadata/outlook.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/snippet-extractor-metadata/outlook.xlsx -------------------------------------------------------------------------------- /snippet-extractor-metadata/powerpoint.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/snippet-extractor-metadata/powerpoint.xlsx -------------------------------------------------------------------------------- /.github/images/addin-samples-gallery-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/office-js-snippets/HEAD/.github/images/addin-samples-gallery-screenshot.png -------------------------------------------------------------------------------- /view/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "project-basics-basic-common-api-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/project/basics/basic-common-api-call.yaml" 3 | } -------------------------------------------------------------------------------- /view-prod/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "project-basics-basic-common-api-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/project/basics/basic-common-api-call.yaml" 3 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Handle line endings automatically for files detected as text 2 | # and leave all files detected as binary untouched. 3 | * text=auto 4 | 5 | # 6 | # The above will handle all files NOT found below 7 | # 8 | # These files are text and should be normalized (Convert crlf => lf) 9 | *.gitattributes text 10 | .gitignore text 11 | *.md text -------------------------------------------------------------------------------- /playlists-prod/project.yaml: -------------------------------------------------------------------------------- 1 | - id: project-basics-basic-common-api-call 2 | name: Basic API call (Office 2013) 3 | fileName: basic-common-api-call.yaml 4 | description: >- 5 | Executes a basic Project API call using the "common API" syntax (compatible 6 | with Office 2013). 7 | rawUrl: >- 8 | https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/project/basics/basic-common-api-call.yaml 9 | group: Basics 10 | api_set: 11 | Selection: 1.1 -------------------------------------------------------------------------------- /playlists/project.yaml: -------------------------------------------------------------------------------- 1 | - id: project-basics-basic-common-api-call 2 | name: Basic API call (Office 2013) 3 | fileName: basic-common-api-call.yaml 4 | description: >- 5 | Executes a basic Project API call using the "common API" syntax (compatible 6 | with Office 2013). 7 | rawUrl: >- 8 | https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/project/basics/basic-common-api-call.yaml 9 | group: Basics 10 | api_set: 11 | Selection: 1.1 12 | -------------------------------------------------------------------------------- /.vscode/cSpell.json: -------------------------------------------------------------------------------- 1 | // cSpell Settings 2 | { 3 | // Version of the setting file. Always 0.1 4 | "version": "0.1", 5 | // language - current active spelling language 6 | "language": "en", 7 | // words - list of words to be always considered correct 8 | "words": [ 9 | "REPO", 10 | "precheck", 11 | "tokenized", 12 | "jsyaml", 13 | "GUID" 14 | ], 15 | // flagWords - list of words to be always considered incorrect 16 | // This is useful for offensive words and common spelling errors. 17 | // For example "hte" should be "the" 18 | "flagWords": [ 19 | "hte" 20 | ] 21 | } -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/basic-function.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: excel-custom-functions-basic 3 | name: Basic custom function 4 | description: Calculates the volume of a sphere. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.1 8 | script: 9 | content: | 10 | /** 11 | * Calculates the volume of a sphere. 12 | * @customfunction 13 | * @param {number} radius 14 | * @returns The volume of the sphere. 15 | */ 16 | function sphereVolume(radius) { 17 | return Math.pow(radius, 3) * 4 * Math.PI / 3; 18 | } 19 | language: typescript 20 | libraries: | 21 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 22 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/volatile-function.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: excel-custom-functions-volatile 3 | name: Volatile function 4 | description: Rolls a 6 sided die that returns a possible new value every calculation. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.1 8 | script: 9 | content: | 10 | /** @CustomFunction 11 | * @description Simulates rolling a 6-sided die. 12 | * @returns A whole number from 1 to 6. 13 | * @volatile 14 | */ 15 | function roll6sided(): number { 16 | return Math.floor(Math.random() * 6) + 1; 17 | } 18 | language: typescript 19 | libraries: | 20 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 21 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "allowSyntheticDefaultImports": true, 10 | "esModuleInterop": true, 11 | "removeComments": false, 12 | "noImplicitAny": false, 13 | "noEmitOnError": true, 14 | "allowUnusedLabels": false, 15 | "noUnusedParameters": false, 16 | "noImplicitReturns": true, 17 | "noUnusedLocals": true, 18 | "rootDir": "config", 19 | "lib": [ 20 | "dom", 21 | "es2018" 22 | ], 23 | "pretty": true, 24 | "skipLibCheck": true, 25 | "forceConsistentCasingInFileNames": true 26 | } 27 | } -------------------------------------------------------------------------------- /.github/workflows/auto-publish.yml: -------------------------------------------------------------------------------- 1 | name: auto-publish 2 | run-name: Automatically publish snippets 3 | on: 4 | schedule: 5 | - cron: '15 10 * * TUE' 6 | - cron: '15 10 * * THU' 7 | jobs: 8 | auto-publish: 9 | runs-on: ubuntu-latest 10 | permissions: 11 | contents: write 12 | defaults: 13 | run: 14 | shell: bash 15 | working-directory: ./ 16 | steps: 17 | - name: Check out repository 18 | uses: actions/checkout@v4 19 | with: 20 | fetch-depth: 0 21 | - name: Check out main 22 | run: | 23 | echo "Checking out main branch" 24 | git config user.name github-actions 25 | git config user.email github-actions@github.com 26 | git checkout main 27 | - name: Check out prod 28 | run: | 29 | echo "Checking out prod branch" 30 | git checkout prod 31 | - name: Merge from main into prod 32 | run: | 33 | echo "Merging from main to prod" 34 | git merge main 35 | - name: Push changes 36 | run: | 37 | echo "Pushing changes to prod branch" 38 | git push origin prod 39 | 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/osx,windows 2 | 3 | ### OSX ### 4 | .DS_Store 5 | .AppleDouble 6 | .LSOverride 7 | 8 | # Icon must end with two \r 9 | Icon 10 | 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | 31 | ### Windows ### 32 | # Windows image file caches 33 | Thumbs.db 34 | ehthumbs.db 35 | 36 | # Folder config file 37 | Desktop.ini 38 | 39 | # Recycle Bin used on file shares 40 | $RECYCLE.BIN/ 41 | 42 | # Windows Installer files 43 | *.cab 44 | *.msi 45 | *.msm 46 | *.msp 47 | 48 | # Windows shortcuts 49 | *.lnk 50 | 51 | # Ignore the following folders 52 | .vs 53 | .idea 54 | *.log 55 | obj 56 | bin 57 | *.user 58 | 59 | node_modules/** 60 | typings/** 61 | **/*.js 62 | **/*.map 63 | npm-debug.log* 64 | ~$* 65 | 66 | # Used to ignore "playlists", but having those checked-in for diffing purposes is very useful, so undoing the ignore: 67 | # playlists/** 68 | 69 | package-lock.json -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "office-js-snippets", 3 | "version": "1.0.0", 4 | "description": "A collection of samples using the Office JavaScript API", 5 | "main": "config/compile.js", 6 | "engines": { 7 | "node": ">=6.10.0" 8 | }, 9 | "scripts": { 10 | "start": "npm run tsc && npm run build && npm run lint", 11 | "tsc": "tsc -p tsconfig.json", 12 | "build": "node config/build.js", 13 | "lint": "tslint --project tsconfig.json" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/OfficeDev/office-js-snippets.git" 18 | }, 19 | "author": "Microsoft", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/OfficeDev/office-js-snippets/issues" 23 | }, 24 | "homepage": "https://github.com/OfficeDev/office-js-snippets#readme", 25 | "dependencies": { 26 | "chalk": "^4.1.2", 27 | "escape-string-regexp": "^4.0.0", 28 | "exceljs": "^4.4.0", 29 | "fs-extra": "11.3.2", 30 | "js-yaml": "^4.1.0", 31 | "lodash": "^4.17.21", 32 | "rimraf": "^6.0.1", 33 | "shelljs": "^0.10.0" 34 | }, 35 | "devDependencies": { 36 | "@types/fs-extra": "^11.0.4", 37 | "@types/js-yaml": "^4.0.9", 38 | "@types/lodash": "^4.17.20", 39 | "@types/node": "^24.5.2", 40 | "@types/shelljs": "^0.8.17", 41 | "tslint": "^6.1.3", 42 | "typescript": "^5.9.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/web-call-function.yaml: -------------------------------------------------------------------------------- 1 | order: 4 2 | id: excel-custom-functions-web-call 3 | name: Web request to GitHub API 4 | description: Calls the GitHub API to get the star count for an org/user and repository. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.1 8 | script: 9 | content: | 10 | /** 11 | * Gets the star count for a given org/user and repo. Try =GETSTARCOUNT("officedev","office-js") 12 | * @customfunction 13 | * @param userName Name of org or user. 14 | * @param repoName Name of the repo. 15 | * @return Number of stars. 16 | */ 17 | async function getStarCount(userName = "OfficeDev", repoName = "office-js") { 18 | //You can change this URL to any web request you want to work with. 19 | const url = `https://api.github.com/repos/${userName}/${repoName}`; 20 | const response = await fetch(url); 21 | 22 | //Expect that status code is in 200-299 range 23 | if (!response.ok) { 24 | throw new Error(response.statusText); 25 | } 26 | const jsonResponse = await response.json(); 27 | return jsonResponse.watchers_count; 28 | } 29 | language: typescript 30 | libraries: | 31 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 32 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/streaming-function.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: excel-custom-functions-streaming 3 | name: Streaming function 4 | description: A streaming function that continuously increments the cell value. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.1 8 | script: 9 | content: | 10 | /** @CustomFunction 11 | * @description Increments the cell with a given amount at a specified interval in milliseconds. 12 | * @param {number} amount - The amount to add to the cell value on each increment. 13 | * @param {number} interval - The time in milliseconds to wait before the next increment on the cell. 14 | * @param {CustomFunctions.StreamingInvocation} invocation - Parameter to send results to Excel 15 | * or respond to the user canceling the function. 16 | * @returns An incrementing value. 17 | */ 18 | function increment(amount: number, interval: number, invocation: CustomFunctions.StreamingInvocation): void { 19 | let result = 0; 20 | const timer = setInterval(() => { 21 | result += amount; 22 | invocation.setResult(result); 23 | }, interval); 24 | 25 | invocation.onCanceled = () => { 26 | clearInterval(timer); 27 | } 28 | } 29 | language: typescript 30 | libraries: | 31 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 32 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible Node.js debug 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 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "program": "${workspaceRoot}\\config\\build.js", 12 | "cwd": "${workspaceFolder}", 13 | "console": "integratedTerminal", 14 | "outFiles": [] 15 | }, 16 | // { 17 | // "type": "node", 18 | // "request": "launch", 19 | // "name": "Launch Program", 20 | // "program": "${workspaceRoot}\\config\\deploy.js", 21 | // "cwd": "${workspaceFolder}", 22 | // "console": "integratedTerminal", 23 | // "outFiles": [], 24 | // "env": { 25 | // "TRAVIS": "true", 26 | // "TRAVIS_BRANCH": "main", 27 | // "TRAVIS_PULL_REQUEST": "false", 28 | // "TRAVIS_COMMIT_MESSAGE": "Deploy", 29 | // "GH_ACCOUNT": "OfficeDev", 30 | // "GH_REPO": "office-js-snippets", 31 | // "GH_TOKEN": 32 | // } 33 | // }, 34 | { 35 | "type": "node", 36 | "request": "attach", 37 | "name": "Attach to Port", 38 | "address": "localhost", 39 | "port": 5858, 40 | "outFiles": [] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /config/snippet.d.ts: -------------------------------------------------------------------------------- 1 | interface ITemplate { 2 | /////////////////////////////////////////////////////////////////////////////////////////////////// 3 | // NOTE: if you add or remove any top-level fields from this list, be sure 4 | // to update "snippetFields" and "getSnippetDefaults" in "src\client\app\helpers\snippet.helper.ts" 5 | /////////////////////////////////////////////////////////////////////////////////////////////////// 6 | id?: string; 7 | gist?: string; 8 | name?: string; 9 | description?: string; 10 | author?: string; 11 | host: string; 12 | api_set: { 13 | [index: string]: number 14 | }, 15 | platform: string; 16 | origin: string; 17 | created_at: number; 18 | modified_at: number; 19 | } 20 | 21 | interface ISnippet extends ITemplate { 22 | /////////////////////////////////////////////////////////////////////////////////////////////////// 23 | // NOTE: if you add or remove any top-level fields from this list, be sure 24 | // to update "snippetFields" and "getSnippetDefaults" in "src\client\app\helpers\snippet.helper.ts" 25 | /////////////////////////////////////////////////////////////////////////////////////////////////// 26 | script?: { 27 | content: string; 28 | language: string; 29 | }; 30 | template?: { 31 | content: string; 32 | language: string; 33 | }; 34 | style?: { 35 | content: string; 36 | language: string; 37 | }; 38 | libraries?: string; 39 | } 40 | 41 | interface ILibraryDefinition { 42 | label?: string; 43 | typings?: string | string[]; 44 | value?: string | string[]; 45 | description?: string 46 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-reference": true, 4 | "only-arrow-functions": [ 5 | true, 6 | "allow-declarations", 7 | "allow-named-functions" 8 | ], 9 | "no-namespace": [ 10 | true, 11 | "allow-declarations" 12 | ], 13 | "class-name": true, 14 | "curly": true, 15 | "eofline": true, 16 | "forin": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "label-position": true, 22 | "no-arg": true, 23 | "no-var-keyword": true, 24 | "no-console": [ 25 | true, 26 | "time", 27 | "timeEnd" 28 | ], 29 | "no-construct": true, 30 | "no-debugger": true, 31 | "no-duplicate-variable": true, 32 | "no-empty": false, 33 | "no-eval": true, 34 | "no-trailing-whitespace": true, 35 | "no-unused-expression": true, 36 | "one-line": [ 37 | true, 38 | "check-open-brace", 39 | "check-whitespace" 40 | ], 41 | "quotemark": [ 42 | true, 43 | "single" 44 | ], 45 | "radix": true, 46 | "semicolon": [ 47 | true, 48 | "always", 49 | "ignore-interfaces" 50 | ], 51 | "triple-equals": [ 52 | true, 53 | "allow-null-check" 54 | ], 55 | "variable-name": false, 56 | "whitespace": [ 57 | true, 58 | "check-branch", 59 | "check-decl", 60 | "check-operator", 61 | "check-separator", 62 | "check-type" 63 | ] 64 | } 65 | } -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/custom-functions-errors.yaml: -------------------------------------------------------------------------------- 1 | order: 5 2 | id: excel-custom-functions-errors 3 | name: Custom functions errors 4 | description: Returns the "#NUM!" error as part of a 2-dimensional array. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.2 8 | script: 9 | content: |- 10 | /** 11 | * Returns the #NUM! error as part of a 2-dimensional array. 12 | * @customfunction 13 | * @param {number} first First parameter. 14 | * @param {number} second Second parameter. 15 | * @param {number} third Third parameter. 16 | * @returns {number[][]} Three results, as a 2-dimensional array. 17 | */ 18 | function returnInvalidNumberError(first, second, third) { 19 | // Use the `CustomFunctions.Error` object to retrieve an invalid number error. 20 | const error = new CustomFunctions.Error( 21 | CustomFunctions.ErrorCode.invalidNumber, // Corresponds to the #NUM! error in the Excel UI. 22 | ); 23 | 24 | // Enter logic that processes the first, second, and third input parameters. 25 | // Imagine that the second calculation results in an invalid number error. 26 | const firstResult = first; 27 | const secondResult = error; 28 | const thirdResult = third; 29 | 30 | // Return the results of the first and third parameter calculations 31 | // and a #NUM! error in place of the second result. 32 | return [[firstResult], [secondResult], [thirdResult]]; 33 | } 34 | language: typescript 35 | libraries: | 36 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 37 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/project/basics/basic-common-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 1000 2 | id: project-basics-basic-common-api-call 3 | name: Basic API call (Office 2013) 4 | description: Executes a basic Project API call using the "common API" syntax (compatible with Office 2013). 5 | author: OfficeDev 6 | host: PROJECT 7 | api_set: 8 | Selection: 1.1 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", run); 12 | 13 | function run() { 14 | Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.error(asyncResult.error.message); 17 | } else { 18 | console.log(`The selected data is "${asyncResult.value}".`); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: 25 | language: html 26 | style: 27 | content: |- 28 | body { 29 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 30 | font-size: 14px; 31 | line-height: 1.5; 32 | padding: 10px; 33 | } 34 | 35 | button { 36 | background-color: #f0f0f0; 37 | color: #333333; 38 | border: 1px solid #8a8a8a; 39 | padding: 8px 16px; 40 | font-size: 14px; 41 | cursor: pointer; 42 | border-radius: 2px; 43 | margin-left: 20px; 44 | min-width: 80px; 45 | } 46 | 47 | button:hover { 48 | background-color: #e0e0e0; 49 | } 50 | 51 | button:active { 52 | background-color: #d0d0d0; 53 | } 54 | language: css 55 | libraries: |- 56 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 57 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/web/default.yaml: -------------------------------------------------------------------------------- 1 | id: web-web-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: WEB 6 | api_set: {} 7 | script: 8 | content: |- 9 | document.getElementById("run").addEventListener("click", run); 10 | 11 | function run() { 12 | console.log("Your code goes here"); 13 | } 14 | language: typescript 15 | template: 16 | content: 17 | language: html 18 | style: 19 | content: |- 20 | body { 21 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 22 | font-size: 14px; 23 | line-height: 1.5; 24 | padding: 10px; 25 | } 26 | 27 | section { 28 | margin-bottom: 20px; 29 | } 30 | 31 | h3 { 32 | margin-top: 0; 33 | margin-bottom: 10px; 34 | font-size: 16px; 35 | } 36 | 37 | p { 38 | margin: 0 0 10px 0; 39 | } 40 | 41 | button { 42 | background-color: #f0f0f0; 43 | color: #333333; 44 | border: 1px solid #8a8a8a; 45 | padding: 8px 16px; 46 | font-size: 14px; 47 | cursor: pointer; 48 | border-radius: 2px; 49 | margin-left: 20px; 50 | margin-bottom: 5px; 51 | min-width: 80px; 52 | display: block; 53 | } 54 | 55 | button:hover { 56 | background-color: #e0e0e0; 57 | } 58 | 59 | button:active { 60 | background-color: #d0d0d0; 61 | } 62 | 63 | input { 64 | padding: 8px; 65 | margin: 5px 0; 66 | border: 1px solid #ccc; 67 | border-radius: 2px; 68 | font-size: 14px; 69 | } 70 | 71 | .header { 72 | text-align: center; 73 | background-color: #f3f2f1; 74 | padding: 10px; 75 | } 76 | language: css 77 | libraries: '' -------------------------------------------------------------------------------- /samples/outlook/default.yaml: -------------------------------------------------------------------------------- 1 | id: outlook-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: OUTLOOK 6 | api_set: null 7 | script: 8 | content: |- 9 | document.getElementById("run").addEventListener("click", run); 10 | 11 | function run() { 12 | const userProfile = Office.context.mailbox.userProfile; 13 | console.log(`Hello ${userProfile.displayName}`); 14 | } 15 | language: typescript 16 | template: 17 | content: 18 | language: html 19 | style: 20 | content: |- 21 | body { 22 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 23 | font-size: 14px; 24 | line-height: 1.5; 25 | padding: 10px; 26 | } 27 | 28 | section { 29 | margin-bottom: 20px; 30 | } 31 | 32 | h3 { 33 | margin-top: 0; 34 | margin-bottom: 10px; 35 | font-size: 16px; 36 | } 37 | 38 | p { 39 | margin: 0 0 10px 0; 40 | } 41 | 42 | button { 43 | background-color: #f0f0f0; 44 | color: #333333; 45 | border: 1px solid #8a8a8a; 46 | padding: 8px 16px; 47 | font-size: 14px; 48 | cursor: pointer; 49 | border-radius: 2px; 50 | margin-left: 20px; 51 | margin-bottom: 5px; 52 | min-width: 80px; 53 | display: block; 54 | } 55 | 56 | button:hover { 57 | background-color: #e0e0e0; 58 | } 59 | 60 | button:active { 61 | background-color: #d0d0d0; 62 | } 63 | 64 | input { 65 | padding: 8px; 66 | margin: 5px 0; 67 | border: 1px solid #ccc; 68 | border-radius: 2px; 69 | font-size: 14px; 70 | } 71 | 72 | .header { 73 | text-align: center; 74 | background-color: #f3f2f1; 75 | padding: 10px; 76 | } 77 | language: css 78 | libraries: |- 79 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 80 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /config/libraries.processor.ts: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////////////////////////////////////// 2 | /// NOTE: This file is an identical copy from the root project. /// 3 | /// Please be sure that any changes that you make here are also copied to there. /// 4 | /// See "src/server/core/libraries.processor.ts" /// 5 | ///////////////////////////////////////////////////////////////////////////////////////////////////// 6 | 7 | 8 | export function processLibraries(snippet: ISnippet) { 9 | let linkReferences: string[] = []; 10 | let scriptReferences: string[] = []; 11 | let officeJS: string = null; 12 | 13 | snippet.libraries.split('\n').forEach(processLibrary); 14 | 15 | return { linkReferences, scriptReferences, officeJS }; 16 | 17 | 18 | function processLibrary(text: string) { 19 | if (text == null || text.trim() === '') { 20 | return null; 21 | } 22 | 23 | text = text.trim(); 24 | 25 | let isNotScriptOrStyle = 26 | /^#.*|^\/\/.*|^\/\*.*|.*\*\/$.*/im.test(text) || 27 | /^@types/.test(text) || 28 | /^dt~/.test(text) || 29 | /\.d\.ts$/i.test(text); 30 | 31 | if (isNotScriptOrStyle) { 32 | return null; 33 | } 34 | 35 | let resolvedUrlPath = (/^https?:\/\/|^ftp? :\/\//i.test(text)) ? text : `https://unpkg.com/${text}`; 36 | 37 | if (/\.css$/i.test(resolvedUrlPath)) { 38 | return linkReferences.push(resolvedUrlPath); 39 | } 40 | 41 | if (/\.ts$|\.js$/i.test(resolvedUrlPath)) { 42 | /* 43 | * Don't add Office.js to the rest of the script references -- 44 | * it is special because of how it needs to be *outside* of the iframe, 45 | * whereas the rest of the script references need to be inside the iframe. 46 | */ 47 | if (/(?:office|office.debug).js$/.test(resolvedUrlPath.toLowerCase())) { 48 | officeJS = resolvedUrlPath; 49 | return null; 50 | } 51 | 52 | return scriptReferences.push(resolvedUrlPath); 53 | } 54 | 55 | return scriptReferences.push(resolvedUrlPath); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /samples/outlook/25-item-save-and-close/close.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: outlook-item-save-and-close-close 3 | name: Close the item 4 | description: Closes the item (compose mode) 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.3' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", run); 11 | 12 | function run() { 13 | Office.context.mailbox.item.close(); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to close the item in compose mode.

20 |
21 |
22 |

Try it out

23 | 26 |
27 | language: html 28 | style: 29 | content: |- 30 | body { 31 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 32 | font-size: 14px; 33 | line-height: 1.5; 34 | padding: 10px; 35 | } 36 | 37 | section { 38 | margin-bottom: 20px; 39 | } 40 | 41 | h3 { 42 | margin-top: 0; 43 | margin-bottom: 10px; 44 | font-size: 16px; 45 | } 46 | 47 | p { 48 | margin: 0 0 10px 0; 49 | } 50 | 51 | button { 52 | background-color: #f0f0f0; 53 | color: #333333; 54 | border: 1px solid #8a8a8a; 55 | padding: 8px 16px; 56 | font-size: 14px; 57 | cursor: pointer; 58 | border-radius: 2px; 59 | margin-left: 20px; 60 | margin-bottom: 5px; 61 | min-width: 80px; 62 | display: block; 63 | } 64 | 65 | button:hover { 66 | background-color: #e0e0e0; 67 | } 68 | 69 | button:active { 70 | background-color: #d0d0d0; 71 | } 72 | 73 | input { 74 | padding: 8px; 75 | margin: 5px 0; 76 | border: 1px solid #ccc; 77 | border-radius: 2px; 78 | font-size: 14px; 79 | } 80 | 81 | .header { 82 | text-align: center; 83 | background-color: #f3f2f1; 84 | padding: 10px; 85 | } 86 | language: css 87 | libraries: |- 88 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 89 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/project/default.yaml: -------------------------------------------------------------------------------- 1 | id: project-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: PROJECT 6 | api_set: {} 7 | script: 8 | content: |- 9 | document.getElementById("run").addEventListener("click", run); 10 | 11 | function run() { 12 | Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { 13 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 14 | console.error(asyncResult.error.message); 15 | } else { 16 | console.log(`The selected data is "${asyncResult.value}".`); 17 | } 18 | }); 19 | } 20 | language: typescript 21 | template: 22 | content: 23 | language: html 24 | style: 25 | content: |- 26 | body { 27 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 28 | font-size: 14px; 29 | line-height: 1.5; 30 | padding: 10px; 31 | } 32 | 33 | section { 34 | margin-bottom: 20px; 35 | } 36 | 37 | h3 { 38 | margin-top: 0; 39 | margin-bottom: 10px; 40 | font-size: 16px; 41 | } 42 | 43 | p { 44 | margin: 0 0 10px 0; 45 | } 46 | 47 | button { 48 | background-color: #f0f0f0; 49 | color: #333333; 50 | border: 1px solid #8a8a8a; 51 | padding: 8px 16px; 52 | font-size: 14px; 53 | cursor: pointer; 54 | border-radius: 2px; 55 | margin-left: 20px; 56 | margin-bottom: 5px; 57 | min-width: 80px; 58 | display: block; 59 | } 60 | 61 | button:hover { 62 | background-color: #e0e0e0; 63 | } 64 | 65 | button:active { 66 | background-color: #d0d0d0; 67 | } 68 | 69 | input { 70 | padding: 8px; 71 | margin: 5px 0; 72 | border: 1px solid #ccc; 73 | border-radius: 2px; 74 | font-size: 14px; 75 | } 76 | 77 | .header { 78 | text-align: center; 79 | background-color: #f3f2f1; 80 | padding: 10px; 81 | } 82 | language: css 83 | libraries: |- 84 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 85 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-subject-read.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: outlook-other-item-apis-get-subject-read 3 | name: Get the subject (Read) 4 | description: Gets the subject of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Subject: ${Office.context.mailbox.item.subject}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the subject of an item in Read mode.

20 |

Required mode: Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-item-class-read.yaml: -------------------------------------------------------------------------------- 1 | order: 5 2 | id: outlook-other-item-apis-get-item-class-read 3 | name: Get the item class (Read) 4 | description: Gets the item class of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Item class: ${Office.context.mailbox.item.itemClass}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the item class of an item in Read mode.

20 |

Required mode: Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-location-read.yaml: -------------------------------------------------------------------------------- 1 | order: 11 2 | id: outlook-other-item-apis-get-location-read 3 | name: Get the location (Read) 4 | description: Gets the location of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Appointment location: ${Office.context.mailbox.item.location}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the location of an item in Read mode.

20 |

Required modes: Appointment Attendee, Message Read (meeting request)

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-conversation-id-message.yaml: -------------------------------------------------------------------------------- 1 | order: 15 2 | id: outlook-other-item-apis-get-conversation-id-message 3 | name: Get the conversation ID (Message) 4 | description: Gets the conversation ID of a message. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Conversation ID: ${Office.context.mailbox.item.conversationId}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the conversation ID of a message.

20 |

Required modes: Message Compose, Message Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/powerpoint/basics/basic-common-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: powerpoint-basics-basic-common-api-call 3 | name: Basic API call (Office 2013) 4 | description: Executes a basic PowerPoint API call using the "common API" syntax (compatible with Office 2013). 5 | author: OfficeDev 6 | host: POWERPOINT 7 | api_set: 8 | Selection: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", run); 12 | 13 | function run() { 14 | Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.error(asyncResult.error.message); 17 | } else { 18 | console.log(`The selected data is "${asyncResult.value}".`); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: 25 | language: html 26 | style: 27 | content: |- 28 | body { 29 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 30 | font-size: 14px; 31 | line-height: 1.5; 32 | padding: 10px; 33 | } 34 | 35 | section { 36 | margin-bottom: 20px; 37 | } 38 | 39 | h3 { 40 | margin-top: 0; 41 | margin-bottom: 10px; 42 | font-size: 16px; 43 | } 44 | 45 | p { 46 | margin: 0 0 10px 0; 47 | } 48 | 49 | button { 50 | background-color: #f0f0f0; 51 | color: #333333; 52 | border: 1px solid #8a8a8a; 53 | padding: 8px 16px; 54 | font-size: 14px; 55 | cursor: pointer; 56 | border-radius: 2px; 57 | margin-left: 20px; 58 | margin-bottom: 5px; 59 | min-width: 80px; 60 | display: block; 61 | } 62 | 63 | button:hover { 64 | background-color: #e0e0e0; 65 | } 66 | 67 | button:active { 68 | background-color: #d0d0d0; 69 | } 70 | 71 | input { 72 | padding: 8px; 73 | margin: 5px 0; 74 | border: 1px solid #ccc; 75 | border-radius: 2px; 76 | font-size: 14px; 77 | } 78 | 79 | .header { 80 | text-align: center; 81 | background-color: #f3f2f1; 82 | padding: 10px; 83 | } 84 | language: css 85 | libraries: |- 86 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 87 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml: -------------------------------------------------------------------------------- 1 | order: 4 2 | id: outlook-other-item-apis-get-internet-message-id-read 3 | name: Get the internet message ID (Message Read) 4 | description: Gets the internet message ID of a message in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Internet message ID: ${Office.context.mailbox.item.internetMessageId}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the internet message ID of a message in Read mode.

20 |

Required mode: Message Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml: -------------------------------------------------------------------------------- 1 | order: 14 2 | id: outlook-other-item-apis-get-normalized-subject-read 3 | name: Get the normalized subject (Read) 4 | description: Gets the normalized subject of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Normalized subject: ${Office.context.mailbox.item.normalizedSubject}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the normalized subject of an item in Read mode.

20 |

Required modes: Appointment Attendee, Message Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-date-time-created-read.yaml: -------------------------------------------------------------------------------- 1 | order: 16 2 | id: outlook-other-item-apis-get-date-time-created-read 3 | name: Get the creation date and time (Read) 4 | description: Gets the creation date and time of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Creation date and time: ${Office.context.mailbox.item.dateTimeCreated}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the creation date and time of an item in Read mode.

20 |

Required modes: Appointment Attendee, Message Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/onenote/default.yaml: -------------------------------------------------------------------------------- 1 | id: onenote-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: ONENOTE 6 | api_set: 7 | OneNoteApi: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | async function run() { 13 | await OneNote.run(async (context) => { 14 | console.log("Your code goes here"); 15 | 16 | await context.sync(); 17 | }); 18 | } 19 | 20 | /** Default helper for invoking an action and handling errors. */ 21 | async function tryCatch(callback) { 22 | try { 23 | await callback(); 24 | } 25 | catch (error) { 26 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 27 | console.error(error); 28 | } 29 | } 30 | language: typescript 31 | template: 32 | content: 33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml: -------------------------------------------------------------------------------- 1 | order: 17 2 | id: outlook-other-item-apis-get-date-time-modified-read 3 | name: Get the last-modified date and time (Read) 4 | description: Gets the last-modified date and time of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | console.log(`Date and time item last modified: ${Office.context.mailbox.item.dateTimeModified}`); 14 | } 15 | language: typescript 16 | template: 17 | content: |- 18 |
19 |

This sample shows how to get the last-modified date and time of an item in Read mode.

20 |

Required modes: Appointment Attendee, Message Read

21 |
22 |
23 |

Try it out

24 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml: -------------------------------------------------------------------------------- 1 | order: 13 2 | id: outlook-recipients-and-attendees-get-organizer-appointment-attendee 3 | name: Get organizer (Appointment Attendee) 4 | description: Gets the organizer in Appointment Attendee mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-organizer").addEventListener("click", getOrganizer); 11 | 12 | function getOrganizer() { 13 | const apptOrganizer = Office.context.mailbox.item.organizer; 14 | console.log("Organizer: " + apptOrganizer.displayName + " (" + apptOrganizer.emailAddress + ")"); 15 | } 16 | language: typescript 17 | template: 18 | content: |- 19 |
20 |

This sample shows how to get the appointment organizer.

21 |

Required mode: Appointment Attendee

22 |
23 |
24 |

Try it out

25 | 26 |
27 | language: html 28 | style: 29 | content: |- 30 | body { 31 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 32 | font-size: 14px; 33 | line-height: 1.5; 34 | padding: 10px; 35 | } 36 | 37 | section { 38 | margin-bottom: 20px; 39 | } 40 | 41 | h3 { 42 | margin-top: 0; 43 | margin-bottom: 10px; 44 | font-size: 16px; 45 | } 46 | 47 | p { 48 | margin: 0 0 10px 0; 49 | } 50 | 51 | button { 52 | background-color: #f0f0f0; 53 | color: #333333; 54 | border: 1px solid #8a8a8a; 55 | padding: 8px 16px; 56 | font-size: 14px; 57 | cursor: pointer; 58 | border-radius: 2px; 59 | margin-left: 20px; 60 | margin-bottom: 5px; 61 | min-width: 80px; 62 | display: block; 63 | } 64 | 65 | button:hover { 66 | background-color: #e0e0e0; 67 | } 68 | 69 | button:active { 70 | background-color: #d0d0d0; 71 | } 72 | 73 | input { 74 | padding: 8px; 75 | margin: 5px 0; 76 | border: 1px solid #ccc; 77 | border-radius: 2px; 78 | font-size: 14px; 79 | } 80 | 81 | .header { 82 | text-align: center; 83 | background-color: #f3f2f1; 84 | padding: 10px; 85 | } 86 | language: css 87 | libraries: |- 88 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 89 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml: -------------------------------------------------------------------------------- 1 | order: 5 2 | id: outlook-recipients-and-attendees-get-cc-message-read 3 | name: Get cc (Message Read) 4 | description: Gets the Cc line recipients of the message in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-cc").addEventListener("click", getCc); 11 | 12 | function getCc() { 13 | const msgCc = Office.context.mailbox.item.cc; 14 | console.log("Message copied to:"); 15 | for (let i = 0; i < msgCc.length; i++) { 16 | console.log(msgCc[i].displayName + " (" + msgCc[i].emailAddress + ")"); 17 | } 18 | } 19 | language: typescript 20 | template: 21 | content: |- 22 |
23 |

This sample shows how to get the Cc line recipients of the email.

24 |

Required mode: Message Read

25 |
26 |
27 |

Try it out

28 | 29 |
30 | language: html 31 | style: 32 | content: |- 33 | body { 34 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 35 | font-size: 14px; 36 | line-height: 1.5; 37 | padding: 10px; 38 | } 39 | 40 | section { 41 | margin-bottom: 20px; 42 | } 43 | 44 | h3 { 45 | margin-top: 0; 46 | margin-bottom: 10px; 47 | font-size: 16px; 48 | } 49 | 50 | p { 51 | margin: 0 0 10px 0; 52 | } 53 | 54 | button { 55 | background-color: #f0f0f0; 56 | color: #333333; 57 | border: 1px solid #8a8a8a; 58 | padding: 8px 16px; 59 | font-size: 14px; 60 | cursor: pointer; 61 | border-radius: 2px; 62 | margin-left: 20px; 63 | margin-bottom: 5px; 64 | min-width: 80px; 65 | display: block; 66 | } 67 | 68 | button:hover { 69 | background-color: #e0e0e0; 70 | } 71 | 72 | button:active { 73 | background-color: #d0d0d0; 74 | } 75 | 76 | input { 77 | padding: 8px; 78 | margin: 5px 0; 79 | border: 1px solid #ccc; 80 | border-radius: 2px; 81 | font-size: 14px; 82 | } 83 | 84 | .header { 85 | text-align: center; 86 | background-color: #f3f2f1; 87 | padding: 10px; 88 | } 89 | language: css 90 | libraries: |- 91 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 92 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/word/default.yaml: -------------------------------------------------------------------------------- 1 | id: word-word-default 2 | name: Blank snippet 3 | description: Creates a new snippet from a blank template. 4 | author: OfficeDev 5 | host: WORD 6 | api_set: 7 | WordApi: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | async function run() { 13 | await Word.run(async (context) => { 14 | const body = context.document.body; 15 | 16 | console.log("Your code goes here"); 17 | 18 | await context.sync(); 19 | }); 20 | } 21 | 22 | // Default helper for invoking an action and handling errors. 23 | async function tryCatch(callback) { 24 | try { 25 | await callback(); 26 | } 27 | catch (error) { 28 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 29 | console.error(error); 30 | } 31 | } 32 | language: typescript 33 | template: 34 | content: 35 | language: html 36 | style: 37 | content: |- 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 40 | font-size: 14px; 41 | line-height: 1.5; 42 | padding: 10px; 43 | } 44 | 45 | section { 46 | margin-bottom: 20px; 47 | } 48 | 49 | h3 { 50 | margin-top: 0; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | } 54 | 55 | p { 56 | margin: 0 0 10px 0; 57 | } 58 | 59 | button { 60 | background-color: #f0f0f0; 61 | color: #333333; 62 | border: 1px solid #8a8a8a; 63 | padding: 8px 16px; 64 | font-size: 14px; 65 | cursor: pointer; 66 | border-radius: 2px; 67 | margin-left: 20px; 68 | margin-bottom: 5px; 69 | min-width: 80px; 70 | display: block; 71 | } 72 | 73 | button:hover { 74 | background-color: #e0e0e0; 75 | } 76 | 77 | button:active { 78 | background-color: #d0d0d0; 79 | } 80 | 81 | input { 82 | padding: 8px; 83 | margin: 5px 0; 84 | border: 1px solid #ccc; 85 | border-radius: 2px; 86 | font-size: 14px; 87 | } 88 | 89 | .header { 90 | text-align: center; 91 | background-color: #f3f2f1; 92 | padding: 10px; 93 | } 94 | language: css 95 | libraries: |- 96 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 97 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/25-item-save-and-close/save.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: outlook-item-save-and-close-save 3 | name: Save the item 4 | description: Saves the item (compose mode) 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.3' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", run); 11 | 12 | function run() { 13 | Office.context.mailbox.item.saveAsync(function (result) { 14 | if (result.status === Office.AsyncResultStatus.Succeeded) { 15 | console.log(`saveAsync succeeded, itemId is ${result.value}`); 16 | } 17 | else { 18 | console.error(`saveAsync failed with message ${result.error.message}`); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to save the item in compose mode.

27 |
28 |
29 |

Try it out

30 | 33 |
34 | language: html 35 | style: 36 | content: |- 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 39 | font-size: 14px; 40 | line-height: 1.5; 41 | padding: 10px; 42 | } 43 | 44 | section { 45 | margin-bottom: 20px; 46 | } 47 | 48 | h3 { 49 | margin-top: 0; 50 | margin-bottom: 10px; 51 | font-size: 16px; 52 | } 53 | 54 | p { 55 | margin: 0 0 10px 0; 56 | } 57 | 58 | button { 59 | background-color: #f0f0f0; 60 | color: #333333; 61 | border: 1px solid #8a8a8a; 62 | padding: 8px 16px; 63 | font-size: 14px; 64 | cursor: pointer; 65 | border-radius: 2px; 66 | margin-left: 20px; 67 | margin-bottom: 5px; 68 | min-width: 80px; 69 | display: block; 70 | } 71 | 72 | button:hover { 73 | background-color: #e0e0e0; 74 | } 75 | 76 | button:active { 77 | background-color: #d0d0d0; 78 | } 79 | 80 | input { 81 | padding: 8px; 82 | margin: 5px 0; 83 | border: 1px solid #ccc; 84 | border-radius: 2px; 85 | font-size: 14px; 86 | } 87 | 88 | .header { 89 | text-align: center; 90 | background-color: #f3f2f1; 91 | padding: 10px; 92 | } 93 | language: css 94 | libraries: |- 95 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 96 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/powerpoint/default.yaml: -------------------------------------------------------------------------------- 1 | id: powerpoint-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: POWERPOINT 6 | api_set: 7 | PowerPointApi: '1.2' 8 | script: 9 | content: | 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | async function run() { 13 | await PowerPoint.run(async (context) => { 14 | const slides: PowerPoint.SlideCollection = context.presentation.slides; 15 | 16 | console.log("Your code goes here"); 17 | 18 | await context.sync(); 19 | }); 20 | } 21 | 22 | // Default helper for invoking an action and handling errors. 23 | async function tryCatch(callback) { 24 | try { 25 | await callback(); 26 | } catch (error) { 27 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 28 | console.error(error); 29 | } 30 | } 31 | language: typescript 32 | template: 33 | content: 34 | language: html 35 | style: 36 | content: |- 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 39 | font-size: 14px; 40 | line-height: 1.5; 41 | padding: 10px; 42 | } 43 | 44 | section { 45 | margin-bottom: 20px; 46 | } 47 | 48 | h3 { 49 | margin-top: 0; 50 | margin-bottom: 10px; 51 | font-size: 16px; 52 | } 53 | 54 | p { 55 | margin: 0 0 10px 0; 56 | } 57 | 58 | button { 59 | background-color: #f0f0f0; 60 | color: #333333; 61 | border: 1px solid #8a8a8a; 62 | padding: 8px 16px; 63 | font-size: 14px; 64 | cursor: pointer; 65 | border-radius: 2px; 66 | margin-left: 20px; 67 | margin-bottom: 5px; 68 | min-width: 80px; 69 | display: block; 70 | } 71 | 72 | button:hover { 73 | background-color: #e0e0e0; 74 | } 75 | 76 | button:active { 77 | background-color: #d0d0d0; 78 | } 79 | 80 | input { 81 | padding: 8px; 82 | margin: 5px 0; 83 | border: 1px solid #ccc; 84 | border-radius: 2px; 85 | font-size: 14px; 86 | } 87 | 88 | .header { 89 | text-align: center; 90 | background-color: #f3f2f1; 91 | padding: 10px; 92 | } 93 | language: css 94 | libraries: |- 95 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 96 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml: -------------------------------------------------------------------------------- 1 | order: 8 2 | id: outlook-recipients-and-attendees-get-sender-message-read 3 | name: Get sender (Message Read) 4 | description: Gets the sender in Message Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-sender").addEventListener("click", getSender); 11 | 12 | function getSender() { 13 | const msgSender = Office.context.mailbox.item.sender; 14 | console.log("Sender: " + msgSender.displayName + " (" + msgSender.emailAddress + ")"); 15 | } 16 | language: typescript 17 | template: 18 | content: |- 19 |
20 |

This sample shows how to get the email sender. In a delegate access scenario, the sender is the delegate. Tip: Use the from property to get the delegator.

21 |

Required mode: Message Read

22 |
23 |
24 |

Try it out

25 | 26 |
27 | language: html 28 | style: 29 | content: |- 30 | body { 31 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 32 | font-size: 14px; 33 | line-height: 1.5; 34 | padding: 10px; 35 | } 36 | 37 | section { 38 | margin-bottom: 20px; 39 | } 40 | 41 | h3 { 42 | margin-top: 0; 43 | margin-bottom: 10px; 44 | font-size: 16px; 45 | } 46 | 47 | p { 48 | margin: 0 0 10px 0; 49 | } 50 | 51 | button { 52 | background-color: #f0f0f0; 53 | color: #333333; 54 | border: 1px solid #8a8a8a; 55 | padding: 8px 16px; 56 | font-size: 14px; 57 | cursor: pointer; 58 | border-radius: 2px; 59 | margin-left: 20px; 60 | margin-bottom: 5px; 61 | min-width: 80px; 62 | display: block; 63 | } 64 | 65 | button:hover { 66 | background-color: #e0e0e0; 67 | } 68 | 69 | button:active { 70 | background-color: #d0d0d0; 71 | } 72 | 73 | input { 74 | padding: 8px; 75 | margin: 5px 0; 76 | border: 1px solid #ccc; 77 | border-radius: 2px; 78 | font-size: 14px; 79 | } 80 | 81 | .header { 82 | text-align: center; 83 | background-color: #f3f2f1; 84 | padding: 10px; 85 | } 86 | language: css 87 | libraries: |- 88 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 89 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Security 4 | 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). 6 | 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below. 8 | 9 | ## Reporting Security Issues 10 | 11 | **Please do not report security vulnerabilities through public GitHub issues.** 12 | 13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report). 14 | 15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey). 16 | 17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 18 | 19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: 20 | 21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) 22 | * Full paths of source file(s) related to the manifestation of the issue 23 | * The location of the affected source code (tag/branch/commit or direct URL) 24 | * Any special configuration required to reproduce the issue 25 | * Step-by-step instructions to reproduce the issue 26 | * Proof-of-concept or exploit code (if possible) 27 | * Impact of the issue, including how a threat actor might exploit the issue 28 | 29 | This information will help us triage your report more quickly. 30 | 31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs. 32 | 33 | ## Preferred Languages 34 | 35 | We prefer all communications to be in English. 36 | 37 | ## Policy 38 | 39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd). 40 | 41 | 42 | -------------------------------------------------------------------------------- /samples/excel/default.yaml: -------------------------------------------------------------------------------- 1 | id: excel-default 2 | name: Blank snippet 3 | description: Create a new snippet from a blank template. 4 | author: OfficeDev 5 | host: EXCEL 6 | api_set: 7 | ExcelApi: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | async function run() { 13 | await Excel.run(async (context) => { 14 | const sheet = context.workbook.worksheets.getActiveWorksheet(); 15 | 16 | console.log("Your code goes here"); 17 | 18 | await context.sync(); 19 | }); 20 | } 21 | 22 | /** Default helper for invoking an action and handling errors. */ 23 | async function tryCatch(callback) { 24 | try { 25 | await callback(); 26 | } 27 | catch (error) { 28 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 29 | console.error(error); 30 | } 31 | } 32 | language: typescript 33 | template: 34 | content: 35 | language: html 36 | style: 37 | content: |- 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 40 | font-size: 14px; 41 | line-height: 1.5; 42 | padding: 10px; 43 | } 44 | 45 | section { 46 | margin-bottom: 20px; 47 | } 48 | 49 | h3 { 50 | margin-top: 0; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | } 54 | 55 | p { 56 | margin: 0 0 10px 0; 57 | } 58 | 59 | button { 60 | background-color: #f0f0f0; 61 | color: #333333; 62 | border: 1px solid #8a8a8a; 63 | padding: 8px 16px; 64 | font-size: 14px; 65 | cursor: pointer; 66 | border-radius: 2px; 67 | margin-left: 20px; 68 | margin-bottom: 5px; 69 | min-width: 80px; 70 | display: block; 71 | } 72 | 73 | button:hover { 74 | background-color: #e0e0e0; 75 | } 76 | 77 | button:active { 78 | background-color: #d0d0d0; 79 | } 80 | 81 | input { 82 | padding: 8px; 83 | margin: 5px 0; 84 | border: 1px solid #ccc; 85 | border-radius: 2px; 86 | font-size: 14px; 87 | } 88 | 89 | .header { 90 | text-align: center; 91 | background-color: #f3f2f1; 92 | padding: 10px; 93 | } 94 | language: css 95 | libraries: |- 96 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 97 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: outlook-recipients-and-attendees-get-from-message-read 3 | name: Get from (Message Read) 4 | description: Gets who the message is from in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-from").addEventListener("click", getFrom); 11 | 12 | function getFrom() { 13 | const msgFrom = Office.context.mailbox.item.from; 14 | console.log("Message received from: " + msgFrom.displayName + " (" + msgFrom.emailAddress + ")"); 15 | } 16 | language: typescript 17 | template: 18 | content: |- 19 |
20 |

This sample shows how to get who an email is from. In a delegate access scenario, the 21 | from property represents the delegator. Tip: Use sender to get the delegate.

22 |

Required mode: Message Read

23 |
24 |
25 |

Try it out

26 | 27 |
28 | language: html 29 | style: 30 | content: |- 31 | body { 32 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 33 | font-size: 14px; 34 | line-height: 1.5; 35 | padding: 10px; 36 | } 37 | 38 | section { 39 | margin-bottom: 20px; 40 | } 41 | 42 | h3 { 43 | margin-top: 0; 44 | margin-bottom: 10px; 45 | font-size: 16px; 46 | } 47 | 48 | p { 49 | margin: 0 0 10px 0; 50 | } 51 | 52 | button { 53 | background-color: #f0f0f0; 54 | color: #333333; 55 | border: 1px solid #8a8a8a; 56 | padding: 8px 16px; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border-radius: 2px; 60 | margin-left: 20px; 61 | margin-bottom: 5px; 62 | min-width: 80px; 63 | display: block; 64 | } 65 | 66 | button:hover { 67 | background-color: #e0e0e0; 68 | } 69 | 70 | button:active { 71 | background-color: #d0d0d0; 72 | } 73 | 74 | input { 75 | padding: 8px; 76 | margin: 5px 0; 77 | border: 1px solid #ccc; 78 | border-radius: 2px; 79 | font-size: 14px; 80 | } 81 | 82 | .header { 83 | text-align: center; 84 | background-color: #f3f2f1; 85 | padding: 10px; 86 | } 87 | language: css 88 | libraries: |- 89 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 90 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/word/01-basics/basic-common-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: word-basics-basic-common-api-call 3 | name: Basic API call (Office 2013) 4 | description: Performs a basic Word API call using JavaScript with the "common API" syntax (compatible with Office 2013). 5 | author: OfficeDev 6 | host: WORD 7 | api_set: 8 | Selection: 1.1 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", run); 12 | 13 | function run() { 14 | Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.error(asyncResult.error.message); 17 | } else { 18 | console.log(`The selected data is "${asyncResult.value}".`); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 | This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection". 27 |
28 | 29 | language: html 30 | style: 31 | content: |- 32 | body { 33 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 34 | font-size: 14px; 35 | line-height: 1.5; 36 | padding: 10px; 37 | } 38 | 39 | section { 40 | margin-bottom: 20px; 41 | } 42 | 43 | h3 { 44 | margin-top: 0; 45 | margin-bottom: 10px; 46 | font-size: 16px; 47 | } 48 | 49 | p { 50 | margin: 0 0 10px 0; 51 | } 52 | 53 | button { 54 | background-color: #f0f0f0; 55 | color: #333333; 56 | border: 1px solid #8a8a8a; 57 | padding: 8px 16px; 58 | font-size: 14px; 59 | cursor: pointer; 60 | border-radius: 2px; 61 | margin-left: 20px; 62 | margin-bottom: 5px; 63 | min-width: 80px; 64 | display: block; 65 | } 66 | 67 | button:hover { 68 | background-color: #e0e0e0; 69 | } 70 | 71 | button:active { 72 | background-color: #d0d0d0; 73 | } 74 | 75 | input { 76 | padding: 8px; 77 | margin: 5px 0; 78 | border: 1px solid #ccc; 79 | border-radius: 2px; 80 | font-size: 14px; 81 | } 82 | 83 | .header { 84 | text-align: center; 85 | background-color: #f3f2f1; 86 | padding: 10px; 87 | } 88 | language: css 89 | libraries: |- 90 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 91 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/send-async.yaml: -------------------------------------------------------------------------------- 1 | order: 30 2 | id: outlook-send-async 3 | name: Send the current message or appointment (Compose) 4 | description: Sends the current message or appointment. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.15' 8 | script: 9 | content: |- 10 | document.getElementById("send-async").addEventListener("click", sendAsync); 11 | 12 | function sendAsync() { 13 | // This snippet sends the current message or appointment being composed. 14 | Office.context.mailbox.item.sendAsync((asyncResult) => { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.log("Action failed with error: " + asyncResult.error.message); 17 | return; 18 | } 19 | }); 20 | } 21 | language: typescript 22 | template: 23 | content: |- 24 |
25 |

This sample shows how to programmatically send the current message or appointment being composed.

26 |

Required mode: Compose

27 |
28 |
29 |

Try it out

30 | 31 |
32 | language: html 33 | style: 34 | content: |- 35 | body { 36 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 37 | font-size: 14px; 38 | line-height: 1.5; 39 | padding: 10px; 40 | } 41 | 42 | section { 43 | margin-bottom: 20px; 44 | } 45 | 46 | h3 { 47 | margin-top: 0; 48 | margin-bottom: 10px; 49 | font-size: 16px; 50 | } 51 | 52 | p { 53 | margin: 0 0 10px 0; 54 | } 55 | 56 | button { 57 | background-color: #f0f0f0; 58 | color: #333333; 59 | border: 1px solid #8a8a8a; 60 | padding: 8px 16px; 61 | font-size: 14px; 62 | cursor: pointer; 63 | border-radius: 2px; 64 | margin-left: 20px; 65 | margin-bottom: 5px; 66 | min-width: 80px; 67 | display: block; 68 | } 69 | 70 | button:hover { 71 | background-color: #e0e0e0; 72 | } 73 | 74 | button:active { 75 | background-color: #d0d0d0; 76 | } 77 | 78 | input { 79 | padding: 8px; 80 | margin: 5px 0; 81 | border: 1px solid #ccc; 82 | border-radius: 2px; 83 | font-size: 14px; 84 | } 85 | 86 | .header { 87 | text-align: center; 88 | background-color: #f3f2f1; 89 | padding: 10px; 90 | } 91 | language: css 92 | libraries: |- 93 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 94 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/01-basics/basic-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: excel-basics-basic-api-call 3 | name: Basic API call (TypeScript) 4 | description: Performs a basic Excel API call using TypeScript. 5 | author: OfficeDev 6 | host: EXCEL 7 | api_set: 8 | ExcelApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 12 | 13 | async function run() { 14 | await Excel.run(async (context) => { 15 | const range = context.workbook.getSelectedRange(); 16 | range.format.fill.color = "yellow"; 17 | range.load("address"); 18 | 19 | await context.sync() 20 | 21 | console.log(`The range address was "${range.address}".`); 22 | }); 23 | } 24 | 25 | /** Default helper for invoking an action and handling errors. */ 26 | async function tryCatch(callback) { 27 | try { 28 | await callback(); 29 | } 30 | catch (error) { 31 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 32 | console.error(error); 33 | } 34 | } 35 | language: typescript 36 | template: 37 | content: |- 38 |
39 |

This sample demonstrates basic Excel API calls.

40 |
41 |
42 |

Try it out

43 |

Select some cells in the worksheet, then press Highlight selected range.

44 | 45 |
46 | language: html 47 | style: 48 | content: |- 49 | body { 50 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 51 | font-size: 14px; 52 | line-height: 1.5; 53 | padding: 10px; 54 | } 55 | 56 | section { 57 | margin-bottom: 20px; 58 | } 59 | 60 | h3 { 61 | margin-top: 0; 62 | margin-bottom: 10px; 63 | font-size: 16px; 64 | } 65 | 66 | p { 67 | margin: 0 0 10px 0; 68 | } 69 | 70 | button { 71 | background-color: #f0f0f0; 72 | color: #333333; 73 | border: 1px solid #8a8a8a; 74 | padding: 8px 16px; 75 | font-size: 14px; 76 | cursor: pointer; 77 | border-radius: 2px; 78 | margin-left: 20px; 79 | min-width: 80px; 80 | } 81 | 82 | button:hover { 83 | background-color: #e0e0e0; 84 | } 85 | 86 | button:active { 87 | background-color: #d0d0d0; 88 | } 89 | language: css 90 | libraries: |- 91 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 92 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts 93 | -------------------------------------------------------------------------------- /samples/outlook/50-recurrence/get-series-id.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: outlook-recurrence-get-series-id 3 | name: Get the series ID 4 | description: Gets the series ID. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.7' 8 | script: 9 | content: |- 10 | document.getElementById("get-series-id").addEventListener("click", getSeriesId); 11 | 12 | function getSeriesId() { 13 | const seriesId = Office.context.mailbox.item.seriesId; 14 | 15 | if (seriesId === undefined) { 16 | console.log("This is a message that's not a meeting request."); 17 | } else if (seriesId === null) { 18 | console.log("This is a single appointment, a parent series, or a meeting request for a series or single meeting."); 19 | } else { 20 | console.log("This is an instance belonging to series with ID " + seriesId); 21 | } 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the item's series ID, if any.

28 |
29 |
30 |

Try it out

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/50-recurrence/get-recurrence-read.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: outlook-recurrence-get-recurrence-read 3 | name: Get recurrence (Read) 4 | description: Gets the recurrence pattern of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.7' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | const recurrence = Office.context.mailbox.item.recurrence; 14 | 15 | if (recurrence === undefined) { 16 | console.log("This item is a message but not a meeting request."); 17 | } else if (recurrence === null) { 18 | console.log("This is a single appointment."); 19 | } else { 20 | console.log(JSON.stringify(recurrence)); 21 | } 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the item's recurrence pattern, if any.

28 |

Required modes: Appointment Attendee, Message Read

29 |
30 |
31 |

Try it out

32 | 33 |
34 | language: html 35 | style: 36 | content: |- 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 39 | font-size: 14px; 40 | line-height: 1.5; 41 | padding: 10px; 42 | } 43 | 44 | section { 45 | margin-bottom: 20px; 46 | } 47 | 48 | h3 { 49 | margin-top: 0; 50 | margin-bottom: 10px; 51 | font-size: 16px; 52 | } 53 | 54 | p { 55 | margin: 0 0 10px 0; 56 | } 57 | 58 | button { 59 | background-color: #f0f0f0; 60 | color: #333333; 61 | border: 1px solid #8a8a8a; 62 | padding: 8px 16px; 63 | font-size: 14px; 64 | cursor: pointer; 65 | border-radius: 2px; 66 | margin-left: 20px; 67 | margin-bottom: 5px; 68 | min-width: 80px; 69 | display: block; 70 | } 71 | 72 | button:hover { 73 | background-color: #e0e0e0; 74 | } 75 | 76 | button:active { 77 | background-color: #d0d0d0; 78 | } 79 | 80 | input { 81 | padding: 8px; 82 | margin: 5px 0; 83 | border: 1px solid #ccc; 84 | border-radius: 2px; 85 | font-size: 14px; 86 | } 87 | 88 | .header { 89 | text-align: center; 90 | background-color: #f3f2f1; 91 | padding: 10px; 92 | } 93 | language: css 94 | libraries: |- 95 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 96 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/powerpoint/basics/basic-api-call-ts.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: powerpoint-basics-basic-api-call-ts 3 | name: Basic API call (TypeScript) 4 | description: Performs a basic PowerPoint API call using TypeScript. 5 | host: POWERPOINT 6 | api_set: 7 | PowerPointApi: '1.4' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | const run: Function = async () => { 13 | // This function gets the collection of shapes on the first slide, 14 | // and adds a text box to the collection, while specifying its text, 15 | // location, and size. Then it names the text box. 16 | await PowerPoint.run(async (context) => { 17 | const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes; 18 | const shapeOptions: PowerPoint.ShapeAddOptions = { 19 | left: 100, 20 | top: 300, 21 | height: 300, 22 | width: 450 23 | }; 24 | const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", shapeOptions); 25 | 26 | await context.sync(); 27 | }); 28 | } 29 | 30 | /** Default helper for invoking an action and handling errors. */ 31 | const tryCatch: (callback: Function) => void = async (callback: Function) => { 32 | try { 33 | await callback(); 34 | } catch (error) { 35 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 36 | console.error(error); 37 | } 38 | } 39 | language: typescript 40 | template: 41 | content: |- 42 |
43 | This sample executes a code snippet that adds a text box to the first slide in the presentation. 44 |
45 | 46 | language: html 47 | style: 48 | content: |- 49 | body { 50 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 51 | font-size: 14px; 52 | line-height: 1.5; 53 | padding: 10px; 54 | } 55 | 56 | section { 57 | margin-bottom: 20px; 58 | } 59 | 60 | button { 61 | background-color: #f0f0f0; 62 | color: #333333; 63 | border: 1px solid #8a8a8a; 64 | padding: 8px 16px; 65 | font-size: 14px; 66 | cursor: pointer; 67 | border-radius: 2px; 68 | margin-left: 20px; 69 | min-width: 80px; 70 | } 71 | 72 | button:hover { 73 | background-color: #e0e0e0; 74 | } 75 | 76 | button:active { 77 | background-color: #d0d0d0; 78 | } 79 | language: css 80 | libraries: |- 81 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 82 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts 83 | -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-item-type.yaml: -------------------------------------------------------------------------------- 1 | order: 6 2 | id: outlook-other-item-apis-get-item-type 3 | name: Get the item type 4 | description: Gets the item type. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | 12 | function get() { 13 | const itemType = Office.context.mailbox.item.itemType; 14 | switch (itemType) { 15 | case Office.MailboxEnums.ItemType.Appointment: 16 | console.log(`Current item is an ${itemType}.`); 17 | break; 18 | case Office.MailboxEnums.ItemType.Message: 19 | console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`); 20 | break; 21 | } 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the item type.

28 |
29 |
30 |

Try it out

31 | 34 |
35 | language: html 36 | style: 37 | content: |- 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 40 | font-size: 14px; 41 | line-height: 1.5; 42 | padding: 10px; 43 | } 44 | 45 | section { 46 | margin-bottom: 20px; 47 | } 48 | 49 | h3 { 50 | margin-top: 0; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | } 54 | 55 | p { 56 | margin: 0 0 10px 0; 57 | } 58 | 59 | button { 60 | background-color: #f0f0f0; 61 | color: #333333; 62 | border: 1px solid #8a8a8a; 63 | padding: 8px 16px; 64 | font-size: 14px; 65 | cursor: pointer; 66 | border-radius: 2px; 67 | margin-left: 20px; 68 | margin-bottom: 5px; 69 | min-width: 80px; 70 | display: block; 71 | } 72 | 73 | button:hover { 74 | background-color: #e0e0e0; 75 | } 76 | 77 | button:active { 78 | background-color: #d0d0d0; 79 | } 80 | 81 | input { 82 | padding: 8px; 83 | margin: 5px 0; 84 | border: 1px solid #ccc; 85 | border-radius: 2px; 86 | font-size: 14px; 87 | } 88 | 89 | .header { 90 | text-align: center; 91 | background-color: #f3f2f1; 92 | padding: 10px; 93 | } 94 | language: css 95 | libraries: |- 96 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 97 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-eml-format.yaml: -------------------------------------------------------------------------------- 1 | order: 25 2 | id: outlook-get-eml-format 3 | name: Get the Base64-encoded EML format of a message (Message Read) 4 | description: Gets the Base64-encoded EML format of a message in read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.14' 8 | script: 9 | content: |- 10 | document.getElementById("get-eml-format").addEventListener("click", getEmlFormat); 11 | 12 | function getEmlFormat() { 13 | Office.context.mailbox.item.getAsFileAsync((asyncResult) => { 14 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 15 | console.log(`Error encountered during processing: ${asyncResult.error.message}`); 16 | return; 17 | } 18 | 19 | console.log(asyncResult.value); 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get the Base64-encoded EML format of a message in read mode.

27 |

Required mode: Message Read

28 |
29 |
30 |

Try it out

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: outlook-recipients-and-attendees-get-from-message-compose 3 | name: Get from (Message Compose) 4 | description: Gets who the message is from in Compose mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.7' 8 | script: 9 | content: |- 10 | document.getElementById("get-from").addEventListener("click", getFrom); 11 | 12 | function getFrom() { 13 | Office.context.mailbox.item.from.getAsync(function(asyncResult) { 14 | if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { 15 | const msgFrom = asyncResult.value; 16 | console.log("Message from: " + msgFrom.displayName + " (" + msgFrom.emailAddress + ")"); 17 | } else { 18 | console.error(asyncResult.error); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get who an email is from.

27 |

Required mode: Message Compose

28 |
29 |
30 |

Try it out

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/item-id-compose.yaml: -------------------------------------------------------------------------------- 1 | order: 29 2 | id: outlook-other-item-apis-item-id-compose 3 | name: Get an item ID in compose mode 4 | description: Gets an item ID in compose mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.8' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", run); 11 | 12 | function run() { 13 | Office.context.mailbox.item.getItemIdAsync((result) => { 14 | if (result.status === Office.AsyncResultStatus.Failed) { 15 | console.error(`getItemIdAsync failed with message: ${result.error.message}`); 16 | return; 17 | } 18 | 19 | console.log(result.value); 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get an item ID in compose mode.

27 |

Required mode: Compose

28 |
29 |
30 |

Try it out

31 |

Before you can get the item ID, you must first save the mail item.

32 | 35 |
36 | language: html 37 | style: 38 | content: |- 39 | body { 40 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 41 | font-size: 14px; 42 | line-height: 1.5; 43 | padding: 10px; 44 | } 45 | 46 | section { 47 | margin-bottom: 20px; 48 | } 49 | 50 | h3 { 51 | margin-top: 0; 52 | margin-bottom: 10px; 53 | font-size: 16px; 54 | } 55 | 56 | p { 57 | margin: 0 0 10px 0; 58 | } 59 | 60 | button { 61 | background-color: #f0f0f0; 62 | color: #333333; 63 | border: 1px solid #8a8a8a; 64 | padding: 8px 16px; 65 | font-size: 14px; 66 | cursor: pointer; 67 | border-radius: 2px; 68 | margin-left: 20px; 69 | margin-bottom: 5px; 70 | min-width: 80px; 71 | display: block; 72 | } 73 | 74 | button:hover { 75 | background-color: #e0e0e0; 76 | } 77 | 78 | button:active { 79 | background-color: #d0d0d0; 80 | } 81 | 82 | input { 83 | padding: 8px; 84 | margin: 5px 0; 85 | border: 1px solid #ccc; 86 | border-radius: 2px; 87 | font-size: 14px; 88 | } 89 | 90 | .header { 91 | text-align: center; 92 | background-color: #f3f2f1; 93 | padding: 10px; 94 | } 95 | language: css 96 | libraries: |- 97 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 98 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/powerpoint/slide-management/get-slide-metadata.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: powerpoint-basics-get-slide-metadata 3 | name: Get slide metadata 4 | description: Gets the title, index, and ID of the selected slides. 5 | author: OfficeDev 6 | host: POWERPOINT 7 | api_set: {} 8 | script: 9 | content: |- 10 | document.getElementById("get-slide-metadata").addEventListener("click", getSlideMetadata); 11 | 12 | function getSlideMetadata() { 13 | Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, 14 | function (asyncResult) { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.error(asyncResult.error.message); 17 | } else { 18 | console.log(JSON.stringify(asyncResult.value, null, 4)); 19 | } 20 | } 21 | ); 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

Demonstrates how to get slide metadata.

28 |

Select one or more slides and click Get slide metadata to get the ID, title, and index of the slide(s).

29 |
30 | 31 | language: html 32 | style: 33 | content: |- 34 | body { 35 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 36 | font-size: 14px; 37 | line-height: 1.5; 38 | padding: 10px; 39 | } 40 | 41 | section { 42 | margin-bottom: 20px; 43 | } 44 | 45 | h3 { 46 | margin-top: 0; 47 | margin-bottom: 10px; 48 | font-size: 16px; 49 | } 50 | 51 | p { 52 | margin: 0 0 10px 0; 53 | } 54 | 55 | button { 56 | background-color: #f0f0f0; 57 | color: #333333; 58 | border: 1px solid #8a8a8a; 59 | padding: 8px 16px; 60 | font-size: 14px; 61 | cursor: pointer; 62 | border-radius: 2px; 63 | margin-left: 20px; 64 | margin-bottom: 5px; 65 | min-width: 80px; 66 | display: block; 67 | } 68 | 69 | button:hover { 70 | background-color: #e0e0e0; 71 | } 72 | 73 | button:active { 74 | background-color: #d0d0d0; 75 | } 76 | 77 | input { 78 | padding: 8px; 79 | margin: 5px 0; 80 | border: 1px solid #ccc; 81 | border-radius: 2px; 82 | font-size: 14px; 83 | } 84 | 85 | .header { 86 | text-align: center; 87 | background-color: #f3f2f1; 88 | padding: 10px; 89 | } 90 | language: css 91 | libraries: |- 92 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 93 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/20-item-body/get-body-format.yaml: -------------------------------------------------------------------------------- 1 | order: 4 2 | id: outlook-item-body-get-body-format 3 | name: Get the item's body format 4 | description: Gets a message or appointment's body format (plain text or HTML). 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-body-format").addEventListener("click", getBodyFormat); 11 | 12 | function getBodyFormat() { 13 | // Get the mail item's body format (plain text or HTML) and log it to the console. 14 | Office.context.mailbox.item.body.getTypeAsync((asyncResult) => { 15 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 16 | console.log("Action failed with error: " + asyncResult.error.message); 17 | return; 18 | } 19 | 20 | console.log("Body format: " + asyncResult.value); 21 | }); 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample gets the message or appointment's body format (plain text or HTML).

28 |

Required mode: Compose

29 |
30 |
31 |

Try it out

32 | 33 |
34 | language: html 35 | style: 36 | content: |- 37 | body { 38 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 39 | font-size: 14px; 40 | line-height: 1.5; 41 | padding: 10px; 42 | } 43 | 44 | section { 45 | margin-bottom: 20px; 46 | } 47 | 48 | h3 { 49 | margin-top: 0; 50 | margin-bottom: 10px; 51 | font-size: 16px; 52 | } 53 | 54 | p { 55 | margin: 0 0 10px 0; 56 | } 57 | 58 | button { 59 | background-color: #f0f0f0; 60 | color: #333333; 61 | border: 1px solid #8a8a8a; 62 | padding: 8px 16px; 63 | font-size: 14px; 64 | cursor: pointer; 65 | border-radius: 2px; 66 | margin-left: 20px; 67 | margin-bottom: 5px; 68 | min-width: 80px; 69 | display: block; 70 | } 71 | 72 | button:hover { 73 | background-color: #e0e0e0; 74 | } 75 | 76 | button:active { 77 | background-color: #d0d0d0; 78 | } 79 | 80 | input { 81 | padding: 8px; 82 | margin: 5px 0; 83 | border: 1px solid #ccc; 84 | border-radius: 2px; 85 | font-size: 14px; 86 | } 87 | 88 | .header { 89 | text-align: center; 90 | background-color: #f3f2f1; 91 | padding: 10px; 92 | } 93 | language: css 94 | libraries: |- 95 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 96 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml: -------------------------------------------------------------------------------- 1 | order: 14 2 | id: outlook-recipients-and-attendees-get-organizer-appointment-organizer 3 | name: Get organizer (Appointment Organizer) 4 | description: Gets the organizer in Appointment Organizer mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.7' 8 | script: 9 | content: |- 10 | document.getElementById("get-organizer").addEventListener("click", getOrganizer); 11 | 12 | function getOrganizer() { 13 | Office.context.mailbox.item.organizer.getAsync(function(asyncResult) { 14 | if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { 15 | const apptOrganizer = asyncResult.value; 16 | console.log("Organizer: " + apptOrganizer.displayName + " (" + apptOrganizer.emailAddress + ")"); 17 | } else { 18 | console.error(asyncResult.error); 19 | } 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get the appointment organizer.

27 |

Required mode: Appointment Organizer

28 |
29 |
30 |

Try it out

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/set-selected-data.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: outlook-item-body-set-selected-data 3 | name: Replace selected text in item body or subject (Compose) 4 | description: Replaces the selected text in the item body or subject in Compose mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("set-selected-data").addEventListener("click", setSelectedData); 11 | 12 | function setSelectedData() { 13 | Office.context.mailbox.item.setSelectedDataAsync("Replaced", function(asyncResult) { 14 | if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { 15 | console.log("Selected text has been updated successfully."); 16 | } else { 17 | console.error(asyncResult.error); 18 | } 19 | }); 20 | } 21 | language: typescript 22 | template: 23 | content: |- 24 |
25 |

This sample shows how to replace the selected text in the item body or subject/title.

26 |

Required mode: Compose

27 |
28 |
29 |

Try it out

30 |

Select text in the item body or subject then push the Replace selected text button.

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/01-basics/basic-api-call-es5.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: excel-basics-basic-api-call-es5 3 | name: Basic API call (JavaScript) 4 | description: Performs a basic Excel API call using plain JavaScript & Promises. 5 | author: OfficeDev 6 | host: EXCEL 7 | api_set: 8 | ExcelApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 12 | 13 | function run() { 14 | return Excel.run(function (context) { 15 | var range = context.workbook.getSelectedRange(); 16 | range.format.fill.color = "yellow"; 17 | range.load("address"); 18 | return context.sync() 19 | .then(function () { 20 | console.log("The range address was \"" + range.address + "\"."); 21 | }); 22 | }); 23 | } 24 | 25 | /** Default helper for invoking an action and handling errors. */ 26 | function tryCatch(callback) { 27 | Promise.resolve() 28 | .then(callback) 29 | .catch(function (error) { 30 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 31 | console.error(error); 32 | }); 33 | } 34 | language: typescript 35 | template: 36 | content: |- 37 |
38 |

This sample demonstrates basic Excel API calls using ES5.

39 |
40 |
41 |

Try it out

42 |

Select some cells in the worksheet, then press Highlight selected range.

43 | 44 |
45 | language: html 46 | style: 47 | content: |- 48 | body { 49 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 50 | font-size: 14px; 51 | line-height: 1.5; 52 | padding: 10px; 53 | } 54 | 55 | section { 56 | margin-bottom: 20px; 57 | } 58 | 59 | h3 { 60 | margin-top: 0; 61 | margin-bottom: 10px; 62 | font-size: 16px; 63 | } 64 | 65 | p { 66 | margin: 0 0 10px 0; 67 | } 68 | 69 | button { 70 | background-color: #f0f0f0; 71 | color: #333333; 72 | border: 1px solid #8a8a8a; 73 | padding: 8px 16px; 74 | font-size: 14px; 75 | cursor: pointer; 76 | border-radius: 2px; 77 | margin-left: 20px; 78 | margin-bottom: 5px; 79 | min-width: 80px; 80 | display: block; 81 | } 82 | 83 | button:hover { 84 | background-color: #e0e0e0; 85 | } 86 | 87 | button:active { 88 | background-color: #d0d0d0; 89 | } 90 | language: css 91 | libraries: |- 92 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 93 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts 94 | -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-in-reply-to.yaml: -------------------------------------------------------------------------------- 1 | order: 26 2 | id: outlook-get-in-reply-to 3 | name: Get the ID of the message being replied to (Message Compose) 4 | description: Retrieves the ID of the message being replied to by the current message. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.14' 8 | script: 9 | content: |- 10 | document.getElementById("get-in-reply-to").addEventListener("click", getInReplyTo); 11 | 12 | function getInReplyTo() { 13 | // This snippet gets the ID of the message being replied to by the current message (PR_IN_REPLY_TO_ID). 14 | // The API call is supported on messages being composed and isn't supported on read items. 15 | const inReplyTo = Office.context.mailbox.item.inReplyTo; 16 | if (inReplyTo) { 17 | console.log("ID of the message being replied to: " + inReplyTo); 18 | } else { 19 | console.log("No InReplyTo property available for this message"); 20 | } 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get the ID of the message being replied to by the current message.

27 |

Required mode: Message Compose

28 |
29 |
30 |

Try it out

31 | 32 |
33 | language: html 34 | style: 35 | content: |- 36 | body { 37 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 38 | font-size: 14px; 39 | line-height: 1.5; 40 | padding: 10px; 41 | } 42 | 43 | section { 44 | margin-bottom: 20px; 45 | } 46 | 47 | h3 { 48 | margin-top: 0; 49 | margin-bottom: 10px; 50 | font-size: 16px; 51 | } 52 | 53 | p { 54 | margin: 0 0 10px 0; 55 | } 56 | 57 | button { 58 | background-color: #f0f0f0; 59 | color: #333333; 60 | border: 1px solid #8a8a8a; 61 | padding: 8px 16px; 62 | font-size: 14px; 63 | cursor: pointer; 64 | border-radius: 2px; 65 | margin-left: 20px; 66 | margin-bottom: 5px; 67 | min-width: 80px; 68 | display: block; 69 | } 70 | 71 | button:hover { 72 | background-color: #e0e0e0; 73 | } 74 | 75 | button:active { 76 | background-color: #d0d0d0; 77 | } 78 | 79 | input { 80 | padding: 8px; 81 | margin: 5px 0; 82 | border: 1px solid #ccc; 83 | border-radius: 2px; 84 | font-size: 14px; 85 | } 86 | 87 | .header { 88 | text-align: center; 89 | background-color: #f3f2f1; 90 | padding: 10px; 91 | } 92 | language: css 93 | libraries: |- 94 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 95 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/20-item-body/get-selected-data.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: outlook-item-body-get-selected-data 3 | name: Get selected text (Compose) 4 | description: Gets the selected text in the item body or subject in Compose mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-selected-data").addEventListener("click", getSelectedData); 11 | 12 | function getSelectedData() { 13 | Office.context.mailbox.item.getSelectedDataAsync(Office.CoercionType.Text, function(asyncResult) { 14 | if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { 15 | const text = asyncResult.value.data; 16 | const prop = asyncResult.value.sourceProperty; 17 | console.log("Selected text in " + prop + ": " + text); 18 | } else { 19 | console.error(asyncResult.error); 20 | } 21 | }); 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the selected text in the item body or subject/title.

28 |

Required mode: Compose

29 |
30 |
31 |

Try it out

32 |

Select text in the item body or subject then push the Get selected text button.

33 | 34 |
35 | language: html 36 | style: 37 | content: |- 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 40 | font-size: 14px; 41 | line-height: 1.5; 42 | padding: 10px; 43 | } 44 | 45 | section { 46 | margin-bottom: 20px; 47 | } 48 | 49 | h3 { 50 | margin-top: 0; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | } 54 | 55 | p { 56 | margin: 0 0 10px 0; 57 | } 58 | 59 | button { 60 | background-color: #f0f0f0; 61 | color: #333333; 62 | border: 1px solid #8a8a8a; 63 | padding: 8px 16px; 64 | font-size: 14px; 65 | cursor: pointer; 66 | border-radius: 2px; 67 | margin-left: 20px; 68 | margin-bottom: 5px; 69 | min-width: 80px; 70 | display: block; 71 | } 72 | 73 | button:hover { 74 | background-color: #e0e0e0; 75 | } 76 | 77 | button:active { 78 | background-color: #d0d0d0; 79 | } 80 | 81 | input { 82 | padding: 8px; 83 | margin: 5px 0; 84 | border: 1px solid #ccc; 85 | border-radius: 2px; 86 | font-size: 14px; 87 | } 88 | 89 | .header { 90 | text-align: center; 91 | background-color: #f3f2f1; 92 | padding: 10px; 93 | } 94 | language: css 95 | libraries: |- 96 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 97 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml: -------------------------------------------------------------------------------- 1 | order: 11 2 | id: outlook-recipients-and-attendees-get-optional-attendees-appointment-attendee 3 | name: Get optional attendees (Appointment Attendee) 4 | description: Gets the optional attendees in Appointment Attendee mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-optional-attendees").addEventListener("click", getOptionalAttendees); 11 | 12 | function getOptionalAttendees() { 13 | const apptOptionalAttendees = Office.context.mailbox.item.optionalAttendees; 14 | console.log("Optional attendees:"); 15 | for (let i = 0; i < apptOptionalAttendees.length; i++) { 16 | console.log( 17 | apptOptionalAttendees[i].displayName + 18 | " (" + 19 | apptOptionalAttendees[i].emailAddress + 20 | ") - response: " + 21 | apptOptionalAttendees[i].appointmentResponse 22 | ); 23 | } 24 | } 25 | language: typescript 26 | template: 27 | content: |- 28 |
29 |

This sample shows how to get the optional attendees.

30 |

Required mode: Appointment Attendee

31 |
32 |
33 |

Try it out

34 | 35 |
36 | language: html 37 | style: 38 | content: |- 39 | body { 40 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 41 | font-size: 14px; 42 | line-height: 1.5; 43 | padding: 10px; 44 | } 45 | 46 | section { 47 | margin-bottom: 20px; 48 | } 49 | 50 | h3 { 51 | margin-top: 0; 52 | margin-bottom: 10px; 53 | font-size: 16px; 54 | } 55 | 56 | p { 57 | margin: 0 0 10px 0; 58 | } 59 | 60 | button { 61 | background-color: #f0f0f0; 62 | color: #333333; 63 | border: 1px solid #8a8a8a; 64 | padding: 8px 16px; 65 | font-size: 14px; 66 | cursor: pointer; 67 | border-radius: 2px; 68 | margin-left: 20px; 69 | margin-bottom: 5px; 70 | min-width: 80px; 71 | display: block; 72 | } 73 | 74 | button:hover { 75 | background-color: #e0e0e0; 76 | } 77 | 78 | button:active { 79 | background-color: #d0d0d0; 80 | } 81 | 82 | input { 83 | padding: 8px; 84 | margin: 5px 0; 85 | border: 1px solid #ccc; 86 | border-radius: 2px; 87 | font-size: 14px; 88 | } 89 | 90 | .header { 91 | text-align: center; 92 | background-color: #f3f2f1; 93 | padding: 10px; 94 | } 95 | language: css 96 | libraries: |- 97 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 98 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml: -------------------------------------------------------------------------------- 1 | order: 9 2 | id: outlook-recipients-and-attendees-get-required-attendees-appointment-attendee 3 | name: Get required attendees (Appointment Attendee) 4 | description: Gets the required attendees in Appointment Attendee mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-required-attendees").addEventListener("click", getRequiredAttendees); 11 | 12 | function getRequiredAttendees() { 13 | const apptRequiredAttendees = Office.context.mailbox.item.requiredAttendees; 14 | console.log("Required attendees:"); 15 | for (let i = 0; i < apptRequiredAttendees.length; i++) { 16 | console.log( 17 | apptRequiredAttendees[i].displayName + 18 | " (" + 19 | apptRequiredAttendees[i].emailAddress + 20 | ") - response: " + 21 | apptRequiredAttendees[i].appointmentResponse 22 | ); 23 | } 24 | } 25 | language: typescript 26 | template: 27 | content: |- 28 |
29 |

This sample shows how to get the required attendees.

30 |

Required mode: Appointment Attendee

31 |
32 |
33 |

Try it out

34 | 35 |
36 | language: html 37 | style: 38 | content: |- 39 | body { 40 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 41 | font-size: 14px; 42 | line-height: 1.5; 43 | padding: 10px; 44 | } 45 | 46 | section { 47 | margin-bottom: 20px; 48 | } 49 | 50 | h3 { 51 | margin-top: 0; 52 | margin-bottom: 10px; 53 | font-size: 16px; 54 | } 55 | 56 | p { 57 | margin: 0 0 10px 0; 58 | } 59 | 60 | button { 61 | background-color: #f0f0f0; 62 | color: #333333; 63 | border: 1px solid #8a8a8a; 64 | padding: 8px 16px; 65 | font-size: 14px; 66 | cursor: pointer; 67 | border-radius: 2px; 68 | margin-left: 20px; 69 | margin-bottom: 5px; 70 | min-width: 80px; 71 | display: block; 72 | } 73 | 74 | button:hover { 75 | background-color: #e0e0e0; 76 | } 77 | 78 | button:active { 79 | background-color: #d0d0d0; 80 | } 81 | 82 | input { 83 | padding: 8px; 84 | margin: 5px 0; 85 | border: 1px solid #ccc; 86 | border-radius: 2px; 87 | font-size: 14px; 88 | } 89 | 90 | .header { 91 | text-align: center; 92 | background-color: #f3f2f1; 93 | padding: 10px; 94 | } 95 | language: css 96 | libraries: |- 97 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 98 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/01-basics/basic-common-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: excel-basics-basic-common-api-call 3 | name: Basic API call (Office 2013) 4 | description: Performs a basic Excel API call using JavaScript with the "common API" syntax (compatible with Office 2013). 5 | author: OfficeDev 6 | host: EXCEL 7 | api_set: 8 | Selection: 1.1 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", run); 12 | 13 | function run() { 14 | Office.context.document.getSelectedDataAsync( 15 | Office.CoercionType.Text, 16 | asyncResult => { 17 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 18 | console.error(asyncResult.error.message); 19 | } else { 20 | console.log(`The selected data is "${asyncResult.value}".`); 21 | } 22 | } 23 | ); 24 | } 25 | language: typescript 26 | template: 27 | content: |- 28 |
29 |

This sample uses the Common APIs compatible with Office 2013.

30 |
31 |
32 |

Try it out

33 |

Select a cell in the worksheet and press Write to console to see the contents of that cell in the console.

34 |

35 |

Be sure to exit cell-editing context before pressing the button.

36 |
37 | language: html 38 | style: 39 | content: |- 40 | body { 41 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 42 | font-size: 14px; 43 | line-height: 1.5; 44 | padding: 10px; 45 | } 46 | 47 | section { 48 | margin-bottom: 20px; 49 | } 50 | 51 | h3 { 52 | margin-top: 0; 53 | margin-bottom: 10px; 54 | font-size: 16px; 55 | } 56 | 57 | p { 58 | margin: 0 0 10px 0; 59 | } 60 | 61 | button { 62 | background-color: #f0f0f0; 63 | color: #333333; 64 | border: 1px solid #8a8a8a; 65 | padding: 8px 16px; 66 | font-size: 14px; 67 | cursor: pointer; 68 | border-radius: 2px; 69 | margin-left: 20px; 70 | margin-bottom: 5px; 71 | min-width: 80px; 72 | display: block; 73 | } 74 | 75 | button:hover { 76 | background-color: #e0e0e0; 77 | } 78 | 79 | button:active { 80 | background-color: #d0d0d0; 81 | } 82 | 83 | input { 84 | padding: 8px; 85 | margin: 5px 0; 86 | border: 1px solid #ccc; 87 | border-radius: 2px; 88 | font-size: 14px; 89 | } 90 | 91 | .header { 92 | text-align: center; 93 | background-color: #f3f2f1; 94 | padding: 10px; 95 | } 96 | language: css 97 | libraries: |- 98 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 99 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-item-class-async.yaml: -------------------------------------------------------------------------------- 1 | order: 28 2 | id: outlook-get-item-class-async 3 | name: Get item class (Message Compose) 4 | description: Retrieves the item class property of the message being composed. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.14' 8 | script: 9 | content: |- 10 | document.getElementById("get-item-class-async").addEventListener("click", getItemClassAsync); 11 | 12 | function getItemClassAsync() { 13 | // This snippet returns the Exchange Web Services item class property (PR_MESSAGE_CLASS) of the current message. 14 | // The API call is only supported on a message being composed. 15 | Office.context.mailbox.item.getItemClassAsync((asyncResult) => { 16 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 17 | console.log("Action failed with error: " + asyncResult.error.message); 18 | return; 19 | } 20 | 21 | console.log("Item class of the current message: " + asyncResult.value); 22 | }); 23 | } 24 | language: typescript 25 | template: 26 | content: |- 27 |
28 |

This sample shows how to get the Exchange Web Services (EWS) item class of the current message being composed.

29 |

Required mode: Message Compose

30 |
31 |
32 |

Try it out

33 | 34 |
35 | language: html 36 | style: 37 | content: |- 38 | body { 39 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 40 | font-size: 14px; 41 | line-height: 1.5; 42 | padding: 10px; 43 | } 44 | 45 | section { 46 | margin-bottom: 20px; 47 | } 48 | 49 | h3 { 50 | margin-top: 0; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | } 54 | 55 | p { 56 | margin: 0 0 10px 0; 57 | } 58 | 59 | button { 60 | background-color: #f0f0f0; 61 | color: #333333; 62 | border: 1px solid #8a8a8a; 63 | padding: 8px 16px; 64 | font-size: 14px; 65 | cursor: pointer; 66 | border-radius: 2px; 67 | margin-left: 20px; 68 | margin-bottom: 5px; 69 | min-width: 80px; 70 | display: block; 71 | } 72 | 73 | button:hover { 74 | background-color: #e0e0e0; 75 | } 76 | 77 | button:active { 78 | background-color: #d0d0d0; 79 | } 80 | 81 | input { 82 | padding: 8px; 83 | margin: 5px 0; 84 | border: 1px solid #ccc; 85 | border-radius: 2px; 86 | font-size: 14px; 87 | } 88 | 89 | .header { 90 | text-align: center; 91 | background-color: #f3f2f1; 92 | padding: 10px; 93 | } 94 | language: css 95 | libraries: |- 96 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 97 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/50-workbook/workbook-get-active-cell.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: excel-workbook-get-active-cell 3 | name: Active cell 4 | description: Gets the active cell of the entire workbook. 5 | host: EXCEL 6 | api_set: 7 | ExcelApi: '1.7' 8 | script: 9 | content: |- 10 | document.getElementById("get-active-cell").addEventListener("click", () => tryCatch(run)); 11 | 12 | async function run() { 13 | await Excel.run(async (context) => { 14 | 15 | let myWorkbook = context.workbook; 16 | let activeCell = myWorkbook.getActiveCell(); 17 | activeCell.load("address"); 18 | 19 | await context.sync(); 20 | 21 | console.log("The active cell is " + activeCell.address); 22 | }); 23 | } 24 | 25 | /** Default helper for invoking an action and handling errors. */ 26 | async function tryCatch(callback) { 27 | try { 28 | await callback(); 29 | } 30 | catch (error) { 31 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 32 | console.error(error); 33 | } 34 | } 35 | language: typescript 36 | template: 37 | content: |- 38 |
39 |

This sample shows how to get the active cell of the entire workbook.

40 |
41 |
42 |

Try it out

43 | 44 |
45 | language: html 46 | style: 47 | content: |- 48 | body { 49 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 50 | font-size: 14px; 51 | line-height: 1.5; 52 | padding: 10px; 53 | } 54 | 55 | section { 56 | margin-bottom: 20px; 57 | } 58 | 59 | h3 { 60 | margin-top: 0; 61 | margin-bottom: 10px; 62 | font-size: 16px; 63 | } 64 | 65 | p { 66 | margin: 0 0 10px 0; 67 | } 68 | 69 | button { 70 | background-color: #f0f0f0; 71 | color: #333333; 72 | border: 1px solid #8a8a8a; 73 | padding: 8px 16px; 74 | font-size: 14px; 75 | cursor: pointer; 76 | border-radius: 2px; 77 | margin-left: 20px; 78 | margin-bottom: 5px; 79 | min-width: 80px; 80 | display: block; 81 | } 82 | 83 | button:hover { 84 | background-color: #e0e0e0; 85 | } 86 | 87 | button:active { 88 | background-color: #d0d0d0; 89 | } 90 | 91 | input { 92 | padding: 8px; 93 | margin: 5px 0; 94 | border: 1px solid #ccc; 95 | border-radius: 2px; 96 | font-size: 14px; 97 | } 98 | 99 | .header { 100 | text-align: center; 101 | background-color: #f3f2f1; 102 | padding: 10px; 103 | } 104 | language: css 105 | libraries: |- 106 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 107 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/word/30-properties/get-built-in-properties.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: word-properties-get-built-in-properties 3 | name: Built-in document properties 4 | description: Gets built-in document properties. 5 | author: OfficeDev 6 | host: WORD 7 | api_set: 8 | WordApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", () => tryCatch(getProperties)); 12 | 13 | async function getProperties() { 14 | await Word.run(async (context) => { 15 | const builtInProperties: Word.DocumentProperties = context.document.properties; 16 | builtInProperties.load("*"); // Let's get all! 17 | 18 | await context.sync(); 19 | console.log(JSON.stringify(builtInProperties, null, 4)); 20 | }); 21 | } 22 | 23 | // Default helper for invoking an action and handling errors. 24 | async function tryCatch(callback) { 25 | try { 26 | await callback(); 27 | } 28 | catch (error) { 29 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 30 | console.error(error); 31 | } 32 | } 33 | language: typescript 34 | template: 35 | content: |- 36 |
37 | This sample demonstrates how to get the built-in properties of a Word document. 38 |
39 |
40 |

Try it out

41 | 42 |
43 | language: html 44 | style: 45 | content: |- 46 | body { 47 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 48 | font-size: 14px; 49 | line-height: 1.5; 50 | padding: 10px; 51 | } 52 | 53 | section { 54 | margin-bottom: 20px; 55 | } 56 | 57 | h3 { 58 | margin-top: 0; 59 | margin-bottom: 10px; 60 | font-size: 16px; 61 | } 62 | 63 | p { 64 | margin: 0 0 10px 0; 65 | } 66 | 67 | button { 68 | background-color: #f0f0f0; 69 | color: #333333; 70 | border: 1px solid #8a8a8a; 71 | padding: 8px 16px; 72 | font-size: 14px; 73 | cursor: pointer; 74 | border-radius: 2px; 75 | margin-left: 20px; 76 | margin-bottom: 5px; 77 | min-width: 80px; 78 | display: block; 79 | } 80 | 81 | button:hover { 82 | background-color: #e0e0e0; 83 | } 84 | 85 | button:active { 86 | background-color: #d0d0d0; 87 | } 88 | 89 | input { 90 | padding: 8px; 91 | margin: 5px 0; 92 | border: 1px solid #ccc; 93 | border-radius: 2px; 94 | font-size: 14px; 95 | } 96 | 97 | .header { 98 | text-align: center; 99 | background-color: #f3f2f1; 100 | padding: 10px; 101 | } 102 | language: css 103 | libraries: |- 104 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 105 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/40-attachments/get-attachments-read.yaml: -------------------------------------------------------------------------------- 1 | id: outlook-attachments-get-attachments-read 2 | name: Get attachments (Item Read) 3 | description: Gets the attachments of a message or an appointment in Read mode. 4 | host: OUTLOOK 5 | api_set: 6 | Mailbox: '1.1' 7 | script: 8 | content: |- 9 | document.getElementById("run").addEventListener("click", run); 10 | 11 | function run() { 12 | const item = Office.context.mailbox.item; 13 | 14 | if (item.attachments.length > 0) { 15 | for (let i = 0; i < item.attachments.length; i++) { 16 | const attachment = item.attachments[i]; 17 | console.log(`${i+1}. Name: ${attachment.name}`); 18 | console.log(`ID: ${attachment.id}`); 19 | console.log(`Type: ${attachment.attachmentType}`); 20 | console.log(`Inline content: ${attachment.isInline}`); 21 | console.log(`Size: ${attachment.size}`); 22 | } 23 | } else { 24 | console.log("This mail item doesn't contain any attachments."); 25 | } 26 | } 27 | language: typescript 28 | template: 29 | content: |- 30 |
31 |

This sample shows how to get the attachments of a message or an appointment in Read mode.

32 |

Required mode: Item Read

33 |
34 |
35 |

Try it out

36 | 39 |
40 | language: html 41 | style: 42 | content: |- 43 | body { 44 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 45 | font-size: 14px; 46 | line-height: 1.5; 47 | padding: 10px; 48 | } 49 | 50 | section { 51 | margin-bottom: 20px; 52 | } 53 | 54 | h3 { 55 | margin-top: 0; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | } 59 | 60 | p { 61 | margin: 0 0 10px 0; 62 | } 63 | 64 | button { 65 | background-color: #f0f0f0; 66 | color: #333333; 67 | border: 1px solid #8a8a8a; 68 | padding: 8px 16px; 69 | font-size: 14px; 70 | cursor: pointer; 71 | border-radius: 2px; 72 | margin-left: 20px; 73 | margin-bottom: 5px; 74 | min-width: 80px; 75 | display: block; 76 | } 77 | 78 | button:hover { 79 | background-color: #e0e0e0; 80 | } 81 | 82 | button:active { 83 | background-color: #d0d0d0; 84 | } 85 | 86 | input { 87 | padding: 8px; 88 | margin: 5px 0; 89 | border: 1px solid #ccc; 90 | border-radius: 2px; 91 | font-size: 14px; 92 | } 93 | 94 | .header { 95 | text-align: center; 96 | background-color: #f3f2f1; 97 | padding: 10px; 98 | } 99 | language: css 100 | libraries: |- 101 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 102 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/word/01-basics/basic-api-call.yaml: -------------------------------------------------------------------------------- 1 | order: 1 2 | id: word-basics-basic-api-call 3 | name: Basic API call (TypeScript) 4 | description: Performs a basic Word API call using TypeScript. 5 | author: OfficeDev 6 | host: WORD 7 | api_set: 8 | WordApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 12 | 13 | async function run() { 14 | // Gets the current selection and changes the font color to red. 15 | await Word.run(async (context) => { 16 | const range: Word.Range = context.document.getSelection(); 17 | range.font.color = "red"; 18 | range.load("text"); 19 | 20 | await context.sync(); 21 | 22 | console.log(`The selected text was "${range.text}".`); 23 | }); 24 | } 25 | 26 | // Default helper for invoking an action and handling errors. 27 | async function tryCatch(callback) { 28 | try { 29 | await callback(); 30 | } 31 | catch (error) { 32 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 33 | console.error(error); 34 | } 35 | } 36 | language: typescript 37 | template: 38 | content: |- 39 |
40 | This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection". 41 |
42 | 43 | language: html 44 | style: 45 | content: |- 46 | body { 47 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 48 | font-size: 14px; 49 | line-height: 1.5; 50 | padding: 10px; 51 | } 52 | 53 | section { 54 | margin-bottom: 20px; 55 | } 56 | 57 | h3 { 58 | margin-top: 0; 59 | margin-bottom: 10px; 60 | font-size: 16px; 61 | } 62 | 63 | p { 64 | margin: 0 0 10px 0; 65 | } 66 | 67 | button { 68 | background-color: #f0f0f0; 69 | color: #333333; 70 | border: 1px solid #8a8a8a; 71 | padding: 8px 16px; 72 | font-size: 14px; 73 | cursor: pointer; 74 | border-radius: 2px; 75 | margin-left: 20px; 76 | margin-bottom: 5px; 77 | min-width: 80px; 78 | display: block; 79 | } 80 | 81 | button:hover { 82 | background-color: #e0e0e0; 83 | } 84 | 85 | button:active { 86 | background-color: #d0d0d0; 87 | } 88 | 89 | input { 90 | padding: 8px; 91 | margin: 5px 0; 92 | border: 1px solid #ccc; 93 | border-radius: 2px; 94 | font-size: 14px; 95 | } 96 | 97 | .header { 98 | text-align: center; 99 | background-color: #f3f2f1; 100 | padding: 10px; 101 | } 102 | language: css 103 | libraries: |- 104 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 105 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/16-custom-functions/custom-enum.yaml: -------------------------------------------------------------------------------- 1 | order: 7 2 | id: excel-custom-functions-custom-enum 3 | name: Function with custom enums 4 | description: Use custom enums as parameters in a custom function that searches for flights. 5 | host: EXCEL 6 | api_set: 7 | CustomFunctionsRuntime: 1.5 8 | script: 9 | content: | 10 | /** 11 | * A custom enum representing different airports. 12 | * @customenum {string} 13 | */ 14 | enum Airports { 15 | // Beijing is the capital of China. 16 | Beijing = "PEK", 17 | 18 | // Shanghai is a major financial hub in China. 19 | Shanghai = "PVG", 20 | 21 | // Seattle is known for its tech industry and the Space Needle. 22 | Seattle = "SEA", 23 | 24 | // San Francisco is famous for the Golden Gate Bridge and tech startups. 25 | SanFrancisco = "SFO", 26 | 27 | // Tokyo is the capital of Japan and known for its modern architecture and culture. 28 | Tokyo = "HND" 29 | } 30 | 31 | /** 32 | * A custom enum representing the days of the week. 33 | * @customenum {number} 34 | */ 35 | enum DayOfWeek { 36 | Monday = 1, 37 | Tuesday = 2, 38 | Wednesday = 3, 39 | Thursday = 4, 40 | Friday = 5, 41 | Saturday = 6, 42 | Sunday = 7 43 | } 44 | 45 | /** 46 | * A function that shows how to use custom enums to get a flight schedule. 47 | * @customfunction 48 | * @param {Airports} departure Where the flight departs. 49 | * @param {Airports} destination Where the flight arrives. 50 | * @param {DayOfWeek[]} day Days of the week when the flight is available. 51 | * @returns The available flight schedule. 52 | */ 53 | function fetchFlightSchedule(departure: Airports, destination: Airports, day: DayOfWeek[]): string[][] { 54 | const flights: string[][] = []; 55 | 56 | // Use the `Airports` enum for both the `departure` and `destination` parameters. 57 | flights.push(["Flights from " + departure + " to " + destination, "", "", "", ""]); 58 | 59 | flights.push(["Day", "Flight Number", "Departure Time", "Arrival Time", "Price"]); 60 | const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; 61 | 62 | day.forEach((d) => { 63 | const dayName = daysOfWeek[d - 1]; 64 | const numberOfFlights = Math.floor(Math.random() * 3) + 1; // 1 to 3 flights 65 | 66 | for (let i = 0; i < numberOfFlights; i++) { 67 | const flightNumber = `AA${Math.floor(Math.random() * 900) + 100}`; 68 | const departureTime = `${Math.floor(Math.random() * 12) + 1}:00 ${Math.random() > 0.5 ? "AM" : "PM"}`; 69 | const arrivalTime = `${Math.floor(Math.random() * 12) + 1}:00 ${Math.random() > 0.5 ? "AM" : "PM"}`; 70 | const price = `$${Math.floor(Math.random() * 500) + 100}`; 71 | 72 | flights.push([dayName, flightNumber, departureTime, arrivalTime, price]); 73 | } 74 | }); 75 | 76 | return flights; 77 | } 78 | language: typescript 79 | libraries: | 80 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 81 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts 82 | -------------------------------------------------------------------------------- /samples/word/01-basics/basic-api-call-es5.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: word-basics-api-call-es5 3 | name: Basic API call (JavaScript) 4 | description: Performs a basic Word API call using plain JavaScript & Promises. 5 | author: OfficeDev 6 | host: WORD 7 | api_set: 8 | WordApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 12 | 13 | function run() { 14 | return Word.run(function (context) { 15 | var range = context.document.getSelection(); 16 | range.font.color = "red"; 17 | range.load("text"); 18 | 19 | return context.sync() 20 | .then(function() { 21 | console.log("The selected text was \"" + range.text + "\"."); 22 | }); 23 | }); 24 | } 25 | 26 | // Default helper for invoking an action and handling errors. 27 | function tryCatch(callback) { 28 | Promise.resolve() 29 | .then(callback) 30 | .catch(function (error) { 31 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 32 | console.error(error); 33 | }); 34 | } 35 | language: typescript 36 | template: 37 | content: |- 38 |
39 | This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection". 40 |
41 | 42 | language: html 43 | style: 44 | content: |- 45 | body { 46 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 47 | font-size: 14px; 48 | line-height: 1.5; 49 | padding: 10px; 50 | } 51 | 52 | section { 53 | margin-bottom: 20px; 54 | } 55 | 56 | h3 { 57 | margin-top: 0; 58 | margin-bottom: 10px; 59 | font-size: 16px; 60 | } 61 | 62 | p { 63 | margin: 0 0 10px 0; 64 | } 65 | 66 | button { 67 | background-color: #f0f0f0; 68 | color: #333333; 69 | border: 1px solid #8a8a8a; 70 | padding: 8px 16px; 71 | font-size: 14px; 72 | cursor: pointer; 73 | border-radius: 2px; 74 | margin-left: 20px; 75 | margin-bottom: 5px; 76 | min-width: 80px; 77 | display: block; 78 | } 79 | 80 | button:hover { 81 | background-color: #e0e0e0; 82 | } 83 | 84 | button:active { 85 | background-color: #d0d0d0; 86 | } 87 | 88 | input { 89 | padding: 8px; 90 | margin: 5px 0; 91 | border: 1px solid #ccc; 92 | border-radius: 2px; 93 | font-size: 14px; 94 | } 95 | 96 | .header { 97 | text-align: center; 98 | background-color: #f3f2f1; 99 | padding: 10px; 100 | } 101 | language: css 102 | libraries: |- 103 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 104 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/word/99-preview-apis/close-document-window.yaml: -------------------------------------------------------------------------------- 1 | id: word-close-document-window 2 | name: Close document window 3 | description: Shows how to close document window. 4 | host: WORD 5 | api_set: 6 | WordApi: '1.10' 7 | script: 8 | content: | 9 | document.getElementById("close-with-save-prompt").addEventListener("click", () => tryCatch(closeWithSavePrompt)); 10 | 11 | async function closeWithSavePrompt() { 12 | await Word.run(async (context) => { 13 | // Closes the document window, prompting to save if this is a new document. 14 | const window: Word.Window = context.document.activeWindow; 15 | const closeOptions: Word.WindowCloseOptions = { saveChanges: Word.SaveConfiguration.promptToSaveChanges }; 16 | console.log("About to close the document window..."); 17 | window.close(closeOptions); 18 | }); 19 | } 20 | 21 | // Default helper for invoking an action and handling errors. 22 | async function tryCatch(callback) { 23 | try { 24 | await callback(); 25 | } catch (error) { 26 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 27 | console.error(error); 28 | } 29 | } 30 | language: typescript 31 | template: 32 | content: |- 33 |
34 | This sample demonstrates how to close the document window. 35 |
36 |
37 |

Try it out

38 | 39 |
40 | language: html 41 | style: 42 | content: |- 43 | body { 44 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 45 | font-size: 14px; 46 | line-height: 1.5; 47 | padding: 10px; 48 | } 49 | 50 | section { 51 | margin-bottom: 20px; 52 | } 53 | 54 | h3 { 55 | margin-top: 0; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | } 59 | 60 | p { 61 | margin: 0 0 10px 0; 62 | } 63 | 64 | button { 65 | background-color: #f0f0f0; 66 | color: #333333; 67 | border: 1px solid #8a8a8a; 68 | padding: 8px 16px; 69 | font-size: 14px; 70 | cursor: pointer; 71 | border-radius: 2px; 72 | margin-left: 20px; 73 | margin-bottom: 5px; 74 | min-width: 80px; 75 | display: block; 76 | } 77 | 78 | button:hover { 79 | background-color: #e0e0e0; 80 | } 81 | 82 | button:active { 83 | background-color: #d0d0d0; 84 | } 85 | 86 | input { 87 | padding: 8px; 88 | margin: 5px 0; 89 | border: 1px solid #ccc; 90 | border-radius: 2px; 91 | font-size: 14px; 92 | } 93 | 94 | .header { 95 | text-align: center; 96 | background-color: #f3f2f1; 97 | padding: 10px; 98 | } 99 | language: css 100 | libraries: |- 101 | https://appsforoffice.microsoft.com/lib/beta/hosted/office.js 102 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/25-item-save-and-close/close-async.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: outlook-close-async 3 | name: Close the current message and discard changes (Message Compose) 4 | description: Closes the current message and discards any unsaved changes when specified. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.14' 8 | script: 9 | content: |- 10 | document.getElementById("close-async").addEventListener("click", closeAsync); 11 | 12 | function closeAsync() { 13 | // This snippet closes the current message being composed and discards any unsaved changes when the optional property, discardItem, is set to true. 14 | // The API call works on a new message being composed, a reply, or an existing draft. 15 | // When discardItem is set to false or isn't defined on a new message with unsaved changes, the user is prompted to save a draft, discard the changes, or cancel the close operation. 16 | Office.context.mailbox.item.closeAsync( 17 | { discardItem: true }, 18 | (asyncResult) => { 19 | if (asyncResult.status === Office.AsyncResultStatus.Failed) { 20 | console.log("Action failed with error: " + asyncResult.error.message); 21 | return; 22 | } 23 | }); 24 | } 25 | language: typescript 26 | template: 27 | content: |- 28 |
29 |

This sample shows how to close the current message being composed and discard any unsaved changes.

30 |

Required mode: Message Compose

31 |
32 |
33 |

Try it out

34 | 35 |
36 | language: html 37 | style: 38 | content: |- 39 | body { 40 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 41 | font-size: 14px; 42 | line-height: 1.5; 43 | padding: 10px; 44 | } 45 | 46 | section { 47 | margin-bottom: 20px; 48 | } 49 | 50 | h3 { 51 | margin-top: 0; 52 | margin-bottom: 10px; 53 | font-size: 16px; 54 | } 55 | 56 | p { 57 | margin: 0 0 10px 0; 58 | } 59 | 60 | button { 61 | background-color: #f0f0f0; 62 | color: #333333; 63 | border: 1px solid #8a8a8a; 64 | padding: 8px 16px; 65 | font-size: 14px; 66 | cursor: pointer; 67 | border-radius: 2px; 68 | margin-left: 20px; 69 | margin-bottom: 5px; 70 | min-width: 80px; 71 | display: block; 72 | } 73 | 74 | button:hover { 75 | background-color: #e0e0e0; 76 | } 77 | 78 | button:active { 79 | background-color: #d0d0d0; 80 | } 81 | 82 | input { 83 | padding: 8px; 84 | margin: 5px 0; 85 | border: 1px solid #ccc; 86 | border-radius: 2px; 87 | font-size: 14px; 88 | } 89 | 90 | .header { 91 | text-align: center; 92 | background-color: #f3f2f1; 93 | padding: 10px; 94 | } 95 | language: css 96 | libraries: |- 97 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 98 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-end-read.yaml: -------------------------------------------------------------------------------- 1 | order: 9 2 | id: outlook-other-item-apis-get-end-read 3 | name: Get the end date and time (Read) 4 | description: Gets the end date and time of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-utc").addEventListener("click", getUtc); 11 | document.getElementById("get-local").addEventListener("click", getLocal); 12 | 13 | function getUtc() { 14 | const time = Office.context.mailbox.item.end; 15 | console.log(`Appointment ends (UTC): ${time.toUTCString()}`); 16 | } 17 | 18 | function getLocal() { 19 | const time = Office.context.mailbox.item.end; 20 | const localTime = Office.context.mailbox.convertToLocalClientTime(time); 21 | console.log(`Appointment ends (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`); 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the end date and time of an item in Read mode.

28 |

Required modes: Appointment Attendee, Message Read (meeting request)

29 |
30 |
31 |

Try it out

32 | 35 | 38 |
39 | language: html 40 | style: 41 | content: |- 42 | body { 43 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 44 | font-size: 14px; 45 | line-height: 1.5; 46 | padding: 10px; 47 | } 48 | 49 | section { 50 | margin-bottom: 20px; 51 | } 52 | 53 | h3 { 54 | margin-top: 0; 55 | margin-bottom: 10px; 56 | font-size: 16px; 57 | } 58 | 59 | p { 60 | margin: 0 0 10px 0; 61 | } 62 | 63 | button { 64 | background-color: #f0f0f0; 65 | color: #333333; 66 | border: 1px solid #8a8a8a; 67 | padding: 8px 16px; 68 | font-size: 14px; 69 | cursor: pointer; 70 | border-radius: 2px; 71 | margin-left: 20px; 72 | margin-bottom: 5px; 73 | min-width: 80px; 74 | display: block; 75 | } 76 | 77 | button:hover { 78 | background-color: #e0e0e0; 79 | } 80 | 81 | button:active { 82 | background-color: #d0d0d0; 83 | } 84 | 85 | input { 86 | padding: 8px; 87 | margin: 5px 0; 88 | border: 1px solid #ccc; 89 | border-radius: 2px; 90 | font-size: 14px; 91 | } 92 | 93 | .header { 94 | text-align: center; 95 | background-color: #f3f2f1; 96 | padding: 10px; 97 | } 98 | language: css 99 | libraries: |- 100 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 101 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: outlook-tokens-and-service-calls-user-identity-token 3 | name: Get a user identity token in Exchange on-premises environments 4 | description: Gets a user identity token for authentication flows in an Exchange on-premises environment. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", run); 11 | 12 | function run() { 13 | Office.context.mailbox.getUserIdentityTokenAsync((result) => { 14 | if (result.status === Office.AsyncResultStatus.Failed) { 15 | console.error(`Token retrieval failed with message: ${result.error.message}`) 16 | return; 17 | } 18 | 19 | console.log(result.value); 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get a user identity token to use in authentication flows.

27 |

Important: This API is only supported in Exchange on-premises environments. 28 | In Exchange Online environments, use nested app authentication (NAA) 29 | to get an access token. 30 |

31 |
32 |
33 |

Try it out

34 | 37 |
38 | language: html 39 | style: 40 | content: |- 41 | body { 42 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 43 | font-size: 14px; 44 | line-height: 1.5; 45 | padding: 10px; 46 | } 47 | 48 | section { 49 | margin-bottom: 20px; 50 | } 51 | 52 | h3 { 53 | margin-top: 0; 54 | margin-bottom: 10px; 55 | font-size: 16px; 56 | } 57 | 58 | p { 59 | margin: 0 0 10px 0; 60 | } 61 | 62 | button { 63 | background-color: #f0f0f0; 64 | color: #333333; 65 | border: 1px solid #8a8a8a; 66 | padding: 8px 16px; 67 | font-size: 14px; 68 | cursor: pointer; 69 | border-radius: 2px; 70 | margin-left: 20px; 71 | margin-bottom: 5px; 72 | min-width: 80px; 73 | display: block; 74 | } 75 | 76 | button:hover { 77 | background-color: #e0e0e0; 78 | } 79 | 80 | button:active { 81 | background-color: #d0d0d0; 82 | } 83 | 84 | input { 85 | padding: 8px; 86 | margin: 5px 0; 87 | border: 1px solid #ccc; 88 | border-radius: 2px; 89 | font-size: 14px; 90 | } 91 | 92 | .header { 93 | text-align: center; 94 | background-color: #f3f2f1; 95 | padding: 10px; 96 | } 97 | language: css 98 | libraries: |- 99 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 100 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-start-read.yaml: -------------------------------------------------------------------------------- 1 | order: 7 2 | id: outlook-other-item-apis-get-start-read 3 | name: Get the start date and time (Read) 4 | description: Gets the start date and time of an item in Read mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get-utc").addEventListener("click", getUtc); 11 | document.getElementById("get-local").addEventListener("click", getLocal); 12 | 13 | function getUtc() { 14 | const time = Office.context.mailbox.item.start; 15 | console.log(`Appointment starts (UTC): ${time.toUTCString()}`); 16 | } 17 | 18 | function getLocal() { 19 | const time = Office.context.mailbox.item.start; 20 | const localTime = Office.context.mailbox.convertToLocalClientTime(time); 21 | console.log(`Appointment starts (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`); 22 | } 23 | language: typescript 24 | template: 25 | content: |- 26 |
27 |

This sample shows how to get the start date and time of an item in Read mode.

28 |

Required modes: Appointment Attendee, Message Read (meeting request)

29 |
30 |
31 |

Try it out

32 | 35 | 38 |
39 | language: html 40 | style: 41 | content: |- 42 | body { 43 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 44 | font-size: 14px; 45 | line-height: 1.5; 46 | padding: 10px; 47 | } 48 | 49 | section { 50 | margin-bottom: 20px; 51 | } 52 | 53 | h3 { 54 | margin-top: 0; 55 | margin-bottom: 10px; 56 | font-size: 16px; 57 | } 58 | 59 | p { 60 | margin: 0 0 10px 0; 61 | } 62 | 63 | button { 64 | background-color: #f0f0f0; 65 | color: #333333; 66 | border: 1px solid #8a8a8a; 67 | padding: 8px 16px; 68 | font-size: 14px; 69 | cursor: pointer; 70 | border-radius: 2px; 71 | margin-left: 20px; 72 | margin-bottom: 5px; 73 | min-width: 80px; 74 | display: block; 75 | } 76 | 77 | button:hover { 78 | background-color: #e0e0e0; 79 | } 80 | 81 | button:active { 82 | background-color: #d0d0d0; 83 | } 84 | 85 | input { 86 | padding: 8px; 87 | margin: 5px 0; 88 | border: 1px solid #ccc; 89 | border-radius: 2px; 90 | font-size: 14px; 91 | } 92 | 93 | .header { 94 | text-align: center; 95 | background-color: #f3f2f1; 96 | padding: 10px; 97 | } 98 | language: css 99 | libraries: |- 100 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 101 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /config/status.ts: -------------------------------------------------------------------------------- 1 | import chalk from 'chalk'; 2 | import { isString, isNil, isArray } from 'lodash'; 3 | 4 | interface IStage { 5 | steps: any[]; 6 | count: number; 7 | doneStep: (completed: boolean, message?: string) => void; 8 | } 9 | 10 | export class Status { 11 | stages: IStage; 12 | steps: { [step: string]: boolean } = {}; 13 | 14 | get console() { 15 | // Return the global console object methods 16 | return { 17 | log: global.console.log.bind(global.console), 18 | error: global.console.error.bind(global.console), 19 | warn: global.console.warn.bind(global.console), 20 | info: global.console.info.bind(global.console) 21 | }; 22 | } 23 | 24 | constructor() { 25 | /* Initialize the simple status system */ 26 | this.stages = { 27 | steps: [], 28 | count: 0, 29 | doneStep: this.doneStep.bind(this) 30 | }; 31 | } 32 | 33 | private doneStep(completed: boolean, message?: string): void { 34 | const symbol = completed ? chalk.green('✓') : chalk.red('✗'); 35 | if (message) { 36 | global.console.log(`${symbol} ${message}`); 37 | } 38 | } 39 | 40 | /** 41 | * Update the status stage 42 | * @param error Error object. 43 | */ 44 | complete(success: boolean, stage: string, additionalDetails?: string | Error | Array) { 45 | if (!isArray(additionalDetails)) { 46 | additionalDetails = [additionalDetails]; 47 | } 48 | 49 | success = success && additionalDetails.findIndex(item => item instanceof Error) < 0; 50 | 51 | const messageArray = getDetailsArray(); 52 | const symbol = success ? chalk.green('✓') : chalk.red('✗'); 53 | 54 | // Log the completion with symbol 55 | global.console.log(`${symbol} ${stage}`); 56 | 57 | if (messageArray.length > 0) { 58 | messageArray.forEach(msg => { 59 | global.console.log(` * ${msg}`); 60 | }); 61 | } 62 | 63 | this.steps[stage] = false; 64 | 65 | // Helper: 66 | function getDetailsArray() { 67 | return (additionalDetails as any[]) 68 | .map(item => { 69 | if (isNil(item)) { 70 | return null; 71 | } 72 | 73 | if (isString(item)) { 74 | return item; 75 | } 76 | 77 | let stringified = item.message || item.toString(); 78 | if (stringified === '[object Object]') { 79 | stringified = JSON.stringify(item); 80 | } 81 | 82 | if (item instanceof Error) { 83 | return chalk.bold.red(stringified); 84 | } else { 85 | return stringified; 86 | } 87 | }) 88 | .filter(item => !isNil(item)); 89 | } 90 | } 91 | 92 | /** 93 | * Add a new stage and mark it as started. 94 | * @param stage Name of the stage. 95 | */ 96 | add(stage: string) { 97 | this.stages.steps.push(stage); 98 | this.steps[stage] = true; 99 | global.console.log(chalk.cyan(`○ ${stage}`)); 100 | } 101 | } 102 | 103 | export const status = new Status(); 104 | export const console = status.console; 105 | -------------------------------------------------------------------------------- /view/powerpoint.json: -------------------------------------------------------------------------------- 1 | { 2 | "powerpoint-basics-basic-api-call-ts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/basics/basic-api-call-ts.yaml", 3 | "powerpoint-basics-basic-api-call-js": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/basics/basic-api-call-js.yaml", 4 | "powerpoint-basics-basic-common-api-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/basics/basic-common-api-call.yaml", 5 | "powerpoint-create-presentation": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/document/create-presentation.yaml", 6 | "powerpoint-hyperlinks-manage-hyperlinks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml", 7 | "powerpoint-basics-insert-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/images/insert-image.yaml", 8 | "powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/images/insert-svg.yaml", 9 | "powerpoint-basics-presentation-get-active-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/preview-apis/presentation-get-active-slide.yaml", 10 | "powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/scenarios/searches-wikipedia-api.yaml", 11 | "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml", 12 | "powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-set-shapes.yaml", 13 | "powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml", 14 | "powerpoint-shapes-add-modify-tables": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/add-modify-tables.yaml", 15 | "powerpoint-shapes-binding-to-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/binding-to-shapes.yaml", 16 | "powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/group-ungroup-shapes.yaml", 17 | "powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/add-slides.yaml", 18 | "powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/insert-slides.yaml", 19 | "powerpoint-basics-get-slide-metadata": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/get-slide-metadata.yaml", 20 | "powerpoint-slide-management-get-set-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/get-set-slides.yaml", 21 | "powerpoint-slide-management-export-import-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/export-import-slide.yaml", 22 | "powerpoint-tags": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/tags/tags.yaml", 23 | "powerpoint-text-get-set-textrange": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/text/get-set-textrange.yaml" 24 | } -------------------------------------------------------------------------------- /view-prod/powerpoint.json: -------------------------------------------------------------------------------- 1 | { 2 | "powerpoint-basics-basic-api-call-ts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/basics/basic-api-call-ts.yaml", 3 | "powerpoint-basics-basic-api-call-js": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/basics/basic-api-call-js.yaml", 4 | "powerpoint-basics-basic-common-api-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/basics/basic-common-api-call.yaml", 5 | "powerpoint-create-presentation": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/document/create-presentation.yaml", 6 | "powerpoint-hyperlinks-manage-hyperlinks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml", 7 | "powerpoint-basics-insert-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/images/insert-image.yaml", 8 | "powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/images/insert-svg.yaml", 9 | "powerpoint-basics-presentation-get-active-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/preview-apis/presentation-get-active-slide.yaml", 10 | "powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/scenarios/searches-wikipedia-api.yaml", 11 | "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml", 12 | "powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml", 13 | "powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml", 14 | "powerpoint-shapes-add-modify-tables": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml", 15 | "powerpoint-shapes-binding-to-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml", 16 | "powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml", 17 | "powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml", 18 | "powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml", 19 | "powerpoint-basics-get-slide-metadata": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-slide-metadata.yaml", 20 | "powerpoint-slide-management-get-set-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml", 21 | "powerpoint-slide-management-export-import-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml", 22 | "powerpoint-tags": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml", 23 | "powerpoint-text-get-set-textrange": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml" 24 | } -------------------------------------------------------------------------------- /samples/powerpoint/basics/basic-api-call-js.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: powerpoint-basics-basic-api-call-js 3 | name: Basic API call (JavaScript) 4 | description: Performs a basic PowerPoint API call using JavaScript. 5 | host: POWERPOINT 6 | api_set: 7 | PowerPointApi: '1.4' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", () => tryCatch(run)); 11 | 12 | function run() { 13 | // This function gets the collection of shapes on the first slide, 14 | // and adds a text box to the collection, while specifying its text, 15 | // location, and size. Then it names the text box. 16 | return PowerPoint.run(function(context) { 17 | const shapes = context.presentation.slides.getItemAt(0).shapes; 18 | const textbox = shapes.addTextBox("Hello!", { 19 | left: 100, 20 | top: 300, 21 | height: 300, 22 | width: 450 23 | }); 24 | textbox.name = "Textbox"; 25 | 26 | return context.sync(); 27 | }); 28 | } 29 | 30 | /** Default helper for invoking an action and handling errors. */ 31 | async function tryCatch(callback) { 32 | try { 33 | await callback(); 34 | } catch (error) { 35 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 36 | console.error(error); 37 | } 38 | } 39 | language: typescript 40 | template: 41 | content: |- 42 |
43 | This sample executes a code snippet that adds a text box to the first slide in the presentation. 44 |
45 | 46 | language: html 47 | style: 48 | content: |- 49 | body { 50 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 51 | font-size: 14px; 52 | line-height: 1.5; 53 | padding: 10px; 54 | } 55 | 56 | section { 57 | margin-bottom: 20px; 58 | } 59 | 60 | h3 { 61 | margin-top: 0; 62 | margin-bottom: 10px; 63 | font-size: 16px; 64 | } 65 | 66 | p { 67 | margin: 0 0 10px 0; 68 | } 69 | 70 | button { 71 | background-color: #f0f0f0; 72 | color: #333333; 73 | border: 1px solid #8a8a8a; 74 | padding: 8px 16px; 75 | font-size: 14px; 76 | cursor: pointer; 77 | border-radius: 2px; 78 | margin-left: 20px; 79 | margin-bottom: 5px; 80 | min-width: 80px; 81 | display: block; 82 | } 83 | 84 | button:hover { 85 | background-color: #e0e0e0; 86 | } 87 | 88 | button:active { 89 | background-color: #d0d0d0; 90 | } 91 | 92 | input { 93 | padding: 8px; 94 | margin: 5px 0; 95 | border: 1px solid #ccc; 96 | border-radius: 2px; 97 | font-size: 14px; 98 | } 99 | 100 | .header { 101 | text-align: center; 102 | background-color: #f3f2f1; 103 | padding: 10px; 104 | } 105 | language: css 106 | libraries: |- 107 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 108 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml: -------------------------------------------------------------------------------- 1 | order: 4 2 | id: outlook-tokens-and-service-calls-user-callback-token 3 | name: Get a callback token in Exchange on-premises environments 4 | description: Gets a callback token to call Outlook services from an add-in's backend service in an Exchange on-premises environment. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("run").addEventListener("click", run); 11 | 12 | function run() { 13 | Office.context.mailbox.getCallbackTokenAsync((result) => { 14 | if (result.status === Office.AsyncResultStatus.Failed) { 15 | console.error(`Token retrieval failed with message: ${result.error.message}`); 16 | return; 17 | } 18 | 19 | console.log(result.value); 20 | }); 21 | } 22 | language: typescript 23 | template: 24 | content: |- 25 |
26 |

This sample shows how to get a callback token to call Outlook services from an add-in's backend service.

27 |

Important: Exchange user identity and callback tokens are only supported in Exchange on-premises environments. 28 | Additionally, the Outlook REST v2.0 endpoint has been deprecated. Use 29 | nested app authentication (NAA) 30 | to get an access token instead. 31 |

32 |
33 |
34 |

Try it out

35 | 38 |
39 | language: html 40 | style: 41 | content: |- 42 | body { 43 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 44 | font-size: 14px; 45 | line-height: 1.5; 46 | padding: 10px; 47 | } 48 | 49 | section { 50 | margin-bottom: 20px; 51 | } 52 | 53 | h3 { 54 | margin-top: 0; 55 | margin-bottom: 10px; 56 | font-size: 16px; 57 | } 58 | 59 | p { 60 | margin: 0 0 10px 0; 61 | } 62 | 63 | button { 64 | background-color: #f0f0f0; 65 | color: #333333; 66 | border: 1px solid #8a8a8a; 67 | padding: 8px 16px; 68 | font-size: 14px; 69 | cursor: pointer; 70 | border-radius: 2px; 71 | margin-left: 20px; 72 | margin-bottom: 5px; 73 | min-width: 80px; 74 | display: block; 75 | } 76 | 77 | button:hover { 78 | background-color: #e0e0e0; 79 | } 80 | 81 | button:active { 82 | background-color: #d0d0d0; 83 | } 84 | 85 | input { 86 | padding: 8px; 87 | margin: 5px 0; 88 | border: 1px solid #ccc; 89 | border-radius: 2px; 90 | font-size: 14px; 91 | } 92 | 93 | .header { 94 | text-align: center; 95 | background-color: #f3f2f1; 96 | padding: 10px; 97 | } 98 | language: css 99 | libraries: |- 100 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 101 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-set-subject-compose.yaml: -------------------------------------------------------------------------------- 1 | order: 2 2 | id: outlook-other-item-apis-get-set-subject-compose 3 | name: Get and set the subject (Compose) 4 | description: Gets and sets the subject of an item in Compose mode. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.1' 8 | script: 9 | content: |- 10 | document.getElementById("get").addEventListener("click", get); 11 | document.getElementById("set").addEventListener("click", set); 12 | 13 | function get() { 14 | Office.context.mailbox.item.subject.getAsync((result) => { 15 | if (result.status !== Office.AsyncResultStatus.Succeeded) { 16 | console.error(`Action failed with message ${result.error.message}`); 17 | return; 18 | } 19 | console.log(`Subject: ${result.value}`); 20 | }); 21 | } 22 | 23 | function set() { 24 | let subject = "Hello World!"; 25 | Office.context.mailbox.item.subject.setAsync(subject, (result) => { 26 | if (result.status !== Office.AsyncResultStatus.Succeeded) { 27 | console.error(`Action failed with message ${result.error.message}`); 28 | return; 29 | } 30 | console.log(`Successfully set subject to ${subject}`); 31 | }); 32 | } 33 | language: typescript 34 | template: 35 | content: |- 36 |
37 |

This sample shows how to set and get the subject of an item in Compose mode.

38 |

Required mode: Compose

39 |
40 |
41 |

Try it out

42 | 45 | 48 |
49 | language: html 50 | style: 51 | content: |- 52 | body { 53 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 54 | font-size: 14px; 55 | line-height: 1.5; 56 | padding: 10px; 57 | } 58 | 59 | section { 60 | margin-bottom: 20px; 61 | } 62 | 63 | h3 { 64 | margin-top: 0; 65 | margin-bottom: 10px; 66 | font-size: 16px; 67 | } 68 | 69 | p { 70 | margin: 0 0 10px 0; 71 | } 72 | 73 | button { 74 | background-color: #f0f0f0; 75 | color: #333333; 76 | border: 1px solid #8a8a8a; 77 | padding: 8px 16px; 78 | font-size: 14px; 79 | cursor: pointer; 80 | border-radius: 2px; 81 | margin-left: 20px; 82 | margin-bottom: 5px; 83 | min-width: 80px; 84 | display: block; 85 | } 86 | 87 | button:hover { 88 | background-color: #e0e0e0; 89 | } 90 | 91 | button:active { 92 | background-color: #d0d0d0; 93 | } 94 | 95 | input { 96 | padding: 8px; 97 | margin: 5px 0; 98 | border: 1px solid #ccc; 99 | border-radius: 2px; 100 | font-size: 14px; 101 | } 102 | 103 | .header { 104 | text-align: center; 105 | background-color: #f3f2f1; 106 | padding: 10px; 107 | } 108 | language: css 109 | libraries: |- 110 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 111 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/90-other-item-apis/get-conversation-index.yaml: -------------------------------------------------------------------------------- 1 | order: 27 2 | id: outlook-get-conversation-index 3 | name: Get the position of a message in a conversation (Message Compose) 4 | description: Retrieves the Base64-encoded position of the current message in a conversation thread. 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.14' 8 | script: 9 | content: |- 10 | document.getElementById("get-conversation-index").addEventListener("click", getConversationIndex); 11 | 12 | function getConversationIndex() { 13 | // This snippet returns the Base64-encoded position of the current message in a conversation thread (PR_CONVERSATION_INDEX). 14 | // The API call is supported on a message being composed and isn't supported on read items or appointments. 15 | Office.context.mailbox.item.getConversationIndexAsync((result) => { 16 | if (result.status === Office.AsyncResultStatus.Failed) { 17 | console.log(result.error.message); 18 | return; 19 | } 20 | 21 | const conversationIndex = result.value; 22 | if (conversationIndex) { 23 | console.log("Position in the conversation thread: " + conversationIndex); 24 | } else { 25 | console.log("The current message doesn't belong to a conversation thread."); 26 | } 27 | }); 28 | } 29 | language: typescript 30 | template: 31 | content: |- 32 |
33 |

This sample shows how to get the Base64-encoded position of the current message in a conversation thread.

34 |

Required mode: Message Compose

35 |
36 |
37 |

Try it out

38 | 39 |
40 | language: html 41 | style: 42 | content: |- 43 | body { 44 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 45 | font-size: 14px; 46 | line-height: 1.5; 47 | padding: 10px; 48 | } 49 | 50 | section { 51 | margin-bottom: 20px; 52 | } 53 | 54 | h3 { 55 | margin-top: 0; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | } 59 | 60 | p { 61 | margin: 0 0 10px 0; 62 | } 63 | 64 | button { 65 | background-color: #f0f0f0; 66 | color: #333333; 67 | border: 1px solid #8a8a8a; 68 | padding: 8px 16px; 69 | font-size: 14px; 70 | cursor: pointer; 71 | border-radius: 2px; 72 | margin-left: 20px; 73 | margin-bottom: 5px; 74 | min-width: 80px; 75 | display: block; 76 | } 77 | 78 | button:hover { 79 | background-color: #e0e0e0; 80 | } 81 | 82 | button:active { 83 | background-color: #d0d0d0; 84 | } 85 | 86 | input { 87 | padding: 8px; 88 | margin: 5px 0; 89 | border: 1px solid #ccc; 90 | border-radius: 2px; 91 | font-size: 14px; 92 | } 93 | 94 | .header { 95 | text-align: center; 96 | background-color: #f3f2f1; 97 | padding: 10px; 98 | } 99 | language: css 100 | libraries: |- 101 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 102 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/excel/54-worksheet/list-worksheets.yaml: -------------------------------------------------------------------------------- 1 | order: 9 2 | id: excel-worksheet-list-worksheets 3 | name: List worksheets 4 | description: Lists the worksheets in the workbook. 5 | author: OfficeDev 6 | host: EXCEL 7 | api_set: 8 | ExcelApi: '1.1' 9 | script: 10 | content: |- 11 | document.getElementById("list-worksheets").addEventListener("click", () => tryCatch(listWorksheets)); 12 | 13 | async function listWorksheets() { 14 | await Excel.run(async (context) => { 15 | const sheets = context.workbook.worksheets; 16 | sheets.load("items/name"); 17 | 18 | await context.sync(); 19 | 20 | if (sheets.items.length > 1) { 21 | console.log(`There are ${sheets.items.length} worksheets in the workbook:`); 22 | } else { 23 | console.log(`There is one worksheet in the workbook:`); 24 | } 25 | for (let i in sheets.items) { 26 | console.log(sheets.items[i].name); 27 | } 28 | }); 29 | } 30 | 31 | /** Default helper for invoking an action and handling errors. */ 32 | async function tryCatch(callback) { 33 | try { 34 | await callback(); 35 | } 36 | catch (error) { 37 | // Note: In a production add-in, you'd want to notify the user through your add-in's UI. 38 | console.error(error); 39 | } 40 | } 41 | language: typescript 42 | template: 43 | content: |- 44 |
45 |

This sample shows how to list the names of the worksheets in the workbook.

46 |
47 |
48 |

Try it out

49 | 50 |
51 | language: html 52 | style: 53 | content: |- 54 | body { 55 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 56 | font-size: 14px; 57 | line-height: 1.5; 58 | padding: 10px; 59 | } 60 | 61 | section { 62 | margin-bottom: 20px; 63 | } 64 | 65 | h3 { 66 | margin-top: 0; 67 | margin-bottom: 10px; 68 | font-size: 16px; 69 | } 70 | 71 | p { 72 | margin: 0 0 10px 0; 73 | } 74 | 75 | button { 76 | background-color: #f0f0f0; 77 | color: #333333; 78 | border: 1px solid #8a8a8a; 79 | padding: 8px 16px; 80 | font-size: 14px; 81 | cursor: pointer; 82 | border-radius: 2px; 83 | margin-left: 20px; 84 | margin-bottom: 5px; 85 | min-width: 80px; 86 | display: block; 87 | } 88 | 89 | button:hover { 90 | background-color: #e0e0e0; 91 | } 92 | 93 | button:active { 94 | background-color: #d0d0d0; 95 | } 96 | 97 | input { 98 | padding: 8px; 99 | margin: 5px 0; 100 | border: 1px solid #ccc; 101 | border-radius: 2px; 102 | font-size: 14px; 103 | } 104 | 105 | .header { 106 | text-align: center; 107 | background-color: #f3f2f1; 108 | padding: 10px; 109 | } 110 | language: css 111 | libraries: |- 112 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 113 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts -------------------------------------------------------------------------------- /samples/outlook/55-display-items/display-existing-message.yaml: -------------------------------------------------------------------------------- 1 | order: 3 2 | id: outlook-display-items-display-existing-message 3 | name: Open a message 4 | description: Displays an existing message in a separate window 5 | host: OUTLOOK 6 | api_set: 7 | Mailbox: '1.9' 8 | script: 9 | content: |- 10 | // Pre-populate with current item ID. 11 | (document.getElementById("itemId") as HTMLInputElement).value = Office.context.mailbox.item.itemId; 12 | 13 | document.getElementById("run").addEventListener("click", run); 14 | document.getElementById("run-async").addEventListener("click", runAsync); 15 | 16 | function run() { 17 | const itemId = (document.getElementById("itemId") as HTMLInputElement).value; 18 | Office.context.mailbox.displayMessageForm(itemId); 19 | } 20 | 21 | function runAsync() { 22 | const itemId = (document.getElementById("itemId") as HTMLInputElement).value; 23 | 24 | // The async version will return error 9049 if the item is not found. 25 | // The async version is only available starting with requirement set 1.9. 26 | Office.context.mailbox.displayMessageFormAsync(itemId, function (asyncResult) { 27 | console.log("Result: " + JSON.stringify(asyncResult)); 28 | }); 29 | } 30 | language: typescript 31 | template: 32 | content: |- 33 |
34 |

This sample shows how to display an existing message in a separate window.

35 |
36 |
37 |

Try it out

38 | 39 | 40 | 43 | 46 |
47 | language: html 48 | style: 49 | content: |- 50 | body { 51 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 52 | font-size: 14px; 53 | line-height: 1.5; 54 | padding: 10px; 55 | } 56 | 57 | section { 58 | margin-bottom: 20px; 59 | } 60 | 61 | h3 { 62 | margin-top: 0; 63 | margin-bottom: 10px; 64 | font-size: 16px; 65 | } 66 | 67 | p { 68 | margin: 0 0 10px 0; 69 | } 70 | 71 | button { 72 | background-color: #f0f0f0; 73 | color: #333333; 74 | border: 1px solid #8a8a8a; 75 | padding: 8px 16px; 76 | font-size: 14px; 77 | cursor: pointer; 78 | border-radius: 2px; 79 | margin-left: 20px; 80 | margin-bottom: 5px; 81 | min-width: 80px; 82 | display: block; 83 | } 84 | 85 | button:hover { 86 | background-color: #e0e0e0; 87 | } 88 | 89 | button:active { 90 | background-color: #d0d0d0; 91 | } 92 | 93 | input { 94 | padding: 8px; 95 | margin: 5px 0; 96 | border: 1px solid #ccc; 97 | border-radius: 2px; 98 | font-size: 14px; 99 | } 100 | 101 | .header { 102 | text-align: center; 103 | background-color: #f3f2f1; 104 | padding: 10px; 105 | } 106 | language: css 107 | libraries: |- 108 | https://appsforoffice.microsoft.com/lib/1/hosted/office.js 109 | https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts --------------------------------------------------------------------------------