Created
February 16, 2018 00:07
-
-
Save alx-andru/c2c93e4e29f60a31880e4c0e2dde63b3 to your computer and use it in GitHub Desktop.
Add and remove an event handler on the selection changed event - Shared with Script Lab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Selection Changed | |
description: Add and remove an event handler on the selection changed event | |
author: alx-andru | |
host: EXCEL | |
api_set: {} | |
script: | |
content: | | |
$("#add-event-handler").click(addEventHandler); | |
$("#remove-last-event-handler").click(removeLastEventHandler); | |
$("#remove-all-event-handlers").click(removeAllEventHandlers); | |
let eventHandlers: Array<{ | |
workbook: Excel.Workbook, | |
handler: OfficeExtension.EventHandlerResult<Excel.Workbook> | |
}> = []; | |
function addEventHandler() { | |
tryCatch(() => Excel.run(async (context) => { | |
let workbook = context.workbook; | |
let handler = workbook.onSelectionChanged.add(onSelectionChanged); | |
eventHandlers.push({ workbook, handler }); | |
await context.sync(); | |
OfficeHelpers.UI.notify("Event handler added", | |
"Try changing the selection, and watch the console output."); | |
})); | |
} | |
async function removeLastEventHandler() { | |
let lastEventHandler = eventHandlers.pop(); | |
if (!lastEventHandler) { | |
OfficeHelpers.UI.notify("No event handlers added"); | |
return; | |
} | |
let workbook = lastEventHandler.workbook; | |
tryCatch(() => Excel.run(workbook, async (context) => { | |
lastEventHandler.handler.remove(); | |
await context.sync(); | |
})); | |
} | |
async function removeAllEventHandlers() { | |
if (eventHandlers.length === 0) { | |
OfficeHelpers.UI.notify("No event handlers added"); | |
return; | |
} | |
tryCatch(async () => { | |
while (eventHandlers.length > 0) { | |
const lastEventHandler = eventHandlers.pop(); | |
await Excel.run(lastEventHandler.workbook, async (context) => { | |
lastEventHandler.handler.remove(); | |
await context.sync(); | |
}); | |
} | |
OfficeHelpers.UI.notify("All event handlers removed"); | |
}) | |
} | |
async function onSelectionChanged() { | |
tryCatch(() => Excel.run(async (context) => { | |
const range = context.workbook.getSelectedRange(); | |
range.format.fill.color = "yellow"; | |
range.load("address"); | |
await context.sync(); | |
console.log(`New selection is ${range.address}`); | |
})); | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback: () => OfficeExtension.IPromise<any>) { | |
try { | |
await callback(); | |
} | |
catch (error) { | |
console.log('try again'); | |
console.log(eventHandlers); | |
addEventHandler(); | |
OfficeHelpers.UI.notify(error); | |
OfficeHelpers.Utilities.log(error); | |
} | |
} | |
addEventHandler(); | |
language: typescript | |
template: | |
content: | | |
<section class="ms-font-m"> | |
<p>This sample shows how to add and remove an event handler on the selection changed event using the Excel JavaScript API.</p> | |
</section> | |
<section class="samples ms-font-m"> | |
<h3>Try it out</h3> | |
<button id="add-event-handler" class="ms-Button"> | |
<span class="ms-Button-label">Add event handler</span> | |
</button> | |
<button id="remove-last-event-handler" class="ms-Button"> | |
<span class="ms-Button-label">Remove last event handler</span> | |
</button> | |
<button id="remove-all-event-handlers" class="ms-Button"> | |
<span class="ms-Button-label">Remove all event handlers</span> | |
</button> | |
</section> | |
language: html | |
style: | |
content: | | |
section.samples { | |
margin-top: 20px; | |
} | |
section.samples .ms-Button, section.setup .ms-Button { | |
display: block; | |
margin-bottom: 5px; | |
margin-left: 20px; | |
min-width: 80px; | |
} | |
language: css | |
libraries: | | |
# Office.js | |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js | |
# CSS Libraries | |
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css | |
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css | |
# NPM libraries | |
core-js@2.4.1/client/core.min.js | |
@microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js | |
jquery@3.1.1 | |
# IntelliSense: @types/library or node_modules paths or URL to d.ts files | |
@types/office-js | |
@types/core-js | |
@microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts | |
@types/jquery |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment