diff --git a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml index 23f0d65e..97ceb9f6 100644 --- a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml +++ b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml @@ -189,7 +189,9 @@ script: await context.sync(); - $(".conditional-formats").hide(); + document.querySelectorAll(".conditional-formats").forEach(element => { + element.style.display = "none"; + }); }); } diff --git a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml index 09f9e3be..dff02a2e 100644 --- a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml +++ b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml @@ -24,7 +24,7 @@ script: await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; // Store the XML part's ID in a setting. const settings = context.workbook.settings; @@ -50,7 +50,7 @@ script: await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; await context.sync(); } }); @@ -71,14 +71,14 @@ script: await context.sync(); if (customXmlPart.isNullObject) { - $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`); + document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`; // Delete the unneeded setting too. xmlPartIDSetting.delete(); } else { const readableXml = addLineBreaksToXML(xmlBlob.value); const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}` - $("#display-xml").text(strangeMessage); + document.getElementById("display-xml").textContent = strangeMessage; } await context.sync(); diff --git a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml index b1ca1190..6bf4d154 100644 --- a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml +++ b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml @@ -14,7 +14,7 @@ script: async function createCustomXmlPart() { await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; // You must have the xmlns attribute to populate the // CustomXml.namespaceUri property. @@ -26,7 +26,7 @@ script: // Make it a bit more readable. const readableXml = xmlBlob.value.replace(/>\n<"); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; await context.sync(); }); @@ -34,7 +34,7 @@ script: async function testForUniqueNamespace() { await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; const contosoNamespace = "http://schemas.contoso.com/review/1.0"; const customXmlParts = context.workbook.customXmlParts; const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace); @@ -51,8 +51,8 @@ script: // Make it a bit more readable. const readableXml = xmlBlob.value.replace(/>\n<"); - $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is: - ${readableXml}`); + document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is: + ${readableXml}`; } else { console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`); @@ -64,7 +64,7 @@ script: async function deleteAllCustomXmlParts() { await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; const customXmlParts = context.workbook.customXmlParts; customXmlParts.load("items"); diff --git a/samples/excel/20-data-types/data-types-web-image.yaml b/samples/excel/20-data-types/data-types-web-image.yaml index 9beed001..68b7f2fd 100644 --- a/samples/excel/20-data-types/data-types-web-image.yaml +++ b/samples/excel/20-data-types/data-types-web-image.yaml @@ -17,8 +17,8 @@ script: // This function inserts a web image into the currently selected cell. await Excel.run(async (context) => { // Retrieve image data from the task pane and then clear the input fields. - const imageUrl = $("#url").val() as string; - const imageAltText = $("#alt-text").val() as string; + const imageUrl = (document.getElementById("url") as HTMLInputElement).value; + const imageAltText = (document.getElementById("alt-text") as HTMLInputElement).value; clearForm(); // Load the active cell. @@ -65,8 +65,8 @@ script: } // Assign image data to corresponding input fields in the task pane. - $("#url").val(webImageUrl); - $("#alt-text").val(webImageAltText); + (document.getElementById("url") as HTMLInputElement).value = webImageUrl; + (document.getElementById("alt-text") as HTMLInputElement).value = webImageAltText; }); } @@ -95,8 +95,8 @@ script: async function clearForm() { // Clear the input fields in the task pane. - $("#url").val(""); - $("#alt-text").val(""); + (document.getElementById("url") as HTMLInputElement).value = ""; + (document.getElementById("alt-text") as HTMLInputElement).value = ""; } async function setup() { diff --git a/samples/excel/26-document/custom-properties.yaml b/samples/excel/26-document/custom-properties.yaml index 90c3ab73..12d02e8b 100644 --- a/samples/excel/26-document/custom-properties.yaml +++ b/samples/excel/26-document/custom-properties.yaml @@ -19,8 +19,8 @@ script: async function setCustomDocProperty() { await Excel.run(async (context) => { // Get the key/value pair from the task pane. - const userKey = $("#key").text(); - const userValue = $("#value").text(); + const userKey = document.getElementById("key").textContent; + const userValue = document.getElementById("value").textContent; // Add the custom property. const customDocProperties = context.workbook.properties.custom; @@ -50,8 +50,8 @@ script: async function setCustomWorksheetProperty() { await Excel.run(async (context) => { // Get the key/value pair from the task pane. - const userKey = $("#key").text(); - const userValue = $("#value").text(); + const userKey = document.getElementById("key").textContent; + const userValue = document.getElementById("value").textContent; // Add the custom property. const customWorksheetProperties = context.workbook.worksheets.getActiveWorksheet().customProperties; diff --git a/samples/excel/26-document/get-file-in-slices-async.yaml b/samples/excel/26-document/get-file-in-slices-async.yaml index 3371746d..414ccec0 100644 --- a/samples/excel/26-document/get-file-in-slices-async.yaml +++ b/samples/excel/26-document/get-file-in-slices-async.yaml @@ -35,7 +35,9 @@ script: console.log("Received the full contents of the file."); let base64string = base64js.fromByteArray(byteArray); - $('#file-contents').val(base64string).show(); + const fileContentsElement = document.getElementById("file-contents") as HTMLTextAreaElement; + fileContentsElement.value = base64string; + fileContentsElement.style.display = "block"; console.log("The Base64-encoded string that represents the current document has been written to the text box. To validate the string, use the \"Create workbook from string\" button."); } @@ -82,7 +84,9 @@ script: } async function newWorkbookFromFile() { - await Excel.createWorkbook($('#file-contents').text()).catch(function (error) { + const fileContentsElement = document.getElementById("file-contents"); + const fileContentsText = fileContentsElement.textContent; + await Excel.createWorkbook(fileContentsText).catch(function (error) { console.error(error); }); } @@ -169,8 +173,8 @@ template: Get file
- +

Create a new workbook

diff --git a/samples/excel/42-range/range-find.yaml b/samples/excel/42-range/range-find.yaml index 4b0c31b6..857401f2 100644 --- a/samples/excel/42-range/range-find.yaml +++ b/samples/excel/42-range/range-find.yaml @@ -26,7 +26,8 @@ script: // NOTE: If no match is found, an ItemNotFound error // is thrown when Range.find is evaluated. - const foundRange = searchRange.find($("#searchText").val().toString(), { + const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value; + const foundRange = searchRange.find(searchText, { completeMatch: isCompleteMatchToggle, matchCase: isMatchCaseToggle, searchDirection: searchDirectionToggle @@ -45,7 +46,8 @@ script: const sheet = context.workbook.worksheets.getItem("Sample"); const table = sheet.tables.getItem("ExpensesTable"); const searchRange = table.getRange(); - const foundRange = searchRange.findOrNullObject($("#searchText").val().toString(), { + const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value; + const foundRange = searchRange.findOrNullObject(searchText, { completeMatch: isCompleteMatchToggle, matchCase: isMatchCaseToggle, searchDirection: searchDirectionToggle diff --git a/samples/excel/44-shape/shape-images.yaml b/samples/excel/44-shape/shape-images.yaml index e931e3fd..76da2498 100644 --- a/samples/excel/44-shape/shape-images.yaml +++ b/samples/excel/44-shape/shape-images.yaml @@ -8,13 +8,13 @@ api_set: script: content: |- document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#selectedFile").on("change", () => tryCatch(readImageFromFile)); + document.getElementById("selectedFile").addEventListener("change", () => tryCatch(readImageFromFile)); document.getElementById("flipImage").addEventListener("click", () => tryCatch(flipImage)); document.getElementById("getImageFormat").addEventListener("click", () => tryCatch(getImageFormat)); document.getElementById("writeOutImageString").addEventListener("click", () => tryCatch(writeOutImageString)); async function readImageFromFile() { - const myFile = document.getElementById("selectedFile"); + const myFile = document.getElementById("selectedFile") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/excel/50-workbook/create-workbook.yaml b/samples/excel/50-workbook/create-workbook.yaml index 5bb4f7f7..c5a6315a 100644 --- a/samples/excel/50-workbook/create-workbook.yaml +++ b/samples/excel/50-workbook/create-workbook.yaml @@ -9,7 +9,7 @@ api_set: script: content: |- document.getElementById("create-new-blank-workbook").addEventListener("click", () => tryCatch(createBlankWorkbook)); - $("#file").on("change", () => tryCatch(createWorkbookFromExisting)); + document.getElementById("file").addEventListener("change", () => tryCatch(createWorkbookFromExisting)); async function createBlankWorkbook() { await Excel.run(async (context) => { @@ -18,7 +18,7 @@ script: } async function createWorkbookFromExisting() { - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = ((event) => { diff --git a/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml b/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml index 10fb5862..7af9e084 100644 --- a/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml +++ b/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml @@ -7,14 +7,14 @@ api_set: ExcelAPI: '1.13' script: content: |- - $("#file").on("change", getBase64); + document.getElementById("file").addEventListener("change", getBase64); document.getElementById("insert-sheets").addEventListener("click", () => tryCatch(insertSheets)); let externalWorkbook; async function getBase64() { // Retrieve the file and set up an HTML FileReader element. - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/excel/99-just-for-fun/gradient.yaml b/samples/excel/99-just-for-fun/gradient.yaml index 09b075b3..d4905cfa 100644 --- a/samples/excel/99-just-for-fun/gradient.yaml +++ b/samples/excel/99-just-for-fun/gradient.yaml @@ -8,15 +8,14 @@ api_set: ExcelApi: '1.4' script: content: |- - initializeColorPickers(); - - // Set up the click handler: - const $drawButton = $("#draw-gradient").on("click", drawGradient); + // Set up the click handler. + document.getElementById("draw-gradient").addEventListener("click", drawGradient); document.getElementById("random").addEventListener("click", randomizeColors); - /** Click-handler for drawing the gradient */ + /** Click-handler for drawing the gradient. */ async function drawGradient() { - $drawButton.prop("disabled", true); + const drawButton = document.getElementById("draw-gradient") as HTMLButtonElement; + drawButton.disabled = true; try { await Excel.run(drawGradientHelper); @@ -24,10 +23,10 @@ script: console.log(error); } - $drawButton.prop("disabled", false); + drawButton.disabled = false; } - /** Helper function to do the actual gradient-drawing */ + /** Helper function to do the actual gradient-drawing. */ async function drawGradientHelper(context: Excel.RequestContext) { context.workbook.worksheets.getItemOrNullObject("Gradient").delete(); const sheet = context.workbook.worksheets.add("Gradient"); @@ -40,9 +39,21 @@ script: } }); - let originalSize = parseInt($("#size").val() as string); + let originalSize = parseInt((document.getElementById("size") as HTMLInputElement).value); const colors2D = createColorArray(originalSize); + // Retrieve color values from elements. + const topLeftColor = (document.getElementById("top-left") as HTMLInputElement).value; + const topRightColor = (document.getElementById("top-right") as HTMLInputElement).value; + const bottomLeftColor = (document.getElementById("bottom-left") as HTMLInputElement).value; + const bottomRightColor = (document.getElementById("bottom-right") as HTMLInputElement).value; + + // Convert HEX colors to RGB using TinyColor. + const topLeftRgb = tinycolor(topLeftColor).toRgb(); + const topRightRgb = tinycolor(topRightColor).toRgb(); + const bottomLeftRgb = tinycolor(bottomLeftColor).toRgb(); + const bottomRightRgb = tinycolor(bottomRightColor).toRgb(); + if (Office.context.requirements.isSetSupported("ExcelApi", "1.9")) { // ExcelApi 1.9 introduced the setCellProperties APIs to efficiently set different properties // across a range without needing to iterate cell-by-cell. @@ -73,21 +84,33 @@ script: } function createColorArray(size: number): string[][] { - // Create a 2D in-memory array to hold the colors + // Create a 2D in-memory array to hold the colors. let colors2D = Array(size); for (let row = 0; row < size; row++) { colors2D[row] = Array(size); } + // Get the color values from the color pickers. + const topLeftColor = (document.getElementById("top-left") as HTMLInputElement).value; + const topRightColor = (document.getElementById("top-right") as HTMLInputElement).value; + const bottomLeftColor = (document.getElementById("bottom-left") as HTMLInputElement).value; + const bottomRightColor = (document.getElementById("bottom-right") as HTMLInputElement).value; + + // Convert HEX to RGB using TinyColor. + const topLeftRgb = tinycolor(topLeftColor).toRgb(); + const topRightRgb = tinycolor(topRightColor).toRgb(); + const bottomLeftRgb = tinycolor(bottomLeftColor).toRgb(); + const bottomRightRgb = tinycolor(bottomRightColor).toRgb(); + const topColors = getColorsArray( - $("#top-left").spectrum("get").toRgb(), - $("#top-right").spectrum("get").toRgb(), + topLeftRgb, + topRightRgb, size ); const bottomColors = getColorsArray( - $("#bottom-left").spectrum("get").toRgb(), - $("#bottom-right").spectrum("get").toRgb(), + bottomLeftRgb, + bottomRightRgb, size ); @@ -101,9 +124,9 @@ script: return colors2D; } - /** Helper function to get an array of colors */ - function getColorsArray(color1: ColorFormats.RGB, color2: ColorFormats.RGB, count: number) { - const result = new Array(count); + /** Helper function to get an array of colors. */ + function getColorsArray(color1, color2, count: number) { + const result = new Array(count); for (let i = 0; i < count; i++) { const fraction = i / (count - 1); result[i] = { @@ -115,16 +138,14 @@ script: return result; } - function initializeColorPickers() { - $("#color-table input[type='text']").spectrum({ - preferredFormat: "rgb", - showInput: true - }); - } - function randomizeColors() { - $("#color-table input[type='text']").each((index, element) => { - $(element).spectrum("set", tinycolor.random().toHexString()); + // Select all color input elements. + const colorInputs = document.querySelectorAll("#color-table input[type='color']"); + + // Iterate through each color input and set a random color. + colorInputs.forEach((input) => { + const randomColor = tinycolor.random().toHexString(); + (input as HTMLInputElement).value = randomColor; }); } language: typescript @@ -138,12 +159,12 @@ template:
Top left
- - + + - - + +
@@ -162,7 +183,7 @@ template:
- Uses the Spectrum color picker, and the TinyColor libraries. + Uses the TinyColor library.
@@ -212,9 +233,5 @@ libraries: |- https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - https://unpkg.com/tinycolor2@1.4.1/tinycolor.js - @types/tinycolor2 - https://unpkg.com/spectrum-colorpicker@1.8.0/spectrum.js - https://unpkg.com/spectrum-colorpicker@1.8.0/spectrum.css - @types/spectrum \ No newline at end of file + @types/tinycolor2 \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/path-finder-game.yaml b/samples/excel/99-just-for-fun/path-finder-game.yaml index 6dd28e9a..8ea6024a 100644 --- a/samples/excel/99-just-for-fun/path-finder-game.yaml +++ b/samples/excel/99-just-for-fun/path-finder-game.yaml @@ -10,9 +10,8 @@ script: content: |- document.getElementById("setup").addEventListener("click", setup); document.getElementById("repeat").addEventListener("click", repeat); - - const $pruneTheGrid = $("#step-by-step").on("click", pruneTheGrid); - const $allAtOnce = $("#all-at-once").on("click", allAtOnce); + document.getElementById("step-by-step").addEventListener("click", pruneTheGrid); + document.getElementById("all-at-once").addEventListener("click", allAtOnce); const GRID_ROW_COUNT = 25; const GRID_COLUMN_COUNT = 30; @@ -20,7 +19,7 @@ script: let matrixPrevious: string[][] function setup() { - const density = parseInt($("#density").val() as string) / 100; + const density = parseInt((document.getElementById("density") as HTMLInputElement).value) / 100; const symbol = "\u25cf"; const matrix = new Array(GRID_ROW_COUNT); @@ -32,7 +31,7 @@ script: } matrixPrevious = matrix; - $("#repeat").show(); + document.getElementById("repeat").style.display = "block"; setupHelper(matrix); } @@ -71,7 +70,8 @@ script: } async function pruneTheGrid() { - $pruneTheGrid.attr("disabled", "true"); + const pruneTheGrid = document.getElementById("step-by-step") as HTMLButtonElement; + pruneTheGrid.disabled = true; await tryCatch(() => Excel.run(async (context) => { const grid = context.workbook.worksheets @@ -84,11 +84,12 @@ script: await context.sync(); })); - $pruneTheGrid.removeAttr("disabled"); + pruneTheGrid.disabled = false; } async function allAtOnce() { - $allAtOnce.attr("disabled", "true"); + const allAtOnce = document.getElementById("all-at-once") as HTMLButtonElement; + allAtOnce.disabled = true; let counter = 0; await tryCatch(() => Excel.run(async (context) => { @@ -111,7 +112,7 @@ script: })); console.log("Count of iterations: " + counter); - $allAtOnce.removeAttr("disabled"); + allAtOnce.disabled = false; } diff --git a/samples/excel/99-just-for-fun/patterns.yaml b/samples/excel/99-just-for-fun/patterns.yaml index 8e0f74ec..f946e71c 100644 --- a/samples/excel/99-just-for-fun/patterns.yaml +++ b/samples/excel/99-just-for-fun/patterns.yaml @@ -20,7 +20,7 @@ script: sheet.activate(); formatBackground(sheet); - const size = parseInt($("#size").val() as string); + const size = parseInt((document.getElementById("size") as HTMLInputElement).value); for (let i = 0; i < size; i++) { const width = size * 2 - 2 * i; @@ -45,7 +45,7 @@ script: sheet.activate(); formatBackground(sheet); - const size = Math.floor(parseInt($("#size").val() as string) / 2); + const size = Math.floor(parseInt((document.getElementById("size") as HTMLInputElement).value) / 2); for (let i = 0; i < size - 1; i++) { @@ -106,7 +106,7 @@ script: sheet.activate(); formatBackground(sheet); - const size = Math.floor(parseInt($("#size").val() as string) / 2); + const size = Math.floor(parseInt((document.getElementById("size") as HTMLInputElement).value) / 2); for (let i = 0; i < size; i++) { const range1 = sheet.getCell(2 * i + 1, 2 * i + 1).getResizedRange(size - i, size - i); diff --git a/samples/excel/99-just-for-fun/tetrominos.yaml b/samples/excel/99-just-for-fun/tetrominos.yaml index 20b36299..556180e9 100644 --- a/samples/excel/99-just-for-fun/tetrominos.yaml +++ b/samples/excel/99-just-for-fun/tetrominos.yaml @@ -8,18 +8,17 @@ api_set: ExcelApi: '1.9' script: content: |- - $("#run").on("click", () => { - $("#setup").hide(); + document.getElementById("run").addEventListener("click", () => { + document.getElementById("setup").style.display = "none"; tryCatch(run); }); - - $("#selectedFile").on("change", () => tryCatch(readImageFromFile)); + document.getElementById("selectedFile").addEventListener("change", () => tryCatch(readImageFromFile)); document.getElementById("focusButton").addEventListener("click", () => tryCatch(focus)); let backgroundPicture = getDefaultBackgroundPicture(); function readImageFromFile() { - const myFile = document.getElementById("selectedFile"); + const myFile = document.getElementById("selectedFile") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { @@ -33,7 +32,7 @@ script: } function focus() { - $("#container").focus(); + document.getElementById("container").focus(); } async function run() { @@ -621,10 +620,12 @@ script: } } - await run($("#container")[0], $("#sessionPane")[0]); + const container = document.getElementById("container"); + const sessionPane = document.getElementById("sessionPane"); + await run(container, sessionPane); - $("#container").focus(); - $("#focus").show(); + container.focus(); + document.getElementById("focus").style.display = "block"; }); } @@ -633,7 +634,7 @@ script: try { await callback(); } catch (error) { - $("#setup").show(); + document.getElementById("setup").style.display = "block"; // Note: In a production add-in, you'd want to notify the user through your add-in's UI. console.error(error); } @@ -790,5 +791,4 @@ libraries: |- https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js \ No newline at end of file diff --git a/samples/outlook/10-roaming-settings/roaming-settings.yaml b/samples/outlook/10-roaming-settings/roaming-settings.yaml index 0e1bc28f..1b15c078 100644 --- a/samples/outlook/10-roaming-settings/roaming-settings.yaml +++ b/samples/outlook/10-roaming-settings/roaming-settings.yaml @@ -11,15 +11,15 @@ script: document.getElementById("save").addEventListener("click", save); function get() { - const settingName = $("#settingName").val(); + const settingName = (document.getElementById("settingName") as HTMLInputElement).value; const settingValue = Office.context.roamingSettings.get(settingName); - $("#settingValue").val(settingValue); + (document.getElementById("settingValue") as HTMLInputElement).value = settingValue; console.log(`The value of setting "${settingName}" is "${settingValue}".`); } function set() { - const settingName = $("#settingName").val(); - const settingValue = $("#settingValue").val(); + const settingName = (document.getElementById("settingName") as HTMLInputElement).value; + const settingValue = (document.getElementById("settingValue") as HTMLInputElement).value; Office.context.roamingSettings.set(settingName, settingValue); console.log(`Setting "${settingName}" set to value "${settingValue}".`); } diff --git a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml index 8cd1a84f..4ebc0f45 100644 --- a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml +++ b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml @@ -28,7 +28,7 @@ script: } function get() { - const propertyName = $("#get-property-name").val(); + const propertyName = (document.getElementById("get-property-name") as HTMLInputElement).value; const propertyValue = customProps.get(propertyName); console.log(`The value of custom property "${propertyName}" is "${propertyValue}".`); } @@ -45,14 +45,14 @@ script: } function set() { - const propertyName = $("#set-property-name").val(); - const propertyValue = $("#property-value").val(); + const propertyName = (document.getElementById("set-property-name") as HTMLInputElement).value; + const propertyValue = (document.getElementById("property-value") as HTMLInputElement).value; customProps.set(propertyName, propertyValue); console.log(`Custom property "${propertyName}" set to value "${propertyValue}".`); } function remove() { - const propertyName = $("#remove-property-name").val(); + const propertyName = (document.getElementById("remove-property-name") as HTMLInputElement).value; customProps.remove(propertyName); console.log(`Custom property "${propertyName}" removed.`); } diff --git a/samples/outlook/20-item-body/append-text-on-send.yaml b/samples/outlook/20-item-body/append-text-on-send.yaml index b077e266..b571b433 100644 --- a/samples/outlook/20-item-body/append-text-on-send.yaml +++ b/samples/outlook/20-item-body/append-text-on-send.yaml @@ -11,7 +11,7 @@ script: function appendOnSend() { // This snippet appends text to the end of the message or appointment's body once it's sent. - const text = $("#text-field").val(); + const text = (document.getElementById("text-field") as HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the appendOnSendAsync call. Office.context.mailbox.item.body.getTypeAsync((asyncResult) => { diff --git a/samples/outlook/20-item-body/prepend-text-on-send.yaml b/samples/outlook/20-item-body/prepend-text-on-send.yaml index 32cb1a23..92a893f3 100644 --- a/samples/outlook/20-item-body/prepend-text-on-send.yaml +++ b/samples/outlook/20-item-body/prepend-text-on-send.yaml @@ -11,7 +11,7 @@ script: function prependOnSend() { // This snippet prepends text to the beginning of the message or appointment's body once it's sent. - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependOnSendAsync call. Office.context.mailbox.item.body.getTypeAsync((asyncResult) => { diff --git a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml index eae94ef5..43c3bbc1 100644 --- a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml +++ b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml @@ -14,7 +14,7 @@ script: When prepending a link in HTML markup to the body, you can disable the online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, 'Click here!'. */ - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependAsync call. Office.context.mailbox.item.body.getTypeAsync((asyncResult) => { diff --git a/samples/outlook/20-item-body/replace-selected-text.yaml b/samples/outlook/20-item-body/replace-selected-text.yaml index cdd8b6b0..6ee56851 100644 --- a/samples/outlook/20-item-body/replace-selected-text.yaml +++ b/samples/outlook/20-item-body/replace-selected-text.yaml @@ -14,7 +14,7 @@ script: If you want to use a link in HTML markup as a value of the setSelectedDataAsync call's data parameter, you can disable online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, 'Click here!'. */ - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependAsync call. Office.context.mailbox.item.body.getTypeAsync((asyncResult) => { diff --git a/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml index 1847b5e2..372652cf 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml @@ -25,9 +25,7 @@ script: } function setBcc() { - const email = $("#emailBcc") - .val() - .toString(); + const email = (document.getElementById("emailBcc") as HTMLInputElement).value; const emailArray = [email]; Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { diff --git a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml index a550e0b1..48b2b66a 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml @@ -25,9 +25,7 @@ script: } function setCc() { - const email = $("#emailCc") - .val() - .toString(); + const email = (document.getElementById("emailCc") as HTMLInputElement).value; const emailArray = [email]; Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { diff --git a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml index e8f96137..dcf2c48f 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml @@ -31,9 +31,7 @@ script: } function setOptionalAttendees() { - const email = $("#emailOptional") - .val() - .toString(); + const email = (document.getElementById("emailOptional") as HTMLInputElement).value; const emailArray = [email]; Office.context.mailbox.item.optionalAttendees.setAsync(emailArray, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { diff --git a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml index c7deebc2..5773f7fc 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml @@ -31,9 +31,7 @@ script: } function setRequiredAttendees() { - const email = $("#emailRequired") - .val() - .toString(); + const email = (document.getElementById("emailRequired") as HTMLInputElement).value; const emailArray = [email]; Office.context.mailbox.item.requiredAttendees.setAsync(emailArray, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { diff --git a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml index 3164d9d2..8ff0b7f5 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml @@ -25,9 +25,7 @@ script: } function setTo() { - const email = $("#emailTo") - .val() - .toString(); + const email = (document.getElementById("emailTo") as HTMLInputElement).value; const emailArray = [email]; Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { diff --git a/samples/outlook/35-notifications/add-getall-remove.yaml b/samples/outlook/35-notifications/add-getall-remove.yaml index 4b1d1bc4..84cdf820 100644 --- a/samples/outlook/35-notifications/add-getall-remove.yaml +++ b/samples/outlook/35-notifications/add-getall-remove.yaml @@ -17,7 +17,7 @@ script: function addProgress() { // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; const details = { type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator, @@ -28,7 +28,7 @@ script: function addInformational() { // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; const details = { type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, @@ -41,7 +41,7 @@ script: function addInformationalPersisted() { // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; const details = { type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, @@ -54,7 +54,7 @@ script: function addInsight() { // Adds an informational message with actions to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; const itemId = Office.context.mailbox.item.itemId; const details = { @@ -77,7 +77,7 @@ script: function addError() { // Adds an error notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; const details = { type: Office.MailboxEnums.ItemNotificationMessageType.ErrorMessage, @@ -100,7 +100,7 @@ script: function replace() { // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, { @@ -114,7 +114,7 @@ script: function remove() { // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); } diff --git a/samples/outlook/40-attachments/attachments-compose.yaml b/samples/outlook/40-attachments/attachments-compose.yaml index 5479fdea..4896c2b5 100644 --- a/samples/outlook/40-attachments/attachments-compose.yaml +++ b/samples/outlook/40-attachments/attachments-compose.yaml @@ -12,9 +12,7 @@ script: document.getElementById("remove").addEventListener("click", remove); function add() { - const attachmentUrl = $("#attachmentUrl") - .val() - .toString(); + const attachmentUrl = (document.getElementById("attachmentUrl") as HTMLInputElement).value; Office.context.mailbox.item.addFileAttachmentAsync( attachmentUrl, getFileName(attachmentUrl), @@ -85,9 +83,7 @@ script: function remove() { Office.context.mailbox.item.removeAttachmentAsync( - $("#attachmentId") - .val() - .toString(), + (document.getElementById("attachmentId") as HTMLInputElement).value, (result) => { if (result.status === Office.AsyncResultStatus.Failed) { console.error(result.error.message); diff --git a/samples/outlook/55-display-items/display-existing-appointment.yaml b/samples/outlook/55-display-items/display-existing-appointment.yaml index eede487c..c3e0b1e8 100644 --- a/samples/outlook/55-display-items/display-existing-appointment.yaml +++ b/samples/outlook/55-display-items/display-existing-appointment.yaml @@ -8,18 +8,18 @@ api_set: script: content: |- // Pre-populate with current item ID. - $("#itemId").val(Office.context.mailbox.item.itemId); + (document.getElementById("itemId") as HTMLInputElement).value = Office.context.mailbox.item.itemId; document.getElementById("run").addEventListener("click", run); document.getElementById("run-async").addEventListener("click", runAsync); function run() { - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as HTMLInputElement).value; Office.context.mailbox.displayAppointmentForm(itemId); } function runAsync() { - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as HTMLInputElement).value; // The async version will return error 9049 if the item is not found. // The async version is only available starting with requirement set 1.9. diff --git a/samples/outlook/55-display-items/display-existing-message.yaml b/samples/outlook/55-display-items/display-existing-message.yaml index 555f667b..80e96c50 100644 --- a/samples/outlook/55-display-items/display-existing-message.yaml +++ b/samples/outlook/55-display-items/display-existing-message.yaml @@ -8,18 +8,18 @@ api_set: script: content: |- // Pre-populate with current item ID. - $("#itemId").val(Office.context.mailbox.item.itemId); + (document.getElementById("itemId") as HTMLInputElement).value = Office.context.mailbox.item.itemId; document.getElementById("run").addEventListener("click", run); document.getElementById("run-async").addEventListener("click", runAsync); function run() { - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as HTMLInputElement).value; Office.context.mailbox.displayMessageForm(itemId); } function runAsync() { - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as HTMLInputElement).value; // The async version will return error 9049 if the item is not found. // The async version is only available starting with requirement set 1.9. diff --git a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml index 8e861259..3177c168 100644 --- a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml +++ b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml @@ -53,7 +53,7 @@ script: function setSignature() { // Set the signature for the current item. - const signature = $("#signature").val(); + const signature = (document.getElementById("signature") as HTMLInputElement).value; console.log(`Setting signature to "${signature}".`); Office.context.mailbox.item.body.setSignatureAsync(signature, function(asyncResult) { if (asyncResult.status === Office.AsyncResultStatus.Succeeded) { @@ -73,7 +73,7 @@ script: { isInline: true }, function(result) { if (result.status == Office.AsyncResultStatus.Succeeded) { - const signature = $("#signature").val() + ""; + const signature = (document.getElementById("signature") as HTMLInputElement).value + ""; console.log(`Setting signature to "${signature}".`); Office.context.mailbox.item.body.setSignatureAsync( signature, diff --git a/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml b/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml index ea9d44c1..cdac8aa8 100644 --- a/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml +++ b/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml @@ -13,9 +13,7 @@ script: function setDisplayedBody() { // This snippet temporarily sets the content displayed in the body of a message in read mode. // The set content will remain visible until the user switches to a different message in the Reading Pane or closes the window of the current message. - const bodyText = $("#body-text-field") - .val() - .toString(); + const bodyText = (document.getElementById("body-text-field") as HTMLInputElement).value; Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { console.log(`Action failed with error: ${asyncResult.error.message}`); @@ -29,9 +27,7 @@ script: function setDisplayedSubject() { // This snippet temporarily sets the content displayed in the subject field of a message in read mode. // The set content will remain visible until the user switches to a different message in the Reading Pane or closes the window of the current message. - const subjectText = $("#subject-text-field") - .val() - .toString(); + const subjectText = (document.getElementById("subject-text-field") as HTMLInputElement).value; Office.context.mailbox.item.display.subject.setAsync(subjectText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { console.log(`Action failed with error: ${asyncResult.error.message}`); diff --git a/samples/powerpoint/document/create-presentation.yaml b/samples/powerpoint/document/create-presentation.yaml index 6011dfb8..678eb64d 100644 --- a/samples/powerpoint/document/create-presentation.yaml +++ b/samples/powerpoint/document/create-presentation.yaml @@ -8,14 +8,14 @@ api_set: script: content: |- document.getElementById("create-new-blank-presentation").addEventListener("click", () => tryCatch(createBlankPresentation)); - $("#file").on("change", () => tryCatch(createPresentationFromExisting)); + document.getElementById("file").addEventListener("change", () => tryCatch(createPresentationFromExisting)); function createBlankPresentation() { PowerPoint.createPresentation(); } function createPresentationFromExisting() { - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/powerpoint/images/insert-image.yaml b/samples/powerpoint/images/insert-image.yaml index a42fb4a3..f0677e89 100644 --- a/samples/powerpoint/images/insert-image.yaml +++ b/samples/powerpoint/images/insert-image.yaml @@ -7,7 +7,7 @@ host: POWERPOINT api_set: {} script: content: |- - $('#insert').on("click", run); + document.getElementById('insert').addEventListener("click", run); function run() { Office.context.document.setSelectedDataAsync(getImageAsBase64String(), { diff --git a/samples/powerpoint/images/insert-svg.yaml b/samples/powerpoint/images/insert-svg.yaml index ced98b54..4cbc8c87 100644 --- a/samples/powerpoint/images/insert-svg.yaml +++ b/samples/powerpoint/images/insert-svg.yaml @@ -7,7 +7,7 @@ host: POWERPOINT api_set: {} script: content: |- - $('#insert').on("click", newImage); + document.getElementById('insert').addEventListener("click", newImage); function newImage() { Office.context.document.setSelectedDataAsync(getImageAsBase64String(), { diff --git a/samples/powerpoint/scenarios/searches-wikipedia-api.yaml b/samples/powerpoint/scenarios/searches-wikipedia-api.yaml index ec3f02be..e2883fb5 100644 --- a/samples/powerpoint/scenarios/searches-wikipedia-api.yaml +++ b/samples/powerpoint/scenarios/searches-wikipedia-api.yaml @@ -12,114 +12,144 @@ script: */ declare let moment: any; + document.getElementById("search").addEventListener("click", run); async function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, {}, getSelectedText); } - /* Extract selected text and call SearchWiki */ + /* Extract selected text and call SearchWiki. */ function getSelectedText(result) { - $("#result").empty(); - $("#result").append(''); + const resultElement = document.getElementById("result"); + if (resultElement) { + resultElement.innerHTML = ""; + const listElement = document.createElement("ul"); + listElement.className = "ms-List"; + listElement.id = "ms-List"; // Ensure the list has an ID for later reference + resultElement.appendChild(listElement); + } + if (result.status === Office.AsyncResultStatus.Succeeded) { searchWiki(result.value); } else { console.error(result.error.message); - } + } } - /* Searching Wiki */ - + /* Searching Wiki. */ function searchWiki(pattern) { - let url = build_wiki_search_url(pattern); + const url = build_wiki_search_url(pattern); fetch(url) - .then((response) => { - return response.json(); - }) + .then((response) => response.json()) .then((data) => { - $.each(data.query.search, function(i, val) { - let date = moment(val.timestamp).format("YYYY-MM-DD hh:mm A"); - let listItem = build_list_item(val.title, val.pageid, val.snippet, date); - $(".ms-List").append(listItem); + data.query.search.forEach((val) => { + const date = moment(val.timestamp).format("YYYY-MM-DD hh:mm A"); + const listItem = build_list_item(val.title, val.pageid, val.snippet, date); + const listElement = document.getElementById("ms-List"); + if (listElement) { + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = listItem; + const listItemNode = tempDiv.firstElementChild; + if (listItemNode) { + listElement.appendChild(listItemNode); + } + } }); + return data.query; }) - .then(function(data) { - $(".ms-ListItem").each(function(i, item) { - if ($(this).find(".listItem-link a").length === 0) { - getWikiLink($(this).data("pageid"), $(this)); + .then((data) => { + const listItems = document.querySelectorAll(".ms-ListItem"); + listItems.forEach((item) => { + const link = item.querySelector(".listItem-link a"); + if (!link || link.innerHTML.length === 0) { + const pageId = item instanceof HTMLElement ? item.dataset.pageid : undefined; + if (pageId) { + getWikiLink(pageId, item); + } } }); - }); + }) + .catch((error) => console.error("Error fetching Wikipedia data:", error)); } - // Search for Wiki Page link based on the given pageId - // Update itemHTML from the returned result - + // Search for Wiki Page link based on the given pageId. + // Update itemHTML from the returned result. function getWikiLink(pageid, itemHTML) { - let pageinfo = build_wiki_pageinfo(pageid); + const pageinfo = build_wiki_pageinfo(pageid); fetch(pageinfo) - .then((response) => { - return response.json(); - }) + .then((response) => response.json()) .then((data) => { - let itemUrl = data.query.pages[pageid].fullurl; - let images = data.query.pages[pageid].images; - let title = $(itemHTML) - .find(".listItem-link") - .html(); - $(itemHTML) - .find(".listItem-link") - .html('' + title + ""); - if (typeof images !== "undefined") { - $(itemHTML) - .find(".ms-ListItem-image") - .attr("data-image", images[0].title); + const itemUrl = data.query.pages[pageid].fullurl; + const images = data.query.pages[pageid].images; + const titleElement = itemHTML.querySelector(".listItem-link"); + const title = titleElement ? titleElement.innerHTML : ""; + + if (titleElement && itemUrl) { + titleElement.innerHTML = `${title}`; + } + + if (images && images.length > 0) { + const imageElement = itemHTML.querySelector(".ms-ListItem-image"); + if (imageElement) { + imageElement.setAttribute("data-image", images[0].title); + } } }) - .then((data) => { + .then(() => { getWikiImages(pageid, itemHTML); - }); + }) + .catch((error) => console.error("Error fetching Wiki link:", error)); } - // Search for Wiki image based on the given pageId, first image - // Update itemHTML from the returned result - + // Search for Wiki image based on the given pageId, first image. + // Update itemHTML from the returned result. function getWikiImages(pageid, itemHTML) { - let pageInfo = build_wiki_image_search(pageid); + const pageInfo = build_wiki_image_search(pageid); fetch(pageInfo) - .then((response) => { - return response.json(); - }) + .then((response) => response.json()) .then(async (data) => { - if (typeof data.query.pages[pageid].original !== "undefined") { - let img = data.query.pages[pageid].original.source; - $(itemHTML) - .find(".ms-ListItem-image") - .append(''); - return true; + const pageData = data.query.pages[pageid]; + if (pageData && pageData.original && pageData.original.source) { + const originalImage = pageData.original.source; + const imageElement = itemHTML.querySelector(".ms-ListItem-image"); + + if (originalImage && imageElement) { + const imgElement = document.createElement("img"); + imgElement.width = 70; // Set the width to 70px. + imgElement.src = originalImage; + imageElement.appendChild(imgElement); + return true; + } } else { - let img = $(itemHTML) - .find(".ms-ListItem-image") - .data("image"); - pageInfo = build_wiki_file_search(img); - let pageInfoResult = await fetch(pageInfo); - return pageInfoResult.json(); + const imageElement = itemHTML.querySelector(".ms-ListItem-image"); + const img = imageElement ? imageElement.dataset.image : undefined; + if (img) { + const pageInfoResult = await fetch(build_wiki_file_search(img)); + return pageInfoResult.json(); + } } }) .then((data) => { - if (typeof data.query !== "undefined") { - let key = Object.keys(data.query.pages)[0]; - if (data.query.pages[key].title !== "Undefined") { - let img = data.query.pages[key].thumbnail.source; - $(itemHTML) - .find(".ms-ListItem-image") - .append(''); + if (data && data.query) { + const key = Object.keys(data.query.pages)[0]; + const page = data.query.pages[key]; + if (page && page.thumbnail && page.thumbnail.source) { + const thumbnail = page.thumbnail.source; + const imageElement = itemHTML.querySelector(".ms-ListItem-image"); + + if (thumbnail && imageElement) { + const imgElement = document.createElement("img"); + imgElement.width = 70; // Set the width to 70px. + imgElement.src = thumbnail; + imageElement.appendChild(imgElement); + } } } - }); + }) + .catch((error) => console.error("Error fetching Wiki images:", error)); } /* Wikipedia API query */ @@ -131,52 +161,45 @@ script: /* Wikipedia Search Query pattern */ function build_wiki_search_url(pattern) { - let qry = "pageimages&list=search&srsearch="; + const qry = "pageimages&list=search&srsearch="; return wiki_base(qry + pattern); } /* Wikipedia Image Query pattern */ function build_wiki_image_search(pattern) { - let qry = "pageimages&piprop=original&pilicense=any&pageids="; + const qry = "pageimages&piprop=original&pilicense=any&pageids="; return wiki_base(qry + pattern); } /* Wikipedia File Query pattern */ function build_wiki_file_search(pattern) { - let qry = "pageimages|pageterms&pilicense=any&titles="; + const qry = "pageimages|pageterms&pilicense=any&titles="; return wiki_base(qry + pattern); } /* Wikipedia Page Info Query pattern */ function build_wiki_pageinfo(pattern) { - let qry = "info|images&inprop=url&pageids="; + const qry = "info|images&inprop=url&pageids="; return wiki_base(qry + pattern); } /* Render */ function build_list_item(title, pageid, summary, ts) { - return ( - '
  • ' + - '
    ' + - '' + - title + - "" + - "" + - summary + - "" + - '
    ' + - '
    ' + - '
    ' + - ' ' + - "
    " + - '
    ' + - ' ' + - "
    " + - "
    " + - "
    • " - ); + return ` +
  • +
    + ${title} + ${summary} +
    +
    +
    + +
    +
    + +
    +
    +
    • `; } language: typescript template: @@ -225,5 +248,4 @@ libraries: |- https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js \ No newline at end of file diff --git a/samples/powerpoint/shapes/get-set-shapes.yaml b/samples/powerpoint/shapes/get-set-shapes.yaml index 3a6dc8d9..6d472a56 100644 --- a/samples/powerpoint/shapes/get-set-shapes.yaml +++ b/samples/powerpoint/shapes/get-set-shapes.yaml @@ -31,8 +31,9 @@ script: finalTable += "" + index + "" + shape.id + ""; }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = ""; + outputSpan.innerHTML += finalTable; }); } @@ -134,8 +135,13 @@ script: rectangle.fill.foregroundColor = generateRandomHexColor(); } finalTable += "Done
    "; - $("#slide-tags").empty(); - $("#slide-tags").append(finalTable); + const slideTags = document.getElementById("slide-tags"); + if (slideTags) { + slideTags.innerHTML = ""; + slideTags.innerHTML += finalTable; + } else { + console.warn('Element with ID "slide-tags" not found.'); + } }); } diff --git a/samples/powerpoint/slide-management/add-slides.yaml b/samples/powerpoint/slide-management/add-slides.yaml index 74e68bd1..8a4027b1 100644 --- a/samples/powerpoint/slide-management/add-slides.yaml +++ b/samples/powerpoint/slide-management/add-slides.yaml @@ -11,8 +11,8 @@ script: document.getElementById("add-slide").addEventListener("click", () => tryCatch(addSlide)); async function addSlide() { - const chosenMaster = $("#master-id").val() as string; - const chosenLayout = $("#layout-id").val() as string; + const chosenMaster = (document.getElementById("master-id") as HTMLInputElement).value; + const chosenLayout = (document.getElementById("layout-id") as HTMLInputElement).value; await PowerPoint.run(async function(context) { // Create a new slide using an existing master slide and layout. diff --git a/samples/powerpoint/slide-management/get-set-slides.yaml b/samples/powerpoint/slide-management/get-set-slides.yaml index d797ed57..b4a63000 100644 --- a/samples/powerpoint/slide-management/get-set-slides.yaml +++ b/samples/powerpoint/slide-management/get-set-slides.yaml @@ -28,9 +28,11 @@ script: allSlidesList[slide.id] = `Slide ${index + 1}`; }); - if ($("#id-check-usenative").is(":checked")) { + const checkbox = document.getElementById("id-check-usenative") as HTMLInputElement; + if (checkbox && checkbox.checked) { context.presentation.load("tags"); } + const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides(); const slideCount = slides.getCount(); slides.load("items"); @@ -42,8 +44,9 @@ script: finalTable += "" + index + " - " + allSlidesList[slide.id] + "" + slide.id + ""; }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); } async function deleteSlides() { @@ -105,8 +108,9 @@ script: savedSlideSelection.push(slide.id); }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); } diff --git a/samples/powerpoint/slide-management/insert-slides.yaml b/samples/powerpoint/slide-management/insert-slides.yaml index d247a007..5ce70848 100644 --- a/samples/powerpoint/slide-management/insert-slides.yaml +++ b/samples/powerpoint/slide-management/insert-slides.yaml @@ -9,7 +9,7 @@ script: content: |- document.getElementById("insert-all-slides").addEventListener("click", () => tryCatch(insertAllSlides)); document.getElementById("insert-after-target-slide").addEventListener("click", () => tryCatch(insertAfterSelectedSlide)); - $("#file").on("change", () => tryCatch(storeFileAsBase64)); + document.getElementById("file").addEventListener("change", () => tryCatch(storeFileAsBase64)); let chosenFileBase64; diff --git a/samples/powerpoint/text/get-set-textrange.yaml b/samples/powerpoint/text/get-set-textrange.yaml index 2cfed52f..b7391c14 100644 --- a/samples/powerpoint/text/get-set-textrange.yaml +++ b/samples/powerpoint/text/get-set-textrange.yaml @@ -44,8 +44,9 @@ script: finalTable += "Start" + textRange.start + ""; finalTable += "Length" + textRange.length + ""; finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); } diff --git a/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml index a0fee9f6..734cdc38 100644 --- a/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml +++ b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml @@ -29,10 +29,7 @@ script: async function addItemToComboBoxContentControl() { // Adds the provided list item to the first combo box content control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -99,10 +96,7 @@ script: async function deleteItemFromComboBoxContentControl() { // Deletes the provided list item from the first combo box content control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ diff --git a/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml index 36532629..d18f95f5 100644 --- a/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml +++ b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml @@ -29,10 +29,7 @@ script: async function addItemToDropdownListContentControl() { // Adds the provided list item to the first dropdown list content control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -99,10 +96,7 @@ script: async function deleteItemFromDropdownListContentControl() { // Deletes the provided list item from the first dropdown list content control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ diff --git a/samples/word/20-lists/manage-list-styles.yaml b/samples/word/20-lists/manage-list-styles.yaml index 99e7eab6..915b657f 100644 --- a/samples/word/20-lists/manage-list-styles.yaml +++ b/samples/word/20-lists/manage-list-styles.yaml @@ -32,7 +32,7 @@ script: async function getProperties() { // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; diff --git a/samples/word/25-paragraph/onadded-event.yaml b/samples/word/25-paragraph/onadded-event.yaml index 170cee03..e7f3d34c 100644 --- a/samples/word/25-paragraph/onadded-event.yaml +++ b/samples/word/25-paragraph/onadded-event.yaml @@ -32,7 +32,7 @@ script: async function getParagraphById() { await Word.run(async (context) => { - const paragraphId = $("#paragraph-id").val() as string; + const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value; const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId); paragraph.load(); await paragraph.context.sync(); diff --git a/samples/word/25-paragraph/onchanged-event.yaml b/samples/word/25-paragraph/onchanged-event.yaml index c6cccd41..1b0cd1dd 100644 --- a/samples/word/25-paragraph/onchanged-event.yaml +++ b/samples/word/25-paragraph/onchanged-event.yaml @@ -32,7 +32,7 @@ script: async function getParagraphById() { await Word.run(async (context) => { - const paragraphId = $("#paragraph-id").val() as string; + const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value; const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId); paragraph.load(); await paragraph.context.sync(); diff --git a/samples/word/40-tables/manage-custom-style.yaml b/samples/word/40-tables/manage-custom-style.yaml index 866087b3..4968defd 100644 --- a/samples/word/40-tables/manage-custom-style.yaml +++ b/samples/word/40-tables/manage-custom-style.yaml @@ -22,7 +22,7 @@ script: async function addStyle() { // Adds a new table style. - const newStyleName = $("#new-style-name").val() as string; + const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value; if (newStyleName == "") { console.warn("Enter a style name to add."); return; @@ -49,7 +49,7 @@ script: async function applyStyle() { // Applies the specified style to a new table. - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -83,9 +83,7 @@ script: async function getTableStyle() { // Gets the table style properties and displays them in the form. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; @@ -102,30 +100,26 @@ script: } console.log(tableStyle); - $("#alignment").val(tableStyle.alignment); - $("#allow-break-across-page").val(tableStyle.allowBreakAcrossPage.toString()); - $("#top-cell-margin").val(tableStyle.topCellMargin); - $("#bottom-cell-margin").val(tableStyle.bottomCellMargin); - $("#left-cell-margin").val(tableStyle.leftCellMargin); - $("#right-cell-margin").val(tableStyle.rightCellMargin); - $("#cell-spacing").val(tableStyle.cellSpacing); + (document.getElementById("alignment") as HTMLInputElement).value = tableStyle.alignment; + (document.getElementById("allow-break-across-page") as HTMLInputElement).value = tableStyle.allowBreakAcrossPage.toString(); + (document.getElementById("top-cell-margin") as HTMLInputElement).value = tableStyle.topCellMargin; + (document.getElementById("bottom-cell-margin") as HTMLInputElement).value = tableStyle.bottomCellMargin; + (document.getElementById("left-cell-margin") as HTMLInputElement).value = tableStyle.leftCellMargin; + (document.getElementById("right-cell-margin") as HTMLInputElement).value = tableStyle.rightCellMargin; + (document.getElementById("cell-spacing") as HTMLInputElement).value = tableStyle.cellSpacing; }); } async function setAlignment() { // Sets the table alignment. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const alignment = $("#alignment") - .val() - .toString(); + const alignment = (document.getElementById("alignment") as HTMLInputElement).value; const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.alignment = alignment as Word.Alignment; await context.sync(); @@ -138,16 +132,14 @@ script: async function setAllowBreakAcrossPage() { // Sets the allowBreakAcrossPage property. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const allowBreakAcrossPage = $("#allow-break-across-page").val() as string; + const allowBreakAcrossPage = (document.getElementById("allow-break-across-page") as HTMLInputElement).value; const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.allowBreakAcrossPage = allowBreakAcrossPage === "true"; await context.sync(); @@ -160,20 +152,14 @@ script: async function setTopCellMargin() { // Sets the top cell margin. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const topCellMargin = Number( - $("#top-cell-margin") - .val() - .toString() - ); + const topCellMargin = Number((document.getElementById("top-cell-margin") as HTMLInputElement).value); const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.topCellMargin = topCellMargin; await context.sync(); @@ -186,20 +172,14 @@ script: async function setBottomCellMargin() { // Sets the bottom cell margin. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const bottomCellMargin = Number( - $("#bottom-cell-margin") - .val() - .toString() - ); + const bottomCellMargin = Number((document.getElementById("bottom-cell-margin") as HTMLInputElement).value); const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.bottomCellMargin = bottomCellMargin; await context.sync(); @@ -212,20 +192,14 @@ script: async function setLeftCellMargin() { // Sets the left cell margin. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const leftCellMargin = Number( - $("#left-cell-margin") - .val() - .toString() - ); + const leftCellMargin = Number((document.getElementById("left-cell-margin") as HTMLInputElement).value); const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.leftCellMargin = leftCellMargin; await context.sync(); @@ -238,20 +212,14 @@ script: async function setRightCellMargin() { // Sets the right cell margin. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const rightCellMargin = Number( - $("#right-cell-margin") - .val() - .toString() - ); + const rightCellMargin = Number((document.getElementById("right-cell-margin") as HTMLInputElement).value); const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.rightCellMargin = rightCellMargin; await context.sync(); @@ -264,20 +232,14 @@ script: async function setCellSpacing() { // Sets the cell spacing. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Please input a table style name."); return; } await Word.run(async (context) => { - const cellSpacing = Number( - $("#cell-spacing") - .val() - .toString() - ); + const cellSpacing = Number((document.getElementById("cell-spacing") as HTMLInputElement).value); const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle; tableStyle.cellSpacing = cellSpacing; await context.sync(); @@ -290,7 +252,7 @@ script: async function deleteStyle() { // Deletes the custom style. - const styleName = $("#style-name-to-delete").val() as string; + const styleName = (document.getElementById("style-name-to-delete") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to delete."); return; diff --git a/samples/word/50-document/compare-documents.yaml b/samples/word/50-document/compare-documents.yaml index 5d5d3afa..988b3488 100644 --- a/samples/word/50-document/compare-documents.yaml +++ b/samples/word/50-document/compare-documents.yaml @@ -14,9 +14,7 @@ script: // Compares the current document with a specified external document. await Word.run(async (context) => { // Absolute path of an online or local document. - const filePath = $("#filePath") - .val() - .toString(); + const filePath = (document.getElementById("filePath") as HTMLInputElement).value; // Options that configure the compare operation. const options: Word.DocumentCompareOptions = { compareTarget: Word.CompareTarget.compareTargetCurrent, diff --git a/samples/word/50-document/get-external-styles.yaml b/samples/word/50-document/get-external-styles.yaml index 41677d3c..63fad088 100644 --- a/samples/word/50-document/get-external-styles.yaml +++ b/samples/word/50-document/get-external-styles.yaml @@ -7,7 +7,7 @@ api_set: WordApi: '1.5' script: content: |- - $("#file").on("change", getBase64); + document.getElementById("file").addEventListener("change", getBase64); document.getElementById("get-external-styles").addEventListener("click", () => tryCatch(getExternalStyles)); let externalDocument; @@ -24,7 +24,7 @@ script: function getBase64() { // Retrieve the file and set up an HTML FileReader element. - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/word/50-document/insert-external-document.yaml b/samples/word/50-document/insert-external-document.yaml index 2c8f00b6..7e374a5f 100644 --- a/samples/word/50-document/insert-external-document.yaml +++ b/samples/word/50-document/insert-external-document.yaml @@ -7,7 +7,7 @@ api_set: WordApi: '1.7' script: content: |- - $("#file").on("change", getBase64); + document.getElementById("file").addEventListener("change", getBase64); document.getElementById("insert-document").addEventListener("click", () => tryCatch(insertDocument)); document.getElementById("insert-document-with-settings").addEventListener("click", () => tryCatch(insertDocumentWithSettings)); @@ -57,7 +57,7 @@ script: function getBase64() { // Retrieve the file and set up an HTML FileReader element. - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/word/50-document/manage-body.yaml b/samples/word/50-document/manage-body.yaml index 6f83be49..18b7b14c 100644 --- a/samples/word/50-document/manage-body.yaml +++ b/samples/word/50-document/manage-body.yaml @@ -14,7 +14,7 @@ script: document.getElementById("get-text").addEventListener("click", () => tryCatch(getText)); document.getElementById("insert-content-control").addEventListener("click", () => tryCatch(insertContentControl)); document.getElementById("insert-page-break").addEventListener("click", () => tryCatch(insertPageBreak)); - $("#file").on("change", getBase64); + document.getElementById("file").addEventListener("change", getBase64); document.getElementById("insert-external-body").addEventListener("click", () => tryCatch(insertExternalBody)); document.getElementById("insert-html").addEventListener("click", () => tryCatch(insertHTML)); document.getElementById("insert-image-inline").addEventListener("click", () => tryCatch(insertImageInline)); @@ -142,7 +142,7 @@ script: function getBase64() { // Retrieve the file and set up an HTML FileReader element. - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); reader.onload = (event) => { diff --git a/samples/word/50-document/manage-change-tracking.yaml b/samples/word/50-document/manage-change-tracking.yaml index 20fc5ead..e2651907 100644 --- a/samples/word/50-document/manage-change-tracking.yaml +++ b/samples/word/50-document/manage-change-tracking.yaml @@ -32,7 +32,7 @@ script: async function setChangeTrackingMode() { // Sets the change tracking mode. await Word.run(async (context) => { - const mode = $("input[name='mode']:checked").val(); + const mode = (document.querySelector("input[name='mode']:checked") as HTMLInputElement).value; if (mode === "Track only my changes") { context.document.changeTrackingMode = Word.ChangeTrackingMode.trackMineOnly; } else if (mode === "Track everyone's changes") { diff --git a/samples/word/50-document/manage-comments.yaml b/samples/word/50-document/manage-comments.yaml index 7593ebb4..420e05e7 100644 --- a/samples/word/50-document/manage-comments.yaml +++ b/samples/word/50-document/manage-comments.yaml @@ -21,9 +21,7 @@ script: async function insertComment() { // Sets a comment on the selected content. await Word.run(async (context) => { - const text = $("#comment-text") - .val() - .toString(); + const text = (document.getElementById("comment-text") as HTMLInputElement).value; const comment: Word.Comment = context.document.getSelection().insertComment(text); // Load object to log in the console. @@ -37,9 +35,7 @@ script: async function editFirstCommentInSelection() { // Edits the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#edit-comment-text") - .val() - .toString(); + const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -63,9 +59,7 @@ script: async function replyToFirstActiveCommentInSelection() { // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); diff --git a/samples/word/50-document/manage-footnotes.yaml b/samples/word/50-document/manage-footnotes.yaml index 89ece99b..b5ff910a 100644 --- a/samples/word/50-document/manage-footnotes.yaml +++ b/samples/word/50-document/manage-footnotes.yaml @@ -21,9 +21,7 @@ script: async function insertFootnote() { // Sets a footnote on the selected content. await Word.run(async (context) => { - const text = $("#input-footnote") - .val() - .toString(); + const text = (document.getElementById("input-footnote") as HTMLInputElement).value; const footnote: Word.NoteItem = context.document.getSelection().insertFootnote(text); await context.sync(); @@ -37,7 +35,7 @@ script: footnotes.load("items/reference"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; const reference: Word.Range = item.reference; @@ -54,7 +52,7 @@ script: footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; console.log(`Note type of footnote ${referenceNumber}: ${item.type}`); @@ -72,7 +70,7 @@ script: footnotes.load("items/body"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const footnoteBody: Word.Range = footnotes.items[mark].body.getRange(); footnoteBody.load("text"); @@ -88,7 +86,7 @@ script: footnotes.load("items/reference"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const reference: Word.Range = footnotes.items[mark].getNext().reference; reference.select(); @@ -102,7 +100,7 @@ script: footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; footnotes.items[mark].delete(); await context.sync(); diff --git a/samples/word/50-document/manage-settings.yaml b/samples/word/50-document/manage-settings.yaml index b80adc65..bdb6df93 100644 --- a/samples/word/50-document/manage-settings.yaml +++ b/samples/word/50-document/manage-settings.yaml @@ -15,19 +15,13 @@ script: // Adds a new custom setting or // edits the value of an existing one. await Word.run(async (context) => { - const key = $("#key") - .val() - .toString(); - + const key = (document.getElementById("key") as HTMLInputElement).value; if (key == "") { console.error("Key shouldn't be empty."); return; } - const value = $("#value") - .val() - .toString(); - + const value = (document.getElementById("value") as HTMLInputElement).value; const settings: Word.SettingCollection = context.document.settings; const setting: Word.Setting = settings.add(key, value); setting.load(); diff --git a/samples/word/50-document/manage-styles.yaml b/samples/word/50-document/manage-styles.yaml index f798edc8..3549dee2 100644 --- a/samples/word/50-document/manage-styles.yaml +++ b/samples/word/50-document/manage-styles.yaml @@ -31,7 +31,7 @@ script: async function addStyle() { // Adds a new style. await Word.run(async (context) => { - const newStyleName = $("#new-style-name").val() as string; + const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value; if (newStyleName == "") { console.warn("Enter a style name to add."); return; @@ -48,7 +48,7 @@ script: return; } - const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType; + const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType; context.document.addStyle(newStyleName, newStyleType); await context.sync(); @@ -59,7 +59,7 @@ script: async function getProperties() { // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -84,7 +84,7 @@ script: async function applyStyle() { // Applies the specified style to a paragraph. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -115,7 +115,7 @@ script: async function setFontProperties() { // Updates font properties (e.g., color, size) of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update font properties."); return; @@ -139,7 +139,7 @@ script: async function setParagraphFormat() { // Sets certain aspects of the specified style's paragraph format e.g., the left indent size and the alignment. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update its paragraph format."); return; @@ -162,7 +162,7 @@ script: async function setBorderProperties() { // Updates border properties (e.g., type, width, color) of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -190,7 +190,7 @@ script: async function setShadingProperties() { // Updates shading properties (e.g., texture, pattern colors) of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update shading properties."); return; @@ -219,7 +219,7 @@ script: async function deleteStyle() { // Deletes the custom style. await Word.run(async (context) => { - const styleName = $("#style-name-to-delete").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to delete."); return; diff --git a/samples/word/50-document/save-close.yaml b/samples/word/50-document/save-close.yaml index be15a868..41381c63 100644 --- a/samples/word/50-document/save-close.yaml +++ b/samples/word/50-document/save-close.yaml @@ -18,9 +18,7 @@ script: // Saves the document with the provided file name // if it hasn't been saved before. await Word.run(async (context) => { - const text = $("#fileName-text") - .val() - .toString(); + const text = (document.getElementById("fileName-text") as HTMLInputElement).value; context.document.save(Word.SaveBehavior.save, text); await context.sync(); }); diff --git a/samples/word/90-scenarios/correlated-objects-pattern.yaml b/samples/word/90-scenarios/correlated-objects-pattern.yaml index 5200d349..a28f2901 100644 --- a/samples/word/90-scenarios/correlated-objects-pattern.yaml +++ b/samples/word/90-scenarios/correlated-objects-pattern.yaml @@ -8,7 +8,10 @@ api_set: WordApi: '1.4' script: content: |- - document.getElementById("replace-placeholders").on("click", () => tryCatch(replacePlaceholders)); $("#replace-placeholders-slow").on("click", () => tryCatch(replacePlaceholdersSlow)); $("#setup").on("click", () => tryCatch(setup)); $("#add-lots-of-text").addEventListener("click", () => tryCatch(addLotsOfText)); + document.getElementById("replace-placeholders").addEventListener("click", () => tryCatch(replacePlaceholders)); + document.getElementById("replace-placeholders-slow").addEventListener("click", () => tryCatch(replacePlaceholdersSlow)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-lots-of-text").addEventListener("click", () => tryCatch(addLotsOfText)); const jobMapping = [ { job: "{Coordinator}", person: "Sally" }, { job: "{Deputy}", person: "Bob" }, diff --git a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml index d7445515..96f9e890 100644 --- a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml +++ b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml @@ -74,7 +74,7 @@ script: async function setState() { // Sets the state of the first content control. await Word.run(async (context) => { - const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState; + const state = ((document.getElementById("state-to-set") as HTMLSelectElement).value as unknown) as Word.ContentControlState; let firstContentControl = context.document.contentControls.getFirstOrNullObject(); await context.sync(); diff --git a/samples/word/99-preview-apis/manage-comments.yaml b/samples/word/99-preview-apis/manage-comments.yaml index 679effec..cae554af 100644 --- a/samples/word/99-preview-apis/manage-comments.yaml +++ b/samples/word/99-preview-apis/manage-comments.yaml @@ -42,9 +42,7 @@ script: async function insertComment() { // Sets a comment on the selected content. await Word.run(async (context) => { - const text = $("#comment-text") - .val() - .toString(); + const text = (document.getElementById("comment-text") as HTMLInputElement).value; const comment: Word.Comment = context.document.getSelection().insertComment(text); // Load object to log in the console. @@ -58,9 +56,7 @@ script: async function editFirstCommentInSelection() { // Edits the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#edit-comment-text") - .val() - .toString(); + const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -84,9 +80,7 @@ script: async function replyToFirstActiveCommentInSelection() { // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); diff --git a/snippet-extractor-output/snippets.yaml b/snippet-extractor-output/snippets.yaml index 07dbe8d1..0ce86d48 100644 --- a/snippet-extractor-output/snippets.yaml +++ b/snippet-extractor-output/snippets.yaml @@ -2257,7 +2257,9 @@ await context.sync(); - $(".conditional-formats").hide(); + document.querySelectorAll(".conditional-formats").forEach(element => { + element.style.display = "none"; + }); }); 'Excel.ConditionalFormatCollection#getItemAt:member(1)': - >- @@ -2772,8 +2774,8 @@ await Excel.run(async (context) => { // Get the key/value pair from the task pane. - const userKey = $("#key").text(); - const userValue = $("#value").text(); + const userKey = document.getElementById("key").textContent; + const userValue = document.getElementById("value").textContent; // Add the custom property. const customDocProperties = context.workbook.properties.custom; @@ -2803,14 +2805,14 @@ await context.sync(); if (customXmlPart.isNullObject) { - $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`); + document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`; // Delete the unneeded setting too. xmlPartIDSetting.delete(); } else { const readableXml = addLineBreaksToXML(xmlBlob.value); const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}` - $("#display-xml").text(strangeMessage); + document.getElementById("display-xml").textContent = strangeMessage; } await context.sync(); @@ -2833,7 +2835,7 @@ await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; // Store the XML part's ID in a setting. const settings = context.workbook.settings; @@ -2858,7 +2860,7 @@ await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; // Store the XML part's ID in a setting. const settings = context.workbook.settings; @@ -2887,7 +2889,7 @@ await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; await context.sync(); } }); @@ -2908,7 +2910,7 @@ await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; // Store the XML part's ID in a setting. const settings = context.workbook.settings; @@ -2923,7 +2925,7 @@ await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; const contosoNamespace = "http://schemas.contoso.com/review/1.0"; const customXmlParts = context.workbook.customXmlParts; const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace); @@ -2940,8 +2942,8 @@ // Make it a bit more readable. const readableXml = xmlBlob.value.replace(/>\n<"); - $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is: - ${readableXml}`); + document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is: + ${readableXml}`; } else { console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`); @@ -2970,7 +2972,7 @@ await context.sync(); const readableXml = addLineBreaksToXML(xmlBlob.value); - $("#display-xml").text(readableXml); + document.getElementById("display-xml").textContent = readableXml; await context.sync(); } }); @@ -2981,7 +2983,7 @@ await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; const contosoNamespace = "http://schemas.contoso.com/review/1.0"; const customXmlParts = context.workbook.customXmlParts; const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace); @@ -2998,8 +3000,8 @@ // Make it a bit more readable. const readableXml = xmlBlob.value.replace(/>\n<"); - $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is: - ${readableXml}`); + document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is: + ${readableXml}`; } else { console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`); @@ -3027,14 +3029,14 @@ await context.sync(); if (customXmlPart.isNullObject) { - $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`); + document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`; // Delete the unneeded setting too. xmlPartIDSetting.delete(); } else { const readableXml = addLineBreaksToXML(xmlBlob.value); const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}` - $("#display-xml").text(strangeMessage); + document.getElementById("display-xml").textContent = strangeMessage; } await context.sync(); @@ -3047,7 +3049,7 @@ await Excel.run(async (context) => { - $("#display-xml").text(""); + document.getElementById("display-xml").textContent = ""; const contosoNamespace = "http://schemas.contoso.com/review/1.0"; const customXmlParts = context.workbook.customXmlParts; const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace); @@ -3064,8 +3066,8 @@ // Make it a bit more readable. const readableXml = xmlBlob.value.replace(/>\n<"); - $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is: - ${readableXml}`); + document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is: + ${readableXml}`; } else { console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`); @@ -4931,7 +4933,8 @@ // NOTE: If no match is found, an ItemNotFound error // is thrown when Range.find is evaluated. - const foundRange = searchRange.find($("#searchText").val().toString(), { + const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value; + const foundRange = searchRange.find(searchText, { completeMatch: isCompleteMatchToggle, matchCase: isMatchCaseToggle, searchDirection: searchDirectionToggle @@ -4953,7 +4956,8 @@ const sheet = context.workbook.worksheets.getItem("Sample"); const table = sheet.tables.getItem("ExpensesTable"); const searchRange = table.getRange(); - const foundRange = searchRange.findOrNullObject($("#searchText").val().toString(), { + const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value; + const foundRange = searchRange.findOrNullObject(searchText, { completeMatch: isCompleteMatchToggle, matchCase: isMatchCaseToggle, searchDirection: searchDirectionToggle @@ -6343,7 +6347,7 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml - const myFile = document.getElementById("selectedFile"); + const myFile = document.getElementById("selectedFile") as HTMLInputElement; const reader = new FileReader(); @@ -7051,8 +7055,8 @@ await Excel.run(async (context) => { // Retrieve image data from the task pane and then clear the input fields. - const imageUrl = $("#url").val() as string; - const imageAltText = $("#alt-text").val() as string; + const imageUrl = (document.getElementById("url") as HTMLInputElement).value; + const imageAltText = (document.getElementById("alt-text") as HTMLInputElement).value; clearForm(); // Load the active cell. @@ -7123,7 +7127,7 @@ // Retrieve the file and set up an HTML FileReader element. - const myFile = document.getElementById("file"); + const myFile = document.getElementById("file") as HTMLInputElement; const reader = new FileReader(); @@ -7903,8 +7907,8 @@ await Excel.run(async (context) => { // Get the key/value pair from the task pane. - const userKey = $("#key").text(); - const userValue = $("#value").text(); + const userKey = document.getElementById("key").textContent; + const userValue = document.getElementById("value").textContent; // Add the custom property. const customWorksheetProperties = context.workbook.worksheets.getActiveWorksheet().customProperties; @@ -8124,9 +8128,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml - const attachmentUrl = $("#attachmentUrl") - .val() - .toString(); + const attachmentUrl = (document.getElementById("attachmentUrl") as + HTMLInputElement).value; + Office.context.mailbox.item.addFileAttachmentAsync( attachmentUrl, getFileName(attachmentUrl), @@ -8167,7 +8171,7 @@ { isInline: true }, function(result) { if (result.status == Office.AsyncResultStatus.Succeeded) { - const signature = $("#signature").val() + ""; + const signature = (document.getElementById("signature") as HTMLInputElement).value + ""; console.log(`Setting signature to "${signature}".`); Office.context.mailbox.item.body.setSignatureAsync( signature, @@ -8617,7 +8621,8 @@ // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -8633,7 +8638,8 @@ // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -8651,7 +8657,8 @@ // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -8686,7 +8693,8 @@ // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, @@ -8704,7 +8712,8 @@ // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); @@ -8737,9 +8746,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml - const email = $("#emailOptional") - .val() - .toString(); + const email = (document.getElementById("emailOptional") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.optionalAttendees.setAsync(emailArray, @@ -8840,9 +8849,7 @@ Office.context.mailbox.item.removeAttachmentAsync( - $("#attachmentId") - .val() - .toString(), + (document.getElementById("attachmentId") as HTMLInputElement).value, (result) => { if (result.status === Office.AsyncResultStatus.Failed) { console.error(result.error.message); @@ -8881,9 +8888,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml - const email = $("#emailRequired") - .val() - .toString(); + const email = (document.getElementById("emailRequired") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.requiredAttendees.setAsync(emailArray, @@ -9566,7 +9573,8 @@ // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -9582,7 +9590,8 @@ // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -9600,7 +9609,8 @@ // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -9635,7 +9645,8 @@ // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, @@ -9653,7 +9664,8 @@ // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); @@ -9817,7 +9829,8 @@ // This snippet appends text to the end of the message or appointment's body once it's sent. - const text = $("#text-field").val(); + const text = (document.getElementById("text-field") as + HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the @@ -9904,7 +9917,8 @@ When prepending a link in HTML markup to the body, you can disable the online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, 'Click here!'. */ - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as + HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the @@ -9935,7 +9949,8 @@ // This snippet prepends text to the beginning of the message or appointment's body once it's sent. - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as + HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the @@ -10005,7 +10020,8 @@ If you want to use a link in HTML markup as a value of the setSelectedDataAsync call's data parameter, you can disable online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, 'Click here!'. */ - const text = $("#text-field").val().toString(); + const text = (document.getElementById("text-field") as + HTMLInputElement).value; // It's recommended to call getTypeAsync and pass its returned value to the @@ -10044,7 +10060,7 @@ { isInline: true }, function(result) { if (result.status == Office.AsyncResultStatus.Succeeded) { - const signature = $("#signature").val() + ""; + const signature = (document.getElementById("signature") as HTMLInputElement).value + ""; console.log(`Setting signature to "${signature}".`); Office.context.mailbox.item.body.setSignatureAsync( signature, @@ -10065,7 +10081,8 @@ // Set the signature for the current item. - const signature = $("#signature").val(); + const signature = (document.getElementById("signature") as + HTMLInputElement).value; console.log(`Setting signature to "${signature}".`); @@ -10159,7 +10176,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml - const propertyName = $("#get-property-name").val(); + const propertyName = (document.getElementById("get-property-name") as + HTMLInputElement).value; const propertyValue = customProps.get(propertyName); @@ -10187,7 +10205,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml - const propertyName = $("#remove-property-name").val(); + const propertyName = (document.getElementById("remove-property-name") as + HTMLInputElement).value; customProps.remove(propertyName); @@ -10212,9 +10231,11 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml - const propertyName = $("#set-property-name").val(); + const propertyName = (document.getElementById("set-property-name") as + HTMLInputElement).value; - const propertyValue = $("#property-value").val(); + const propertyValue = (document.getElementById("property-value") as + HTMLInputElement).value; customProps.set(propertyName, propertyValue); @@ -10312,9 +10333,9 @@ different message in the Reading Pane or closes the window of the current message. - const bodyText = $("#body-text-field") - .val() - .toString(); + const bodyText = (document.getElementById("body-text-field") as + HTMLInputElement).value; + Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { @@ -10337,9 +10358,9 @@ different message in the Reading Pane or closes the window of the current message. - const subjectText = $("#subject-text-field") - .val() - .toString(); + const subjectText = (document.getElementById("subject-text-field") as + HTMLInputElement).value; + Office.context.mailbox.item.display.subject.setAsync(subjectText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { @@ -10362,9 +10383,9 @@ different message in the Reading Pane or closes the window of the current message. - const bodyText = $("#body-text-field") - .val() - .toString(); + const bodyText = (document.getElementById("body-text-field") as + HTMLInputElement).value; + Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { @@ -10387,9 +10408,9 @@ different message in the Reading Pane or closes the window of the current message. - const subjectText = $("#subject-text-field") - .val() - .toString(); + const subjectText = (document.getElementById("subject-text-field") as + HTMLInputElement).value; + Office.context.mailbox.item.display.subject.setAsync(subjectText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { @@ -10703,7 +10724,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-appointment.yaml - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as + HTMLInputElement).value; Office.context.mailbox.displayAppointmentForm(itemId); 'Office.Mailbox#displayAppointmentFormAsync:member(1)': @@ -10712,7 +10734,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-appointment.yaml - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as + HTMLInputElement).value; // The async version will return error 9049 if the item is not found. @@ -10729,7 +10752,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-message.yaml - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as + HTMLInputElement).value; Office.context.mailbox.displayMessageForm(itemId); 'Office.Mailbox#displayMessageFormAsync:member(1)': @@ -10738,7 +10762,8 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-message.yaml - const itemId = $("#itemId").val(); + const itemId = (document.getElementById("itemId") as + HTMLInputElement).value; // The async version will return error 9049 if the item is not found. @@ -11093,7 +11118,8 @@ // Adds an informational message with actions to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const itemId = Office.context.mailbox.item.itemId; @@ -11313,7 +11339,8 @@ // Adds an error notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -11809,9 +11836,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml - const attachmentUrl = $("#attachmentUrl") - .val() - .toString(); + const attachmentUrl = (document.getElementById("attachmentUrl") as + HTMLInputElement).value; + Office.context.mailbox.item.addFileAttachmentAsync( attachmentUrl, getFileName(attachmentUrl), @@ -11826,9 +11853,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml - const attachmentUrl = $("#attachmentUrl") - .val() - .toString(); + const attachmentUrl = (document.getElementById("attachmentUrl") as + HTMLInputElement).value; + Office.context.mailbox.item.addFileAttachmentAsync( attachmentUrl, getFileName(attachmentUrl), @@ -11869,7 +11896,7 @@ { isInline: true }, function(result) { if (result.status == Office.AsyncResultStatus.Succeeded) { - const signature = $("#signature").val() + ""; + const signature = (document.getElementById("signature") as HTMLInputElement).value + ""; console.log(`Setting signature to "${signature}".`); Office.context.mailbox.item.body.setSignatureAsync( signature, @@ -11905,9 +11932,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml - const email = $("#emailBcc") - .val() - .toString(); + const email = (document.getElementById("emailBcc") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) { @@ -12013,9 +12040,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml - const email = $("#emailCc") - .val() - .toString(); + const email = (document.getElementById("emailCc") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) { @@ -12398,7 +12425,8 @@ // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -12414,7 +12442,8 @@ // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -12432,7 +12461,8 @@ // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -12467,7 +12497,8 @@ // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, @@ -12485,7 +12516,8 @@ // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); @@ -12496,9 +12528,7 @@ Office.context.mailbox.item.removeAttachmentAsync( - $("#attachmentId") - .val() - .toString(), + (document.getElementById("attachmentId") as HTMLInputElement).value, (result) => { if (result.status === Office.AsyncResultStatus.Failed) { console.error(result.error.message); @@ -12635,9 +12665,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml - const email = $("#emailTo") - .val() - .toString(); + const email = (document.getElementById("emailTo") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) { @@ -12813,9 +12843,9 @@ different message in the Reading Pane or closes the window of the current message. - const bodyText = $("#body-text-field") - .val() - .toString(); + const bodyText = (document.getElementById("body-text-field") as + HTMLInputElement).value; + Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) => { if (asyncResult.status === Office.AsyncResultStatus.Failed) { @@ -13245,7 +13275,8 @@ // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13261,7 +13292,8 @@ // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13279,7 +13311,8 @@ // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13314,7 +13347,8 @@ // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, @@ -13332,7 +13366,8 @@ // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); @@ -13455,7 +13490,8 @@ // Adds an informational message with actions to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const itemId = Office.context.mailbox.item.itemId; @@ -13504,7 +13540,8 @@ // Adds a progress indicator to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13520,7 +13557,8 @@ // Adds an informational notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13538,7 +13576,8 @@ // Adds a persistent information notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13556,7 +13595,8 @@ // Adds an error notification to the mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; const details = { @@ -13591,7 +13631,8 @@ // Removes a notification message from the current mail item. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult); @@ -13603,7 +13644,8 @@ // Replaces a notification message of a given key with another message. - const id = $("#notificationId").val().toString(); + const id = (document.getElementById("notificationId") as + HTMLInputElement).value; Office.context.mailbox.item.notificationMessages.replaceAsync( id, @@ -13729,9 +13771,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml - const email = $("#emailBcc") - .val() - .toString(); + const email = (document.getElementById("emailBcc") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) { @@ -13746,9 +13788,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml - const email = $("#emailCc") - .val() - .toString(); + const email = (document.getElementById("emailCc") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) { @@ -13763,9 +13805,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml - const email = $("#emailOptional") - .val() - .toString(); + const email = (document.getElementById("emailOptional") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.optionalAttendees.setAsync(emailArray, @@ -13781,9 +13823,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml - const email = $("#emailRequired") - .val() - .toString(); + const email = (document.getElementById("emailRequired") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.requiredAttendees.setAsync(emailArray, @@ -13799,9 +13841,9 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml - const email = $("#emailTo") - .val() - .toString(); + const email = (document.getElementById("emailTo") as + HTMLInputElement).value; + const emailArray = [email]; Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) { @@ -13985,11 +14027,13 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml - const settingName = $("#settingName").val(); + const settingName = (document.getElementById("settingName") as + HTMLInputElement).value; const settingValue = Office.context.roamingSettings.get(settingName); - $("#settingValue").val(settingValue); + (document.getElementById("settingValue") as HTMLInputElement).value = + settingValue; console.log(`The value of setting "${settingName}" is "${settingValue}".`); 'Office.RoamingSettings#saveAsync:member(1)': @@ -14013,9 +14057,11 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml - const settingName = $("#settingName").val(); + const settingName = (document.getElementById("settingName") as + HTMLInputElement).value; - const settingValue = $("#settingValue").val(); + const settingValue = (document.getElementById("settingValue") as + HTMLInputElement).value; Office.context.roamingSettings.set(settingName, settingValue); @@ -14313,9 +14359,11 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml - const chosenMaster = $("#master-id").val() as string; + const chosenMaster = (document.getElementById("master-id") as + HTMLInputElement).value; - const chosenLayout = $("#layout-id").val() as string; + const chosenLayout = (document.getElementById("layout-id") as + HTMLInputElement).value; await PowerPoint.run(async function(context) { @@ -14531,8 +14579,9 @@ finalTable += "" + index + "" + shape.id + ""; }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = ""; + outputSpan.innerHTML += finalTable; }); - >- // Link to full sample: @@ -14581,9 +14630,11 @@ allSlidesList[slide.id] = `Slide ${index + 1}`; }); - if ($("#id-check-usenative").is(":checked")) { + const checkbox = document.getElementById("id-check-usenative") as HTMLInputElement; + if (checkbox && checkbox.checked) { context.presentation.load("tags"); } + const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides(); const slideCount = slides.getCount(); slides.load("items"); @@ -14595,8 +14646,9 @@ finalTable += "" + index + " - " + allSlidesList[slide.id] + "" + slide.id + ""; }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); - >- // Link to full sample: @@ -14624,8 +14676,9 @@ savedSlideSelection.push(slide.id); }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); 'PowerPoint.Presentation#getSelectedTextRange:member(1)': - >- @@ -14665,8 +14718,9 @@ finalTable += "Start" + textRange.start + ""; finalTable += "Length" + textRange.length + ""; finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = "" + outputSpan.innerHTML += finalTable; }); - >- // Link to full sample: @@ -15151,8 +15205,13 @@ rectangle.fill.foregroundColor = generateRandomHexColor(); } finalTable += "Done
    "; - $("#slide-tags").empty(); - $("#slide-tags").append(finalTable); + const slideTags = document.getElementById("slide-tags"); + if (slideTags) { + slideTags.innerHTML = ""; + slideTags.innerHTML += finalTable; + } else { + console.warn('Element with ID "slide-tags" not found.'); + } }); 'PowerPoint.ShapeFill#setSolidColor:member(1)': - >- @@ -15327,8 +15386,9 @@ finalTable += "" + index + "" + shape.id + ""; }); finalTable += ""; - $("#outputSpan").empty(); - $("#outputSpan").append(finalTable); + const outputSpan = document.getElementById("outputSpan"); + outputSpan.innerHTML = ""; + outputSpan.innerHTML += finalTable; }); 'PowerPoint.ShapeType:enum': - >- @@ -15427,9 +15487,11 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml - const chosenMaster = $("#master-id").val() as string; + const chosenMaster = (document.getElementById("master-id") as + HTMLInputElement).value; - const chosenLayout = $("#layout-id").val() as string; + const chosenLayout = (document.getElementById("layout-id") as + HTMLInputElement).value; await PowerPoint.run(async function(context) { @@ -15447,9 +15509,11 @@ https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml - const chosenMaster = $("#master-id").val() as string; + const chosenMaster = (document.getElementById("master-id") as + HTMLInputElement).value; - const chosenLayout = $("#layout-id").val() as string; + const chosenLayout = (document.getElementById("layout-id") as + HTMLInputElement).value; await PowerPoint.run(async function(context) { @@ -17245,7 +17309,7 @@ footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; console.log(`Note type of footnote ${referenceNumber}: ${item.type}`); @@ -17269,7 +17333,7 @@ footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; console.log(`Note type of footnote ${referenceNumber}: ${item.type}`); @@ -17289,7 +17353,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17322,7 +17386,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17355,7 +17419,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17388,7 +17452,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17421,7 +17485,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17489,7 +17553,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -17715,10 +17779,7 @@ selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -17794,10 +17855,7 @@ in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -17845,9 +17903,7 @@ // Sets a comment on the selected content. await Word.run(async (context) => { - const text = $("#comment-text") - .val() - .toString(); + const text = (document.getElementById("comment-text") as HTMLInputElement).value; const comment: Word.Comment = context.document.getSelection().insertComment(text); // Load object to log in the console. @@ -17909,9 +17965,7 @@ // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -17933,9 +17987,7 @@ // Edits the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#edit-comment-text") - .val() - .toString(); + const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -18074,9 +18126,7 @@ // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -18122,9 +18172,7 @@ // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -18237,9 +18285,7 @@ // Replies to the first active comment in the selected content. await Word.run(async (context) => { - const text = $("#reply-text") - .val() - .toString(); + const text = (document.getElementById("reply-text") as HTMLInputElement).value; const comments: Word.CommentCollection = context.document.getSelection().getComments(); comments.load("items"); await context.sync(); @@ -18283,9 +18329,7 @@ await Word.run(async (context) => { // Absolute path of an online or local document. - const filePath = $("#filePath") - .val() - .toString(); + const filePath = (document.getElementById("filePath") as HTMLInputElement).value; // Options that configure the compare operation. const options: Word.DocumentCompareOptions = { compareTarget: Word.CompareTarget.compareTargetCurrent, @@ -18389,7 +18433,7 @@ // Sets the state of the first content control. await Word.run(async (context) => { - const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState; + const state = ((document.getElementById("state-to-set") as HTMLSelectElement).value as unknown) as Word.ContentControlState; let firstContentControl = context.document.contentControls.getFirstOrNullObject(); await context.sync(); @@ -18458,10 +18502,7 @@ selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -18499,10 +18540,7 @@ the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -19036,10 +19074,7 @@ control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -19088,10 +19123,7 @@ in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -19140,10 +19172,7 @@ control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -19309,7 +19338,7 @@ // Sets the state of the first content control. await Word.run(async (context) => { - const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState; + const state = ((document.getElementById("state-to-set") as HTMLSelectElement).value as unknown) as Word.ContentControlState; let firstContentControl = context.document.contentControls.getFirstOrNullObject(); await context.sync(); @@ -20339,7 +20368,7 @@ // Adds a new style. await Word.run(async (context) => { - const newStyleName = $("#new-style-name").val() as string; + const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value; if (newStyleName == "") { console.warn("Enter a style name to add."); return; @@ -20356,7 +20385,7 @@ return; } - const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType; + const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType; context.document.addStyle(newStyleName, newStyleType); await context.sync(); @@ -20385,9 +20414,7 @@ await Word.run(async (context) => { // Absolute path of an online or local document. - const filePath = $("#filePath") - .val() - .toString(); + const filePath = (document.getElementById("filePath") as HTMLInputElement).value; // Options that configure the compare operation. const options: Word.DocumentCompareOptions = { compareTarget: Word.CompareTarget.compareTargetCurrent, @@ -20461,7 +20488,7 @@ await Word.run(async (context) => { - const paragraphId = $("#paragraph-id").val() as string; + const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value; const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId); paragraph.load(); await paragraph.context.sync(); @@ -20890,9 +20917,7 @@ await Word.run(async (context) => { // Absolute path of an online or local document. - const filePath = $("#filePath") - .val() - .toString(); + const filePath = (document.getElementById("filePath") as HTMLInputElement).value; // Options that configure the compare operation. const options: Word.DocumentCompareOptions = { compareTarget: Word.CompareTarget.compareTargetCurrent, @@ -20986,10 +21011,7 @@ the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-add") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -21067,10 +21089,7 @@ control in the selection. await Word.run(async (context) => { - const listItemText = $("#item-to-delete") - .val() - .toString() - .trim(); + const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim(); const selectedRange: Word.Range = context.document.getSelection(); let selectedContentControl = selectedRange .getContentControls({ @@ -21897,7 +21916,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -22072,7 +22091,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -22108,7 +22127,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -22219,7 +22238,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -22283,7 +22302,7 @@ footnotes.load("items/body"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const footnoteBody: Word.Range = footnotes.items[mark].body.getRange(); footnoteBody.load("text"); @@ -22304,7 +22323,7 @@ footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; footnotes.items[mark].delete(); await context.sync(); @@ -22324,7 +22343,7 @@ footnotes.load("items/reference"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const reference: Word.Range = footnotes.items[mark].getNext().reference; reference.select(); @@ -22343,7 +22362,7 @@ footnotes.load("items/body"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const footnoteBody: Word.Range = footnotes.items[mark].body.getRange(); footnoteBody.load("text"); @@ -22364,7 +22383,7 @@ footnotes.load("items/reference"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; const reference: Word.Range = item.reference; @@ -22387,7 +22406,7 @@ footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; console.log(`Note type of footnote ${referenceNumber}: ${item.type}`); @@ -22439,7 +22458,7 @@ footnotes.load("items"); await context.sync(); - const referenceNumber = $("#input-reference").val(); + const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value; const mark = (referenceNumber as number) - 1; const item: Word.NoteItem = footnotes.items[mark]; console.log(`Note type of footnote ${referenceNumber}: ${item.type}`); @@ -22812,7 +22831,7 @@ // Applies the specified style to a paragraph. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -23100,7 +23119,7 @@ left indent size and the alignment. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update its paragraph format."); return; @@ -23128,7 +23147,7 @@ left indent size and the alignment. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update its paragraph format."); return; @@ -23156,7 +23175,7 @@ left indent size and the alignment. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update its paragraph format."); return; @@ -23380,9 +23399,7 @@ // Sets a comment on the selected content. await Word.run(async (context) => { - const text = $("#comment-text") - .val() - .toString(); + const text = (document.getElementById("comment-text") as HTMLInputElement).value; const comment: Word.Comment = context.document.getSelection().insertComment(text); // Load object to log in the console. @@ -23456,9 +23473,7 @@ // Sets a footnote on the selected content. await Word.run(async (context) => { - const text = $("#input-footnote") - .val() - .toString(); + const text = (document.getElementById("input-footnote") as HTMLInputElement).value; const footnote: Word.NoteItem = context.document.getSelection().insertFootnote(text); await context.sync(); @@ -23685,19 +23700,13 @@ // edits the value of an existing one. await Word.run(async (context) => { - const key = $("#key") - .val() - .toString(); - + const key = (document.getElementById("key") as HTMLInputElement).value; if (key == "") { console.error("Key shouldn't be empty."); return; } - const value = $("#value") - .val() - .toString(); - + const value = (document.getElementById("value") as HTMLInputElement).value; const settings: Word.SettingCollection = context.document.settings; const setting: Word.Setting = settings.add(key, value); setting.load(); @@ -23716,19 +23725,13 @@ // edits the value of an existing one. await Word.run(async (context) => { - const key = $("#key") - .val() - .toString(); - + const key = (document.getElementById("key") as HTMLInputElement).value; if (key == "") { console.error("Key shouldn't be empty."); return; } - const value = $("#value") - .val() - .toString(); - + const value = (document.getElementById("value") as HTMLInputElement).value; const settings: Word.SettingCollection = context.document.settings; const setting: Word.Setting = settings.add(key, value); setting.load(); @@ -23747,19 +23750,13 @@ // edits the value of an existing one. await Word.run(async (context) => { - const key = $("#key") - .val() - .toString(); - + const key = (document.getElementById("key") as HTMLInputElement).value; if (key == "") { console.error("Key shouldn't be empty."); return; } - const value = $("#value") - .val() - .toString(); - + const value = (document.getElementById("value") as HTMLInputElement).value; const settings: Word.SettingCollection = context.document.settings; const setting: Word.Setting = settings.add(key, value); setting.load(); @@ -23792,19 +23789,13 @@ // edits the value of an existing one. await Word.run(async (context) => { - const key = $("#key") - .val() - .toString(); - + const key = (document.getElementById("key") as HTMLInputElement).value; if (key == "") { console.error("Key shouldn't be empty."); return; } - const value = $("#value") - .val() - .toString(); - + const value = (document.getElementById("value") as HTMLInputElement).value; const settings: Word.SettingCollection = context.document.settings; const setting: Word.Setting = settings.add(key, value); setting.load(); @@ -23844,7 +23835,7 @@ specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update shading properties."); return; @@ -23878,7 +23869,7 @@ specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update shading properties."); return; @@ -23911,7 +23902,7 @@ // Applies the specified style to a paragraph. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -23946,7 +23937,7 @@ // Deletes the custom style. await Word.run(async (context) => { - const styleName = $("#style-name-to-delete").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to delete."); return; @@ -23973,7 +23964,7 @@ style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update border properties."); return; @@ -24005,7 +23996,7 @@ // Updates font properties (e.g., color, size) of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update font properties."); return; @@ -24033,7 +24024,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return; @@ -24069,7 +24060,7 @@ // Applies the specified style to a paragraph. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -24105,7 +24096,7 @@ left indent size and the alignment. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update its paragraph format."); return; @@ -24133,7 +24124,7 @@ specified style. await Word.run(async (context) => { - const styleName = $("#style-name").val() as string; + const styleName = (document.getElementById("style-name") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to update shading properties."); return; @@ -24181,7 +24172,7 @@ // Adds a new style. await Word.run(async (context) => { - const newStyleName = $("#new-style-name").val() as string; + const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value; if (newStyleName == "") { console.warn("Enter a style name to add."); return; @@ -24198,7 +24189,7 @@ return; } - const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType; + const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType; context.document.addStyle(newStyleName, newStyleType); await context.sync(); @@ -24228,7 +24219,7 @@ // Applies the specified style to a paragraph. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to apply."); return; @@ -24711,9 +24702,9 @@ // Gets the table style properties and displays them in the form. - const styleName = $("#style-name") - .val() - .toString(); + const styleName = (document.getElementById("style-name") as + HTMLInputElement).value; + if (styleName == "") { console.warn("Please input a table style name."); return; @@ -24731,13 +24722,13 @@ } console.log(tableStyle); - $("#alignment").val(tableStyle.alignment); - $("#allow-break-across-page").val(tableStyle.allowBreakAcrossPage.toString()); - $("#top-cell-margin").val(tableStyle.topCellMargin); - $("#bottom-cell-margin").val(tableStyle.bottomCellMargin); - $("#left-cell-margin").val(tableStyle.leftCellMargin); - $("#right-cell-margin").val(tableStyle.rightCellMargin); - $("#cell-spacing").val(tableStyle.cellSpacing); + (document.getElementById("alignment") as HTMLInputElement).value = tableStyle.alignment; + (document.getElementById("allow-break-across-page") as HTMLInputElement).value = tableStyle.allowBreakAcrossPage.toString(); + (document.getElementById("top-cell-margin") as HTMLInputElement).value = tableStyle.topCellMargin; + (document.getElementById("bottom-cell-margin") as HTMLInputElement).value = tableStyle.bottomCellMargin; + (document.getElementById("left-cell-margin") as HTMLInputElement).value = tableStyle.leftCellMargin; + (document.getElementById("right-cell-margin") as HTMLInputElement).value = tableStyle.rightCellMargin; + (document.getElementById("cell-spacing") as HTMLInputElement).value = tableStyle.cellSpacing; }); 'Word.TrackedChange:class': - >- @@ -24946,7 +24937,7 @@ // Gets the properties of the specified style. await Word.run(async (context) => { - const styleName = $("#style-name-to-use").val() as string; + const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value; if (styleName == "") { console.warn("Enter a style name to get properties."); return;