Skip to content

Commit

Permalink
Add keyboard shortcuts PnP (#99)
Browse files Browse the repository at this point in the history
* Add keyboard shortcuts PnP

* Update README.md dates

* Address PR comments

* Apply suggestions from code review

Co-authored-by: David Chesnut <davech@microsoft.com>

* Update Samples/excel-keyboard-shortcuts/README.md

Co-authored-by: David Chesnut <davech@microsoft.com>

Co-authored-by: David Chesnut <davech@microsoft.com>
  • Loading branch information
AbidRahman-MSFT and davidchesnut committed Nov 6, 2020
1 parent 67cfc1b commit 2b93c1a
Show file tree
Hide file tree
Showing 17 changed files with 10,796 additions and 0 deletions.
119 changes: 119 additions & 0 deletions Samples/excel-keyboard-shortcuts/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache
*lintrc.json

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# Stores VSCode user configurations
.vscode

# yarn v2

.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.pnp.*
83 changes: 83 additions & 0 deletions Samples/excel-keyboard-shortcuts/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
# Contribute to this code sample

Thank you for your interest in this sample! Your contributions and improvements will help the developer community.

## Ways to contribute

There are several ways you can contribute to this sample: providing better code comments, fixing open issues, and adding new features.

### Provide better code comments

Code comments make code samples even better by helping developers learn to use the code correctly in their own applications. If you spot a class, method, or section of code that you think could use better descriptions, then create a pull request with your code comments.


In general we want our code comments to follow these guidelines:

- Any code that has associated documentation displayed in an IDE (such as IntelliSense, or JavaDocs) has code comments.
- Classes, methods, parameters, and return values have clear descriptions.
- Exceptions and errors are documented.
- Remarks exist for anything special or notable about the code.
- Sections of code that have complex algorithms have appropriate comments describing what they do.
- Code added from Stack Overflow, or any other source, is clearly attributed.

### Fix open issues

Sometimes we get a lot of issues, and it can be hard to keep up. If you have a solution to an open issue that hasn't been addressed, fix the issue and then submit a pull request.

### Add a new feature

New features are great! Be sure to check with the repository admin first to be sure the feature will fit the intent of the sample. Start by opening an issue in the repository that proposes and describes the feature. The repository admin will respond and may ask for more information. If the admin agrees to the new feature, create the feature and submit a pull request.

## Contribution guidelines

We have some guidelines to help maintain a healthy repo and code for everyone.

### The Contribution License Agreement

For most contributions, you'll be asked to sign a Contribution License Agreement (CLA). This will happen when you submit a pull request. Microsoft will send a link to the CLA to sign via email. Once you sign the CLA, your pull request can proceed. Read the CLA carefully, because you may need to have your employer sign it.

### Code contribution checklist

Be sure to satisfy all of the requirements in the following list before submitting a pull request:

- Follow the code style that is appropriate for the platform and language in this repo. For example, Android code follows the style conventions found in the [Code Style for Contributors guide](https://source.android.com/source/code-style.html).
- Test your code.
- Test the UI thoroughly to be sure nothing has been broken by your change.
- Keep the size of your code change reasonable. if the repository owner cannot review your code change in 4 hours or less, your pull request may not be reviewed and approved quickly.
- Avoid unnecessary changes. The reviewer will check differences between your code and the original code. Whitespace changes are called out along with your code. Be sure your changes will help improve the content.

### Submit a pull request to the master branch

When you're finished with your work and are ready to have it merged into the master repository, follow these steps. Note: pull requests are typically reviewed within 10 business days. If your pull request is accepted you will be credited for your submission.

1. Submit your pull request against the master branch.
2. Sign the CLA, if you haven't already done so.
3. One of the repo admins will process your pull request, including performing a code review. If there are questions, discussions, or change requests in the pull request, be sure to respond.
4. When the repo admins are satisfied, they will accept and merge the pull request.

Congratulations, you have successfully contributed to the sample!

## FAQ

### Where do I get a Contributor's License Agreement?

You will automatically be sent a notice that you need to sign the Contributor's License Agreement (CLA) if your pull request requires one.

As a community member, you must sign the CLA before you can contribute large submissions to this project. You only need complete and submit the CLA document once. Carefully review the document. You may be required to have your employer sign the document.

### What happens with my contributions?

When you submit your changes, via a pull request, our team will be notified and will review your pull request. You will receive notifications about your pull request from GitHub; you may also be notified by someone from our team if we need more information. We reserve the right to edit your submission for legal, style, clarity, or other issues.

### Who approves pull requests?

The admin of the repository approves pull requests.

### How soon will I get a response about my change request or issue?

We typically review pull requests and respond to issues within 10 business days.

## More resources

- To learn more about Markdown, see [Daring Fireball](http://daringfireball.net/).
- To learn more about using Git and GitHub, check out the [GitHub Help section](http://help.github.com/).
23 changes: 23 additions & 0 deletions Samples/excel-keyboard-shortcuts/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Office Add-in Task Pane

MIT License

Copyright (c) Microsoft Corporation. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE
114 changes: 114 additions & 0 deletions Samples/excel-keyboard-shortcuts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
---
page_type: sample
products:
- office-excel
- office-365
languages:
- javascript
extensions:
contentType: samples
technologies:
- Add-ins
createdDate: 11/5/2020 10:00:00 AM
description: "This sample shows how to add keyboard shortcuts to your Office Add-in."
---

# (Preview) Use keyboard shortcuts for Office add-in actions

## Summary

This sample shows how to set up a basic Excel add-in project that utilizes keyboard shortcuts. Currently, the shortcuts are configured to show and hide the task pane as well as cycle through colors for a selected cell. Keyboard shortcuts can be used to achieve any action within the add-in runtime.

> **Note:** The features used in this sample are currently in preview and subject to change. They are not currently supported for use in production environments. To try the preview features, you'll need to [join Office Insider](https://insider.office.com/join). A good way to try out preview features is to sign up for an Office 365 subscription. If you don't already have an Office 365 subscription, get one by joining the [Office 365 Developer Program](https://developer.microsoft.com/office/dev-program).
## Features

- Add keyboard shortcuts to your Office Add-in.
- Enable users to use those keyboard shortcuts to invoke any action within the Office Add-in runtime.

## Applies to

- Excel on Windows, Mac, and in a browser.

## Prerequisites

To use this sample, you'll need to [join Office Insider](https://insider.office.com/join).

Before running this sample, you need a recent version of [npm](https://www.npmjs.com/get-npm) and [Node.js](https://nodejs.org/en/) installed on your computer. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.

## Solution

Solution | Author(s)
---------|----------
Use keyboard shortcuts for Office add-in actions | Microsoft

## Version history

Version | Date | Comments
---------| -----| --------
1.0 | 11-5-2020 | Initial release

## Disclaimer

**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

----------

## Scenario: Open/Close taskpane and modify cell color

This sample adds three different shortcuts to the Office Add-in. This enables the user to:
- Use the "Ctrl+Shift+Up" keyboard shortcut to open the taskpane.
- Use the "Ctrl+Shift+Down" keyboard shortcut to close the taskpane.
- Use the "Ctrl+Shift+O" keyboard shortcut to cycle through colors for a selected cell.

## Build and run the solution

1. In the command prompt, run the command `npm install`.
2. Run the command `npm run start`. This starts the Node.js server, and opens Excel on Windows.

If you're running Excel on the web or Mac, run `npm run start:web` instead and see the following articles for instructions on how to sideload:

- [Sideload Office Add-ins in Office on the web for testing](https://docs.microsoft.com/office/dev/add-ins/testing/sideload-office-add-ins-for-testing)
- [Sideload Office Add-ins on Mac for testing](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac#sideload-an-add-in-in-office-on-mac)

Once the add-in is loaded use the following steps to try out the functionality.

1. Make sure the focus of the keyboard is on the worksheet by selecting a cell.
2. Press "Ctrl+Shift+Up" on the keyboard to trigger the Show Taskpane action.
3. In the task pane, you will see the additional shortcuts available to try in the sample.


## Key parts of this sample

The manifest.xml is pre-configured to use the shared runtime. To see how to add shared runtime to your own add-in, use the following article:

- [Configure your Excel Add-in to use a shared JavaScript runtime](https://docs.microsoft.com/en-us/office/dev/add-ins/excel/configure-your-add-in-to-use-a-shared-runtime)


Additionally, the following changes have been made to enable keyboard shortcuts:

1. Configured the add-in's manifest by adding the new element `ExtendedOverrides` to the end of the manifest.
2. Created the shortcuts JSON file `shortcuts.json`, in the `src/` folder to define actions and their keyboard shortcuts. Ensure the new file is properly bundled by configuring the `webpack.config.js` file.
3. Mapped actions to runtime calls with the associate method in `src/taskpane/taskpane.js`.


## Security notes

In the webpack.config.js file, a header is set to `"Access-Control-Allow-Origin": "*"`. This is only for development purposes. In production code, you should list the allowed domains and not leave this header open to all domains.

You'll be prompted to install certificates for trusted access to https://localhost. The certificates are intended only for running and studying this code sample. Do not reuse them in your own code solutions or in production environments.

You can install or uninstall the certificates by running the following commands in the project folder.

```
npx office-addin-dev-certs install
npx office-addin-dev-certs uninstall
```

## Copyright

Copyright (c) 2020 Microsoft Corporation. All rights reserved.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

<img src="https://telemetry.sharepointpnp.com/pnp-officeaddins/samples/excel-keyboard-shortcuts" />
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2b93c1a

Please sign in to comment.