Last active
January 23, 2023 16:23
-
-
Save barisbikmaz/c170e1946b72bb95d0a3067d23a04a76 to your computer and use it in GitHub Desktop.
Creates a content control with a child content control. When you try to get the ooxml of the content control, the child content control is ignored.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Child Content Control ooxml bug | |
description: >- | |
Creates a content control with a child content control. When you try to get | |
the ooxml of the content control, the child content control is ignored. | |
host: WORD | |
api_set: {} | |
script: | |
content: | | |
$("#setup").click(() => tryCatch(setup)); | |
$("#get-ooxml").click(() => tryCatch(getOoxml)); | |
$("#insert-ooxml").click(() => tryCatch(insertOoxml)); | |
$("#count").click(() => tryCatch(countContenControls)); | |
let parentContentControlOoxml = ""; | |
async function getOoxml() { | |
$("#insert-ooxml").attr("disabled"); | |
await Word.run(async (context) => { | |
const ccs = context.document.body.contentControls.getByTag("Parent"); | |
ccs.load(); | |
await context.sync(); | |
// Getting ooxml from Content Control does also not work. | |
// const ooxml = ccs.items[0].getOoxml(); | |
const ooxml = ccs.items[0].getRange("Content").getOoxml(); | |
await context.sync(); | |
parentContentControlOoxml = ooxml.value; | |
console.log(ooxml.value); | |
$("#insert-ooxml").removeAttr("disabled"); | |
}); | |
} | |
async function insertOoxml() { | |
await Word.run(async (context) => { | |
const p = context.document.body.paragraphs.getLast(); | |
p.insertOoxml(parentContentControlOoxml, "Replace"); | |
await context.sync(); | |
}); | |
} | |
async function countContenControls() { | |
await Word.run(async (context) => { | |
const ccs = context.document.contentControls; | |
ccs.load(); | |
await context.sync(); | |
$("#nrOfCCs").text(ccs.items.length); | |
}); | |
} | |
async function setup() { | |
await Word.run(async (context) => { | |
const body = context.document.body; | |
body.clear(); | |
body.insertParagraph("", "Start").insertParagraph("", "After"); | |
await context.sync(); | |
const parentCC = body.paragraphs.getFirst().insertContentControl(); | |
parentCC.tag = "Parent"; | |
parentCC.color = "red"; | |
await context.sync(); | |
parentCC.insertParagraph("I am parent Content Control Text", "Start"); | |
const p = parentCC.paragraphs.getLast(); | |
const child = p.insertContentControl(); | |
child.color = "green"; | |
child.insertText("I am a child content control text", "Start"); | |
await context.sync(); | |
}); | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback) { | |
try { | |
await callback(); | |
} catch (error) { | |
// Note: In a production add-in, you'd want to notify the user through your add-in's UI. | |
console.error(error); | |
} | |
} | |
language: typescript | |
template: | |
content: "<section class=\"setup ms-font-m\">\n\t<ol>\n\t\t<li><b>Click Setup</b>: This will create a Content Control with a child Content Control in it.</li>\n\t\t<li><b>Click Get OOXML</b>: This will output the ooxml of the Content Control with the child in the console and\n\t\t\talso save it internally.</li>\n\t\t\t\t<li><b>Click Count</b>: Observe that you have 2 Content Control in the document.</li>\n\t\t<li><b>Click Insert OOXML</b>: This will insert the content of the Content Control into the last paragraph.</li>\n\t\t<li><b>Click Count</b>: Observe that the document has still 2 Content Controls althought we should have inserted the content of the Parent Content Control.</li>\n\t</ol>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>Set up</h3>\n\t<button id=\"setup\" class=\"ms-Button\">\n <span class=\"ms-Button-label\">Setup</span>\n </button>\n\t<button id=\"count\" class=\"ms-Button\">\n\t\t <span class=\"ms-Button-label\">Count ContenControls</span>\t\t\t\n\t </button>\n\t<p>Number of ContenControls: <span id=\"nrOfCCs\"></span></p>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>Get OOXML From Parent Content Control</h3>\n\t<button id=\"get-ooxml\" class=\"ms-Button\">\n\t\t <span class=\"ms-Button-label\">Get OOXML</span>\n\t\t </button>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>Insert OOXML to Other Content Control</h3>\n\t<button id=\"insert-ooxml\" class=\"ms-Button\" disabled>\n\t\t\t<span class=\"ms-Button-label\">Insert OOXML</span>\n\t</button>\n</section>" | |
language: html | |
style: | |
content: |- | |
section.samples { | |
margin-top: 20px; | |
} | |
section.samples .ms-Button, section.setup .ms-Button { | |
display: block; | |
margin-bottom: 5px; | |
margin-left: 20px; | |
min-width: 80px; | |
} | |
language: css | |
libraries: |- | |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js | |
@types/office-js | |
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css | |
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css | |
core-js@2.4.1/client/core.min.js | |
@types/core-js | |
jquery@3.1.1 | |
@types/jquery@3.3.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment