Getting incorrect font color for html table inside content control #6409
Description
Provide required information needed to triage your issue
Your Environment
- Platform [PC desktop, Mac, iOS, Office on the web]: PC desktop
- Host [Excel, Word, PowerPoint, etc.]: Word
- Office version number: Version 2511 Build 16.0.19426.20218
- Operating System: Windows
- Browser (if using Office on the web): ______
Expected behavior
When retrieving font colors, Office.js should return the correct color codes for each shade
Current behavior
Even when different shades are selected, Office.js returns the hex value of the default color for all cells.
Steps to reproduce
document.getElementById("addTable").addEventListener("click", () => tryCatch(addTable));
document.getElementById("getColor").addEventListener("click", () => tryCatch(getColor));
let tableCC: Word.ContentControl | undefined;
async function getColor() {
OfficeExtension.config.extendedErrorLogging = true;
if (!tableCC) {
throw new Error("Table not inserted yet");
}
await Word.run(async (context) => {
const cc = context.document.contentControls.getById(tableCC.id);
await context.sync();
cc.load("tables");
const table = cc.tables.getFirstOrNullObject();
await context.sync();
table.load(["values"]);
await context.sync();
const cells: Word.TableCell[] = [];
const tableWidth = table.values[0].length;
const tableHeight = table.values.length;
iterateTable(table, 0, tableWidth - 1, 0, tableHeight - 1, (cell) => {
cell.load(["body", "horizontalAlignment", "verticalAlignment", "shadingColor"]);
cells.push(cell);
});
await context.sync();
for (let i = 0; i < cells.length; i++) {
cells[i].body.load("font");
}
for (let i = 0; i < cells.length; i++) {
cells[i].body.font.load();
}
await context.sync();
for (let i = 0; i < cells.length; i++) {
console.log("cell:" + i + " color:" + cells[i].body.font.color);
}
});
}
async function addTable() {
await Word.run(async (context) => {
OfficeExtension.config.extendedErrorLogging = true;
const defaultStyle: Word.Interfaces.TableUpdateData = {
font: {
size: 11,
},
};
const testData = [["Name", "Age", "Occupation"]];
tableCC = context.document.getSelection().insertContentControl();
const table = document.createElement("table");
const tableBody = document.createElement("tbody");
testData.forEach(function (rowData) {
const row = document.createElement("tr");
rowData.forEach(function (cellData) {
const cell = document.createElement("td");
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
const htmlTable = tableCC.insertHtml(table.outerHTML, Word.InsertLocation.start);
htmlTable.set(defaultStyle);
await context.sync();
});
}
const iterateTable = (
table: Word.Table,
startCellColumnIndex: number,
endCellColumnIndex: number,
startCellRowIndex: number,
endCellRowIndex: number,
iterationCallback: any,
) => {
for (let columnIndex = startCellColumnIndex; columnIndex <= endCellColumnIndex; columnIndex++) {
for (let rowIndex = startCellRowIndex; rowIndex <= endCellRowIndex; rowIndex++) {
const cell = table.getCell(rowIndex, columnIndex);
iterationCallback(cell, rowIndex, columnIndex);
}
}
};
async function tryCatch(callback) {
try {
await callback();
} catch (error) {
console.error(error);
}
}
<button id="addTable">Add table</button>
<button id="getColor">Get Font Colors</button>
- Insert above script in script lab
- Click Add table button
- Change the font color of each cell by selecting colors from the same shade. e.g. light orange, orange & dark orange
- Click Get Font Colors button and notice the font colors of each cell in console log
Context
We need to capture and later restore a table’s existing font. However, the font color is currently saved incorrectly, which results in the table being rendered with the wrong font color.
Useful logs
- Console errors
- Screenshots/Videos
- Test file (if only happens on a particular file)
PC desktop behavior (getting default hex code of orange for all cells):
https://github.com/user-attachments/assets/93fffced-653d-4fff-837b-dc4b9447f450
Word on the web behavior (getting correct color code for all cells):
https://github.com/user-attachments/assets/02598733-ff6d-44ca-a6ba-0f3522bc40f3
Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.