Created
January 10, 2024 12:28
-
-
Save xuruiyao-msft/1f906c6eeda10a5bd34e6967afd8b8b9 to your computer and use it in GitHub Desktop.
Registers, triggers, and deregisters onSelectionChanged event that tracks when selections are changed in content controls.
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: Content Control Minimal Repro | |
description: >- | |
Registers, triggers, and deregisters onSelectionChanged event that tracks when | |
selections are changed in content controls. | |
host: WORD | |
api_set: {} | |
script: | |
content: > | |
$("#assemble").click(() => tryCatch(assemble)); | |
$("#run").click(() => tryCatch(run)); | |
let eventContexts = []; | |
async function assemble() { | |
await Word.run(async (context) => { | |
var startTime = performance.now(); | |
const body = context.document.body; | |
const range = context.document.getSelection(); | |
const data = [ | |
{ name: "footnote0", message: "content0" }, | |
{ name: "footnote1", message: "content1" }, | |
{ name: "footnote2", message: "content2" } | |
]; | |
for (let item of data) { | |
var contentControl = range.insertContentControl(); | |
contentControl.insertText(item.message, Word.InsertLocation.replace); | |
// const footnote = range.insertFootnote(); | |
// const footnoteContentControl = footnote.body.insertContentControl(); | |
// footnoteContentControl.insertText(item.name, Word.InsertLocation.end); | |
} | |
// await context.sync(); | |
var endTime = performance.now(); | |
const contentControls = context.document.contentControls; | |
contentControls.load("items"); | |
await context.sync(); | |
if (contentControls.items.length > 0) { | |
for (let i = 0; i < contentControls.items.length; i++) { | |
eventContexts[i] = contentControls.items[i].onSelectionChanged.add((e) => | |
contentControlSelectionChanged(e, startTime) | |
); | |
contentControls.items[i].track(); | |
} | |
// await context.sync(); | |
} | |
const cc = contentControls.getFirstOrNullObject(); | |
if (cc) { | |
cc.select(); | |
// await context.sync(); | |
} | |
console.log(`Call took ${endTime - startTime}ms`); | |
}); | |
} | |
async function run() { | |
const controlData = []; | |
const startTime = performance.now(); | |
await Word.run(async (context) => { | |
const contentControls = context.document.contentControls; | |
// contentControls.load(["id", "tag", "items", "fields"]); | |
contentControls.load({ select: "id,tag,fields/code", expand: "fields" }); | |
await context.sync(); | |
if (contentControls.items.length === 0) { | |
console.log("There aren't any content controls in this document so can't register event handlers."); | |
} else { | |
// for (let control of contentControls.items) { | |
// control.load("tag"); | |
// } | |
// await context.sync(); | |
let fields; | |
for (let control of contentControls.items) { | |
try { | |
fields = control.fields; | |
} catch (err) { | |
console.error(err); | |
} | |
} | |
// await context.sync(); | |
// let fields = contentControls.items[contentControls.items.length - 1].fields; | |
if (fields) { | |
// for (const field of fields.items) { | |
// field.load("code"); | |
// } | |
// await context.sync(); | |
// console.log("fields: " + fields); | |
for (let control of contentControls.items) { | |
try { | |
for (const field of fields.items) { | |
const fieldCode = field.code; | |
console.log("fieldCode", fieldCode); | |
} | |
} catch (err) { | |
console.error(err); | |
} | |
} | |
} | |
const endTime = performance.now(); | |
console.log("Hey, that took " + (endTime - startTime) + "ms"); | |
} | |
}); | |
} | |
async function contentControlSelectionChanged(event: | |
Word.ContentControlSelectionChangedEventArgs, startTime) { | |
await Word.run(async (context) => { | |
var endTime = performance.now(); | |
console.log(`${event.eventType} event detected after ${endTime - startTime}ms`); | |
console.log(event.ids); | |
}); | |
} | |
async function deregisterEventHandlers() { | |
await Word.run(async (context) => { | |
for (let i = 0; i < eventContexts.length; i++) { | |
await Word.run(eventContexts[i].context, async (context) => { | |
eventContexts[i].remove(); | |
}); | |
} | |
await context.sync(); | |
eventContexts = null; | |
console.log("Removed event handlers that were tracking when selection is changed in content controls."); | |
}); | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback) { | |
try { | |
await callback(); | |
} catch (error) { | |
// Note: In a production add-in, you'd want to notify the user through your add-in's UI. | |
console.error(error); | |
} | |
} | |
language: typescript | |
template: | |
content: "<button id=\"assemble\" class=\"ms-Button\">\n\t <span class=\"ms-Button-label\">Assemble</span>\n</button>\n<button id=\"run\" class=\"ms-Button\">\n <span class=\"ms-Button-label\">Run</span>\n</button>\n" | |
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: | | |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js | |
@types/office-js | |
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 | |
core-js@2.4.1/client/core.min.js | |
@types/core-js | |
jquery@3.1.1 | |
@types/jquery@3.3.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment