Skip to content

Commit 9348dbe

Browse files
ElizabethSamuel-MSFTElizabethSamuel-MSFT
authored
[Word] (content controls) Add for ComboBox and DropDownList types (OfficeDev#910)
1 parent 830e306 commit 9348dbe

File tree

6 files changed

+504
-0
lines changed

6 files changed

+504
-0
lines changed

‎playlists-prod/word.yaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,24 @@
515515
group: Preview APIs
516516
api_set:
517517
WordApi: '1.8'
518+
- id: word-insert-and-change-combo-box-content-control
519+
name: Manage combo box content controls
520+
fileName: insert-and-change-combo-box-content-control.yaml
521+
description: 'Inserts, updates, and deletes combo box content controls.'
522+
rawUrl: >-
523+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
524+
group: Preview APIs
525+
api_set:
526+
WordApi: '1.9'
527+
- id: word-insert-and-change-dropdown-list-content-control
528+
name: Manage dropdown list content controls
529+
fileName: insert-and-change-dropdown-list-content-control.yaml
530+
description: 'Inserts, updates, and deletes dropdown list content controls.'
531+
rawUrl: >-
532+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
533+
group: Preview APIs
534+
api_set:
535+
WordApi: '1.9'
518536
- id: word-insert-and-get-pictures
519537
name: Use inline pictures
520538
fileName: insert-and-get-pictures.yaml

‎playlists/word.yaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,24 @@
515515
group: Preview APIs
516516
api_set:
517517
WordApi: '1.8'
518+
- id: word-insert-and-change-combo-box-content-control
519+
name: Manage combo box content controls
520+
fileName: insert-and-change-combo-box-content-control.yaml
521+
description: 'Inserts, updates, and deletes combo box content controls.'
522+
rawUrl: >-
523+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
524+
group: Preview APIs
525+
api_set:
526+
WordApi: '1.9'
527+
- id: word-insert-and-change-dropdown-list-content-control
528+
name: Manage dropdown list content controls
529+
fileName: insert-and-change-dropdown-list-content-control.yaml
530+
description: 'Inserts, updates, and deletes dropdown list content controls.'
531+
rawUrl: >-
532+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
533+
group: Preview APIs
534+
api_set:
535+
WordApi: '1.9'
518536
- id: word-insert-and-get-pictures
519537
name: Use inline pictures
520538
fileName: insert-and-get-pictures.yaml

‎samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
id: word-insert-and-change-combo-box-content-control
2+
name: Manage combo box content controls
3+
description: 'Inserts, updates, and deletes combo box content controls.'
4+
host: WORD
5+
api_set:
6+
WordApi: '1.9'
7+
script:
8+
content: |
9+
$("#insert-control").on("click", () => tryCatch(insertComboBoxContentControl));
10+
$("#add-item").on("click", () => tryCatch(addItemToComboBoxContentControl));
11+
$("#delete-list").on("click", () => tryCatch(deleteListFromComboBoxContentControl));
12+
$("#delete-control").on("click", () => tryCatch(deleteComboBoxContentControl));
13+
$("#setup").on("click", () => tryCatch(setup));
14+
15+
async function insertComboBoxContentControl() {
16+
// Places a combo box content control at the end of the selection.
17+
await Word.run(async (context) => {
18+
let selection = context.document.getSelection();
19+
selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.comboBox);
20+
await context.sync();
21+
22+
console.log("Combo box content control inserted at the end of the selection.");
23+
});
24+
}
25+
26+
async function addItemToComboBoxContentControl() {
27+
// Adds the provided list item to the first combo box content control in the selection.
28+
await Word.run(async (context) => {
29+
const listItem = $("#item-to-add")
30+
.val()
31+
.toString()
32+
.trim();
33+
const selectedRange: Word.Range = context.document.getSelection();
34+
let selectedContentControl = selectedRange
35+
.getContentControls({
36+
types: [Word.ContentControlType.comboBox]
37+
})
38+
.getFirstOrNullObject();
39+
selectedContentControl.load("id,comboBoxContentControl");
40+
41+
await context.sync();
42+
43+
if (selectedContentControl.isNullObject) {
44+
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
45+
parentContentControl.load("id,type,comboBoxContentControl");
46+
await context.sync();
47+
48+
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
49+
console.warn("No combo box content control is currently selected.");
50+
return;
51+
} else {
52+
selectedContentControl = parentContentControl;
53+
}
54+
}
55+
56+
selectedContentControl.comboBoxContentControl.addListItem(listItem);
57+
await context.sync();
58+
59+
console.log(`List item ${listItem} added to control with ID: ${selectedContentControl.id}`);
60+
});
61+
}
62+
63+
async function deleteListFromComboBoxContentControl() {
64+
// Deletes the list items from first combo box content control found in the selection.
65+
await Word.run(async (context) => {
66+
const selectedRange: Word.Range = context.document.getSelection();
67+
let selectedContentControl = selectedRange
68+
.getContentControls({
69+
types: [Word.ContentControlType.comboBox]
70+
})
71+
.getFirstOrNullObject();
72+
selectedContentControl.load("id,comboBoxContentControl");
73+
await context.sync();
74+
75+
if (selectedContentControl.isNullObject) {
76+
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
77+
parentContentControl.load("id,type,comboBoxContentControl");
78+
await context.sync();
79+
80+
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
81+
console.warn("No combo box content control is currently selected.");
82+
return;
83+
} else {
84+
selectedContentControl = parentContentControl;
85+
}
86+
}
87+
88+
console.log(`About to delete the list from the combo box content control with ID: ${selectedContentControl.id}`);
89+
selectedContentControl.comboBoxContentControl.deleteAllListItems();
90+
await context.sync();
91+
92+
console.log("Deleted the list from the combo box content control.");
93+
});
94+
}
95+
96+
async function deleteComboBoxContentControl() {
97+
// Deletes the first combo box content control found in the selection.
98+
await Word.run(async (context) => {
99+
const selectedRange: Word.Range = context.document.getSelection();
100+
let selectedContentControl = selectedRange
101+
.getContentControls({
102+
types: [Word.ContentControlType.comboBox]
103+
})
104+
.getFirstOrNullObject();
105+
selectedContentControl.load("id");
106+
await context.sync();
107+
108+
if (selectedContentControl.isNullObject) {
109+
const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
110+
parentContentControl.load("id,type");
111+
await context.sync();
112+
113+
if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
114+
console.warn("No combo box content control is currently selected.");
115+
return;
116+
} else {
117+
selectedContentControl = parentContentControl;
118+
}
119+
}
120+
121+
console.log(`About to delete combo box content control with id: ${selectedContentControl.id}`);
122+
selectedContentControl.delete(false);
123+
await context.sync();
124+
125+
console.log("Deleted combo box content control.");
126+
});
127+
}
128+
129+
async function setup() {
130+
await Word.run(async (context) => {
131+
const body: Word.Body = context.document.body;
132+
body.clear();
133+
body.insertParagraph("One more paragraph.", "Start");
134+
body.insertParagraph("Inserting another paragraph.", "Start");
135+
body.insertParagraph(
136+
"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.",
137+
"Start"
138+
);
139+
body.paragraphs
140+
.getLast()
141+
.insertText(
142+
"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.",
143+
"Replace"
144+
);
145+
});
146+
}
147+
148+
// Default helper for invoking an action and handling errors.
149+
async function tryCatch(callback) {
150+
try {
151+
await callback();
152+
} catch (error) {
153+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
154+
if (error.code === Word.ErrorCodes.itemNotFound) {
155+
console.warn("No combo box content control is currently selected.");
156+
} else {
157+
console.error(error);
158+
}
159+
}
160+
}
161+
language: typescript
162+
template:
163+
content: |-
164+
<section class="ms-font-m">
165+
This sample demonstrates how to insert, change, and delete combo box content controls.
166+
</section>
167+
168+
<section class="setup ms-font-m">
169+
<h3>Set up</h3>
170+
<button id="setup" class="ms-Button">
171+
<span class="ms-Button-label">Setup</span>
172+
</button>
173+
</section>
174+
175+
<section class="samples ms-font-m">
176+
<h3>Try it out</h3>
177+
<p>
178+
<span class="ms-font-m">Insert a combo box content control after selected text.</span>
179+
<button id="insert-control" class="ms-Button">
180+
<span class="ms-Button-label">Insert</span>
181+
</button>
182+
</p>
183+
<p>
184+
<div class="ms-font-m">Add a unique list item to the first combo box content control found in your selected
185+
content.
186+
</div>
187+
<label><b>Item to add</b>:</label>
188+
<input id="item-to-add">
189+
<button id="add-item" class="ms-Button">
190+
<span class=ms-Button-label>Add item</span>
191+
</button>
192+
</p>
193+
<p>
194+
<span class="ms-font-m">Delete all list items from the first combo box content control found in your selected content.</span>
195+
<button id="delete-list" class="ms-Button">
196+
<span class=ms-Button-label>Delete list</span>
197+
</button>
198+
</p>
199+
<p>
200+
<span class="ms-font-m">Delete the first combo box content control found in your selected content.</span>
201+
<button id="delete-control" class="ms-Button">
202+
<span class=ms-Button-label>Delete selected combo box</span>
203+
</button>
204+
</p>
205+
</section>
206+
language: html
207+
style:
208+
content: |-
209+
section.samples {
210+
margin-top: 20px;
211+
}
212+
213+
section.samples .ms-Button, section.setup .ms-Button {
214+
display: block;
215+
margin-bottom: 5px;
216+
margin-left: 20px;
217+
min-width: 80px;
218+
}
219+
language: css
220+
libraries: |-
221+
https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
222+
@types/office-js-preview
223+
224+
[email protected]/dist/css/fabric.min.css
225+
[email protected]/dist/css/fabric.components.min.css
226+
227+
[email protected]/client/core.min.js
228+
@types/core-js
229+
230+
[email protected]
231+
@types/[email protected]

0 commit comments

Comments
 (0)