Office-js: Layout breaks when using insertHtml while cursor focuses a content control

Created on 14 May 2018  路  4Comments  路  Source: OfficeDev/office-js

Expected Behavior

The layout should not break.

Current Behavior

The document layout breaks. Somehow the footer gets mixed with the header.

Steps to Reproduce, or Live Example

You need an empty document with:

  1. two rich content controls in header
  2. one rich content control in footer

Set you cursor inside a content control of the header and use this Script Lab to reproduce the issue.

Side note: It is important that you set your cursor inside a content control in the header before running the script. Otherwise everything works fine.

Context

I want to clear the content controls in the header and insert some Html in the footer content control while the current cursor is inside a content control.

Your Environment

  • Platform : PC
  • Host : Word
  • Office version number: 1805 (9327.2006) Office Insider
  • Operating System: Win 10 64 Bit
Word has workaround

Most helpful comment

In my case it also works if you do clear before.

await Word.run(async (context) => {

    const ccs = context.document.contentControls;        
    ccs.load();

    await context.sync().then(function (){
        ccs.items[0].clear();
        ccs.items[1].clear();
        ccs.items[2].clear();
        ccs.items[2].insertHtml('<p>New Footer</p>', 'Replace');
    });
});

All 4 comments

I was able to replicate this but also a workaround. You can move the selection back to the body, execute your commands, and then return them back:

await Word.run(async (context) => {

    // move your selection to the body
    const selection = context.document.getSelection();
    selection.load();
    context.document.body.select();

    const ccs = context.document.contentControls;        
    ccs.load();

    await context.sync().then(function (){
        ccs.items[0].clear();
        ccs.items[1].clear();
        ccs.items[2].insertHtml('<p>New Footer</p>', 'Replace');     
        selection.select(); // retrun selection
    });
});

In my case it also works if you do clear before.

await Word.run(async (context) => {

    const ccs = context.document.contentControls;        
    ccs.load();

    await context.sync().then(function (){
        ccs.items[0].clear();
        ccs.items[1].clear();
        ccs.items[2].clear();
        ccs.items[2].insertHtml('<p>New Footer</p>', 'Replace');
    });
});

@kbrandl Would it make sense to document this? Thx.

Added to documentation backlog (3745381); closing this issue now, as it has a workaround and is nearly 1.5 years old.

Was this page helpful?
0 / 5 - 0 ratings