Search code examples
javascriptgoogle-apps-scriptgoogle-docsgoogle-docs-api

How can I change the color of a specific border of a Google Docs table by using Google Apps Script?


I have several tables in a Google Docs document, all of them have only one cell and only their left border visible. I've achieved this (manually) by setting each other borders width to 0. My goal is to change the color of the left border and keeping the other borders invisible (I don't care how, so if there's a way to achieve this by just setting the color for them that's fine, but I haven't found a way to change a single border color, so I had to change them all (and give the unwanted ones a width of 0)).

Here is an image to clarify what I mean (the first table is what the table looks like now, the second one is what I want to change it to)

I have tried the following method:

tables[i].setBorderColor(myNewColor)

Unfortunately, this method (and tables[i].setAttributes()) only works if the left border has a width of 1px. In my document, however, the left border has a width of 2.25, so that for some reason the code doesn't change the border color as it doesn't have the standard width. Is there any way to change the left border color without changing the width, while keeping the other borders practically invisible?


Solution

  • I believe your goal is as follows.

    • In your Google Document, the table has only one cell. And, you want to leave only the left border from the table.
    • You want to achieve this using Google Apps Script.

    Unfortunately, in the current stage, it seems that each border cannot be managed by the Google Document service (DocumentApp). But, fortunately, when Google Docs API is used, this can be achieved. In this answer, I would like to propose a sample script for using Google Docs API. The sample script is as follows.

    Sample script:

    Please copy and paste the following script to the script editor of Google Document. Before you use this script, please enable Google Docs API at Advanced Google services.

    function myFunction() {
      const doc = DocumentApp.getActiveDocument();
      const documentId = doc.getId();
      const body = doc.getBody();
      const table = body.getTables()[0]; // Here, the 1st table is used.
      const index = body.getChildIndex(table);
      const tableStart = Docs.Documents.get(documentId).body.content[index + 1].startIndex;
      const borders = ["borderTop", "borderBottom", "borderLeft", "borderRight"];
      const resource = {
        requests: [
          {
            updateTableCellStyle: {
              tableStartLocation: { index: tableStart },
              tableCellStyle: borders.reduce((o, e) => (o[e] = { width: { magnitude: 0, unit: "PT" }, dashStyle: "SOLID", color: { color: { rgbColor: { blue: 0 } } } }, o), {}),
              fields: borders.join(",")
            }
          },
          {
            updateTableCellStyle: {
              tableRange: { tableCellLocation: { tableStartLocation: { index: tableStart }, rowIndex: 0, columnIndex: 0 }, rowSpan: table.getNumRows(), columnSpan: 1 },
              tableCellStyle: { borderLeft: { dashStyle: "SOLID", width: { magnitude: 2.25, unit: "PT" }, color: { color: { rgbColor: { red: 1 } } } } },
              fields: "borderLeft"
            }
          }
        ]
      };
      Docs.Documents.batchUpdate(resource, documentId);
    }
    

    Testing:

    When this script is run, the 1st table in Google Document leaves only the left border and the color of the left border is changed to red as follows.

    enter image description here

    Note:

    • This is a simple sample script. Please modify this to your actual situation.

    References: