Word.Range.insertContentControl(type) will always insert RichText content control regardless of type argument

[Metab0i]

Article URL

Describe the problem
Regardless of what API consumer passes to Word.Range.insertContentControl(…), it will always insert a RichText content control.

What was attempted to arrive at this conclusion:

• Attempted to use a member of Word.ContentControlType enum - didn’t work
• Attempted to pass a string argument (“CheckBox”, “DropDownList”, “ComboBox”) - didn’t work
• Ran isolated experiment - didn’t work

API version: ^1.1.86

Screenshots
-/-

[AlexJerabek]

Hi @Metab0i,

Thank you for reporting this issue. @ElizabethSamuel-MSFT, could you please investigate?

[ElizabethSamuel-MSFT]

@Metab0i Thanks for reaching out. Can you let us know what client and build/version of Word is being used? Thanks.

[ElizabethSamuel-MSFT]

@Metab0i The following are a few samples you can try in our Script Lab tool that use Range.insertContentControl(type).

• Manage checkbox content controls
• Manage combo box content controls
• Manage dropdown list content controls

Also let us know the outcome of your trying these out.

Thanks.

[Metab0i]

@ElizabethSamuel-MSFT, thank you for a prompt response.

"... what client and build/version of Word is being used?"
MSO (Version 2501 Build 16.0.18429.20132) 64-bit

"...let us know the outcome of your trying these out."
HTML

html body...
    <div class="container" style="display: flex; flex-direction: column; gap: 0.5rem;">
      <button id="insertCheckBoxCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Checkbox Content Control</button>
      <button id="insertComboBoxCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Combo-box Content Control</button>
      <button id="insertDropdownListCC" type="button" class="btn btn-primary" style="font-size: x-small;">Insert Dropdown-List Content Control</button>
    </div>

Script

Office.onReady(async (info) => {
      if(info.host !== Office.HostType.Word) return console.error('Wrong Host Enviornment. Expected Microsoft Word.');

      document.querySelector('#insertCheckBoxCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.checkBox);
            await context.sync();

            console.log("Check-box content control inserted at the end of the selection.");
          });
        })
      
      document.querySelector('#insertComboBoxCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.comboBox);
            await context.sync();

            console.log("Combo-box content control inserted at the end of the selection.");
          });
        })

      document.querySelector('#insertDropdownListCC')
        .addEventListener("click", async function(_evnt){
          await Word.run(async (context) => {
            let selection = context.document.getSelection();
            selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
            await context.sync();

            console.log("Dropdown list content control inserted at the end of the selection.");
          });
        })
}

Outcome:

Media1.mp4

[Metab0i]

For additional context, here are properties of a content control that was supposed to be a Combo box; There's no list properties section

[ElizabethSamuel-MSFT]

When I tried out your code, I got the following behavior.

I'll transfer this to the office-js repo for the product team to investigate further.

Thanks.

[penglongzhaochina]

Hi @Metab0i ,

I tried the three insert content control function type. When I inserted the DropDown list content controls it shows below control. It's expected.

When I inserted the Checkbox list content controls it shows below control. It's expected.

When I inserted the Checkbox list content controls it shows below control. It's expected.

All the above content control added from Api side is same as the content control added from the developer tab like below picture:

About the content control properties dialog, it doesn't show the specific content control properties when you selected a content control and open the dialog, the same as the behavior when you added a content control from the developer tab. Feel free to add more comments here.

[Metab0i]

I see.. From the looks of it, problems seems to be contained to my environment; I will investigate and see if I can find the cause of this. Thank you for your time everyone