Color is not filled in cells in Excel Add-in in react after "await" statement

Question

I am working on Microsoft Excel Add-in in react, I want to assign colors to the specific cells based on the value in it ie, by color code (See Board Color column in image below). So what I did is, get column of the table, and iterate through that column cells and load "value" for each cell. Then iterate on array of those values and try to fill a respective color to each cell.

on iteration, Values are printed in console correctly, but color are not being filled, now it has become headache for me. It is only happening if I assign color in/after "await this.context.sync()". Before that, Color are filled (checked by dummy cells).

Below is the code:

// ExcelAPI.js class

async setBoardColor() {

    console.log("setBoardColor()");

    try {

      let workItemIDColumn = this.workitemTable.columns.getItem("BOARD COLOR").getDataBodyRange().load("values"); // .load(["values", "address"]);



      // let workItemIDColumn = await range.load(["values", "address"]);

      console.log("Workitem IDs 00 : ", workItemIDColumn);

      // console.log("Workitem IDs count : ", workItemIDColumn.values.length);

      await this.context.sync().then(() => {

        let accountHeaderRange = this.currentWorksheet.getRange("A2:B2");

        accountHeaderRange.format.fill.color = "red";



        for (var row = 0; row < workItemIDColumn.values.length; row++) {

          console.log("in loop : ", row);

          console.log("values : " + workItemIDColumn.values[row][0]);

          // workItemIDColumn.getRow(row).getRange("A2:B2").format.fill.color = "red";

          if (workItemIDColumn.values[row][0] != "") {

            console.log("I am in");

            workItemIDColumn.getRow(row).getResizedRange(0, -2).format.fill.color = "red"; // workItemIDColumn.values[row][0];

            // workItemIDColumn.getRow(row).format.protection.locked = false;

          }

        }

      });

      // console.log("Workitem IDs check : ");

    } catch (error) {

      console.log("setBoardColor() ", error);

    }

  } 

Calling of above method is in main class component.

renderExcelContent = async (workItems) => {

    try {

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

        const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();

        let excelAPI = new ExcelAPI(context, currentWorksheet);

        excelAPI.setBoardColor();

        currentWorksheet.getRange("A2:B2").format.protection.locked = false;

        currentWorksheet.protection.protect();



        // eslint-disable-next-line no-undef

        if (Office.context.requirements.isSetSupported("ExcelApi", "1.2")) {

          currentWorksheet.getUsedRange().format.autofitColumns();

          currentWorksheet.getUsedRange().format.autofitRows();

        }



        currentWorksheet.activate();

        context.runtime.enableEvents = true;

      });

    } catch (error) {

      console.error(error);

    }

  };

Answer 1

That's just how the Excel JavaScript API works. The things you're doing before calling sync are just interacting with JavaScript objects that aren't actually in the spreadsheet. It's the sync call that writes the changes you've made to the actual worksheet. So if you want to see changes, you have to use sync .

From the documentation (my emphasis) :

Excel.RequestContext class

The RequestContext object facilitates requests to the Excel application. Since the Office add-in and the Excel application run in two different processes , the request context is required to get access to the Excel object model from the add-in.

and from sync :

Synchronizes the state between JavaScript proxy objects and the Office document, by executing instructions queued on the request context and retrieving properties of loaded Office objects for use in your code.

(Note that an implicit sync happens after your Excel.run callback returns.)

Answer 2

I have fixed this by "await" before calling setBoardColor() in main class.

await excelAPI.setBoardColor();