order: 11
id: word-content-controls-insert-and-change-dropdown-list-content-control
name: Manage dropdown list content controls
description: Inserts, updates, and deletes dropdown list content controls.
host: WORD
api_set:
WordApi: '1.9'
script:
content: |-
document.getElementById("insert-control").addEventListener("click", () => tryCatch(insertDropdownListContentControl));
document.getElementById("add-item").addEventListener("click", () => tryCatch(addItemToDropdownListContentControl));
document.getElementById("get-items").addEventListener("click", () => tryCatch(getListFromDropdownListContentControl));
document.getElementById("delete-item").addEventListener("click", () => tryCatch(deleteItemFromDropdownListContentControl));
document.getElementById("delete-list").addEventListener("click", () => tryCatch(deleteListFromDropdownListContentControl));
document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteDropdownListContentControl));
document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
async function insertDropdownListContentControl() {
// Places a dropdown list content control at the end of the selection.
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.");
});
}
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 = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
const selectedRange: Word.Range = context.document.getSelection();
let selectedContentControl = selectedRange
.getContentControls({
types: [Word.ContentControlType.dropDownList]
})
.getFirstOrNullObject();
selectedContentControl.load("id,dropDownListContentControl");
await context.sync();
if (selectedContentControl.isNullObject) {
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
parentContentControl.load("id,type,dropDownListContentControl");
await context.sync();
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
console.warn("No dropdown list content control is currently selected.");
return;
} else {
selectedContentControl = parentContentControl;
}
}
selectedContentControl.dropDownListContentControl.addListItem(listItemText);
await context.sync();
console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
});
}
async function getListFromDropdownListContentControl() {
// Gets the list items from the first dropdown list content control found in the selection.
await Word.run(async (context) => {
const selectedRange: Word.Range = context.document.getSelection();
let selectedContentControl = selectedRange
.getContentControls({
types: [Word.ContentControlType.dropDownList]
})
.getFirstOrNullObject();
selectedContentControl.load("id,dropDownListContentControl");
await context.sync();
if (selectedContentControl.isNullObject) {
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
parentContentControl.load("id,type,dropDownListContentControl");
await context.sync();
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
console.warn("No dropdown list content control is currently selected.");
return;
} else {
selectedContentControl = parentContentControl;
}
}
let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
selectedDropdownList.listItems.load("items");
await context.sync();
const currentItems: Word.ContentControlListItemCollection = selectedDropdownList.listItems;
console.log(`The list from the dropdown list content control with ID ${selectedContentControl.id}:`, currentItems);
});
}
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 = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
const selectedRange: Word.Range = context.document.getSelection();
let selectedContentControl = selectedRange
.getContentControls({
types: [Word.ContentControlType.dropDownList]
})
.getFirstOrNullObject();
selectedContentControl.load("id,dropDownListContentControl");
await context.sync();
if (selectedContentControl.isNullObject) {
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
parentContentControl.load("id,type,dropDownListContentControl");
await context.sync();
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
console.warn("No dropdown list content control is currently selected.");
return;
} else {
selectedContentControl = parentContentControl;
}
}
let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
selectedDropdownList.listItems.load("items/*");
await context.sync();
let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
if (!itemToDelete) {
console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
return;
}
itemToDelete.delete();
await context.sync();
console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
});
}
async function deleteListFromDropdownListContentControl() {
// Deletes the list items from first dropdown list content control found in the selection.
await Word.run(async (context) => {
const selectedRange: Word.Range = context.document.getSelection();
let selectedContentControl = selectedRange
.getContentControls({
types: [Word.ContentControlType.dropDownList]
})
.getFirstOrNullObject();
selectedContentControl.load("id,dropDownListContentControl");
await context.sync();
if (selectedContentControl.isNullObject) {
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
parentContentControl.load("id,type,dropDownListContentControl");
await context.sync();
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
console.warn("No dropdown list content control is currently selected.");
return;
} else {
selectedContentControl = parentContentControl;
}
}
console.log(
`About to delete the list from the dropdown list content control with ID ${selectedContentControl.id}`
);
selectedContentControl.dropDownListContentControl.deleteAllListItems();
await context.sync();
console.log("Deleted the list from the dropdown list content control.");
});
}
async function deleteDropdownListContentControl() {
// Deletes the first dropdown list content control found in the selection.
await Word.run(async (context) => {
const selectedRange: Word.Range = context.document.getSelection();
let selectedContentControl = selectedRange
.getContentControls({
types: [Word.ContentControlType.dropDownList]
})
.getFirstOrNullObject();
selectedContentControl.load("id");
await context.sync();
if (selectedContentControl.isNullObject) {
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
parentContentControl.load("id,type");
await context.sync();
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
console.warn("No dropdown list content control is currently selected.");
return;
} else {
selectedContentControl = parentContentControl;
}
}
console.log(`About to delete dropdown list content control with ID ${selectedContentControl.id}`);
selectedContentControl.delete(false);
await context.sync();
console.log("Deleted dropdown list content control.");
});
}
async function setup() {
await Word.run(async (context) => {
const body: Word.Body = context.document.body;
body.clear();
body.insertParagraph("One more paragraph.", "Start");
body.insertParagraph("Inserting another paragraph.", "Start");
body.insertParagraph(
"Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
"Start"
);
body.paragraphs
.getLast()
.insertText(
"Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
"Replace"
);
});
}
// 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.
if (error.code === Word.ErrorCodes.itemNotFound) {
console.warn("No dropdown list content control is currently selected.");
} else {
console.error(error);
}
}
}
language: typescript
template:
content: |-
This sample demonstrates how to insert, change, and delete dropdown list content controls.
Set up
Try it out
Insert a dropdown list content control after selected text.
Add a unique list item to the first dropdown list content control found in your selected
content.
Get all list items from the first dropdown list content control found in your selected content.
Delete a list item from the first dropdown list content control found in your selected
content.
Delete all list items from the first dropdown list content control found in your selected content.
Delete the first dropdown list content control found in your selected content.