PowerPoint.ShapeFill class

The request context associated with the object. This connects the add-in's process to the Office host application's process.

context: RequestContext;

Property Value

Represents the shape fill foreground color in HTML color format, in the form #RRGGBB (e.g., "FFA500") or as a named HTML color (e.g., "orange").

foregroundColor: string;

Property Value

Remarks

[ API set: PowerPointApi 1.4 ]

Examples

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml

// Creates random shapes on the selected slide.
await PowerPoint.run(async (context) => {
  let finalTable = "";
  const currentSlide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
  const maxNewShapeWidth = 200;
  const maxNewShapeHeight = 200;
  const minNewShapeWidth = 50;
  const minNewShapeHeight = 50;
  for (let i = 0; i < 20; i++) {
    const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
      PowerPoint.GeometricShapeType.rectangle
    );
    rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
    rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
    rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
    rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
    rectangle.fill.foregroundColor = generateRandomHexColor();
  }
  finalTable += "Done<br>";
  const outputSpan = document.getElementById("outputSpan");
  outputSpan.innerHTML = "";
  outputSpan.innerHTML += finalTable;
});

Specifies the transparency percentage of the fill as a value from 0.0 (opaque) through 1.0 (clear). Returns null if the shape type doesn't support transparency or the shape fill has inconsistent transparency, such as with a gradient fill type.

transparency: number;

Property Value

Remarks

[ API set: PowerPointApi 1.4 ]

Examples

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml

// Changes the transparency of every geometric shape in the slide.
await PowerPoint.run(async (context) => {
  // Get the type of shape for every shape in the collection.
  const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
  shapes.load("type");
  await context.sync();

  // Change the shape transparency to be halfway transparent.
  shapes.items.forEach((shape) => {
    if (shape.type === PowerPoint.ShapeType.geometricShape) {
      shape.fill.transparency = 0.5;
    }
  });
  await context.sync();
});

Returns the fill type of the shape. See PowerPoint.ShapeFillType for details.

readonly type: PowerPoint.ShapeFillType | "NoFill" | "Solid" | "Gradient" | "Pattern" | "PictureAndTexture" | "SlideBackground";

Property Value

Remarks

[ API set: PowerPointApi 1.4 ]

Clears the fill formatting of this shape.

clear(): void;

Returns

Remarks

[ API set: PowerPointApi 1.4 ]

Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.

load(options?: PowerPoint.Interfaces.ShapeFillLoadOptions): PowerPoint.ShapeFill;

Parameters

Returns

Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.

load(propertyNames?: string | string[]): PowerPoint.ShapeFill;

Parameters

Returns

Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.

load(propertyNamesAndPaths?: {
            select?: string;
            expand?: string;
        }): PowerPoint.ShapeFill;

Parameters

Returns

Sets the fill formatting of the shape to an image. This changes the fill type to PictureAndTexture.

setImage(base64EncodedImage: string): void;

Parameters

Returns

Remarks

[ API set: PowerPointApi 1.8 ]

Examples

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml

// Inserts an image with binding.
await PowerPoint.run(async (context) => {
  const bindingId = (document.getElementById("temp-binding-id") as HTMLInputElement).value;
  const slide = context.presentation.getSelectedSlides().getItemAt(0);
  const myShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
    top: 100,
    left: 30,
    width: 200,
    height: 200
  });

  myShape.fill.setImage(flowerImage);
  context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);
  await context.sync();

  const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;

  const option = new Option(`Binding ${bindingId}`, bindingId);

  // When a binding ID already exists, the binding is updated to refer to the new shape
  // so select the existing item rather than add a new one.
  const foundIndex = findDropdownItem(bindingsDropdown, option.text);
  if (foundIndex < 0) {
    bindingsDropdown.add(option);
    bindingsDropdown.selectedIndex = bindingsDropdown.options.length - 1;
  } else {
    bindingsDropdown.selectedIndex = foundIndex;
  }
});

Sets the fill formatting of the shape to a uniform color. This changes the fill type to Solid.

setSolidColor(color: string): void;

Parameters

Returns

Remarks

[ API set: PowerPointApi 1.4 ]

Examples

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml

// Changes the selected shapes fill color to red.
await PowerPoint.run(async (context) => {
  const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
  const shapeCount = shapes.getCount();
  shapes.load("items");
  await context.sync();
  shapes.items.map((shape) => {
    shape.fill.setSolidColor("red");
  });
  await context.sync();
});

Overrides the JavaScript toJSON() method in order to provide more useful output when an API object is passed to JSON.stringify(). (JSON.stringify, in turn, calls the toJSON method of the object that's passed to it.) Whereas the original PowerPoint.ShapeFill object is an API object, the toJSON method returns a plain JavaScript object (typed as PowerPoint.Interfaces.ShapeFillData) that contains shallow copies of any loaded child properties from the original object.

toJSON(): PowerPoint.Interfaces.ShapeFillData;

Returns