CODEWITHSUNDEEP
google-apps-scriptgoogle-docs
Karl
Karl

Reputation: 3

Change border width of the header's row only in Google Docs with AppScript

I have added a table with Google AppScript to a document.

Now I would like to change the table's appearance.

My goal is to make the border width of every cell = 0 instead of the bottom line of my header's row.

This image shows the intended appearance:

Intended Appearance

This is my code so far. How can I change the border width of my header row's bottom line?

function myFunction() {

  const doc = DocumentApp.getActiveDocument();
  const body = doc.getBody();

  const cells = [
    ['Name', 'Anzahl', 'Größe', 'Bemerkung'], 
    ['James', '1 x', 'M', ''],
    ['Carl', '1 x', 'L', 'Noch nicht bezahlt']
  ]

  const table =  body.appendTable(cells)
  
}

Upvotes: 0

Views: 177

Answers (1)

Tanaike
Tanaike

Reputation: 201358

In the current stage, I think that your goal cannot be achieved by only Google Document service (DocumentApp). But, fortunately, when Google Docs API is used, your goal can be achieved. In this answer, I would like to propose a sample script for achieving your goal using Docs API. When your script is modified, it becomes as follows.

Modified script:

This script uses Google Docs API. So, please enable Google Docs API at Advanced Google services.

function myFunction() {
  const doc = DocumentApp.getActiveDocument();
  const body = doc.getBody();
  const cells = [
    ['Name', 'Anzahl', 'Größe', 'Bemerkung'],
    ['James', '1 x', 'M', ''],
    ['Carl', '1 x', 'L', 'Noch nicht bezahlt']
  ];
  const table = body.appendTable(cells);


  // I added the below script.
  const docId = doc.getId();
  const index = body.getChildIndex(table);
  doc.saveAndClose();
  const tableStart = Docs.Documents.get(docId).body.content[index + 1].startIndex;
  const temp = { width: { magnitude: 0, unit: "PT" }, dashStyle: "SOLID", color: { color: { rgbColor: { blue: 0 } } } };
  const requests = [
    {
      updateTableCellStyle: {
        tableStartLocation: { index: tableStart },
        tableCellStyle: { borderTop: temp, borderBottom: temp, borderLeft: temp, borderRight: temp },
        fields: "borderTop,borderBottom,borderLeft,borderRight"
      }
    },
    {
      updateTableCellStyle: {
        tableRange: {
          tableCellLocation: { tableStartLocation: { index: tableStart }, rowIndex: 0, columnIndex: 0 }, rowSpan: 1, columnSpan: cells[0].length
        },
        tableCellStyle: {
          borderBottom: { dashStyle: "SOLID", width: { magnitude: 1, unit: "PT" }, color: { color: { rgbColor: { red: 0, green: 0, blue: 0 } } } }
        },
        fields: "borderBottom"
      }
    }
  ];
  Docs.Documents.batchUpdate({ requests }, docId);
}

Testing:

When the above script is run, the following result is obtained.

enter image description here

References:

Upvotes: 2

Related Questions