Search code examples
office-js

Apply border formatting


I'm trying to style a range of cells that are associated with a newly created sheet.

My latest 2 (failed) attempts are:

Excel.run(function (context) {
    const newSheet = context.workbook.worksheets.add("New sheet 1");
    newSheet.activate();
    const values = [
        ["Row 1", "Row 1", "Row 1"],
        ["Row 2", "Row 2", "Row 2"]
    ]
    newSheet.getRange("A1").getResizedRange(values.length - 1, values[0].length - 1).values = values;
    context.sync().then(function () {
        newSheet.getRange("A2").getResizedRange(0, output[0].length - 1).foramt = {borderTopStyle: "thin"};
        return context.sync();
    });
});

And:

Excel.run(function (context) {
    const newSheet = context.workbook.worksheets.add("New sheet 1");
    newSheet.activate();
    const values = [
        ["Row 1", "Row 1", "Row 1"],
        ["Row 2", "Row 2", "Row 2"]
    ]
    newSheet.getRange("A1").getResizedRange(values.length - 1, values[0].length - 1).values = values;
    context.sync().then(function () {

        // The difference is here
        newSheet.getRange("A2").getResizedRange(0, values[0].length - 1).foramt.borderTopStyle = "thin";
        return context.sync();
    });
});

What's the correct way to style a range of cells?


Solution

  • First, a few comments/suggestions regarding the overall structure/contents of the code you posted:

    • Be sure to always include error-handling logic, otherwise things may silently fail without you knowing what went wrong.
    • For your scenario, only one context.sync() is needed (at the end), since the things you're doing before that (i.e., writing data to the sheet and applying formatting to the sheet) can simply be queued up and executed all together in a single context.sync() at the end.
    • Your code contains a typo (foramt instead of format) and refers to a property name that doesn't exist on the RangeFormat object (borderTopStyle). If you were to use TypeScript instead of plain JavaScript, then errors like this would be automatically flagged for you.

    Here's a code snippet that shows how you can set the border for a specified range (based upon the structure of the code you posted, but modified to incorporate the feedback above):

    Excel.run(function (context) {
      // create new sheet, add 2 rows of data
      const newSheet = context.workbook.worksheets.add("New sheet 1");
      newSheet.activate();
      const values = [
        ["Row 1", "Row 1", "Row 1"],
        ["Row 2", "Row 2", "Row 2"]
      ];
      newSheet.getRange("A1").getResizedRange(values.length - 1, values[0].length - 1).values = values;
    
      // set top border for the second row of data
      newSheet
        .getRange("A2")
        .getResizedRange(0, values[0].length - 1)
        .format.borders.getItem("EdgeTop").style = "Continuous";
    
      return context.sync();
    }).catch(function (error) {
      console.log("error: " + error);
      if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
    });