Google Apps Script to set shape color

Question

I was looking through the Google Apps Script reference here and noticed there is a method for setSolidFill(color).

I was wondering if it was possible to write a Google Apps Script to set shape colors based on values/ lookup reference in a Google Sheet? Essentially set the colour of Shape #001 in Google Slides to the HEX code in A2 of a Google Sheet?

Answer 1

I am wondering if it is possible to set shape colours based on colour codes found in a Google Sheet.

I think that your goal can be achieved. So in order to help to understand about the method for achieving your goal, I proposed the following 2 patterns.

Pattern 1:

In this pattern, the color of shape is changed using the object ID of the shape in 1st slide on Google Slides. In this sample, the hex color is retrieved from the cell "A1" of the Spreadsheet. Please set the Spreadsheet ID, sheet name and the presentation ID.

Sample script:

function myFunction() {
  const objectId = "###";  // Please set the object ID.
  
  const hexColor = SpreadsheetApp.openById("spreadsheetId").getSheetByName("sheetName").getRange("A1").getValue();
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  var obj = slide.getShapes().filter(s => s.getObjectId() == objectId);
  if (obj.length > 0) obj[0].getFill().setSolidFill(hexColor);
}

Pattern 2:

In this pattern, the color of shape is changed using the shape type of the shape in 1st slide on Google Slides. In this sample, the hex color is retrieved from the cell "A1" of the Spreadsheet, and the color of "RECTANGLE" shapes are changed. Please set the Spreadsheet ID, sheet name and the presentation ID. Please select the shape type from Enum ShapeType.

Sample script:

function myFunction() {
  const shapeType = "RECTANGLE";  // Please set the shape type.
  
  const hexColor = SpreadsheetApp.openById("spreadsheetId").getSheetByName("sheetName").getRange("A1").getValue();
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  var objs = slide.getShapes().filter(s => s.getShapeType() == SlidesApp.ShapeType[shapeType]);
  if (objs.length > 0) {
    objs.forEach(obj => obj.getFill().setSolidFill(hexColor));
  }
}

Note:

• These are the simple sample scripts. So when you use the script, please modify it for your actual situation.

References:

• setSolidFill(hexString)
• getObjectId()
• getShapeType()
• Enum ShapeType

Added 1:

When you want to retrieve the object IDs of all shaped in a slide, you can use the following script.

Sample script:

const slide = SlidesApp.openById(presentationId).getSlides()[0];
const objectIds = slide.getShapes().map(s => s.getObjectId());
console.log(objectIds)

• In this case, the object IDs of all shapes in 1st slide are put in an array.

Added 2:

For example, when the colors of all shapes in the 1st slide in Google Slides are changed to the red color, the following script can be used. When you want to select one of shapes using the object ID, at first, please retrieve the object IDs using the script of "Added 1", and use the script of "Pattern 1".

Sample script:

function myFunction() {
  const hexColor = "#ff0000";  // This is a red color.
  const slide = SlidesApp.openById(presentationId).getSlides()[0];
  const shapes = slide.getShapes();
  if (shapes.length > 0) {
    shapes.forEach(obj => obj.getFill().setSolidFill(hexColor));
  }
}

Added 3:

About can the pattern 1 script use an array (I need to change colours of several shapes, not just one), from your additional request of can you please show me how to adjust the pattern 1 script to work with an array?, I added one more sample script as follows.

In this sample, at first, please set the object IDs and hex colors in objectIds. By this, the colors of shapes of 1st slide can be changed.

Sample script:

function myFunction() {
  const objectIds = [
    {objectId: "###", hexColor: "###"},
    {objectId: "###", hexColor: "###"},
    ,
    ,
    ,
  ];
  
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  const shapeObjects = slide.getShapes().reduce((o, s) => Object.assign(o, {[s.getObjectId()]: s}), {});
  objectIds.forEach(({objectId, hexColor}) => {
    if (shapeObjects[objectId]) shapeObjects[objectId].getFill().setSolidFill(hexColor);
  });
}

Note:

• This is a simple sample script. So please modify it for your actual situation.