Clone a visual

The Clone Visual API clones a specific visual into the active page of a Power BI report. You can clone a visual from any page in the report into the active page. Cloning a visual lets you make copies with different layouts or filters from the original visual.

How to clone a visual

The Power BI Client VisualDescriptor class, defines the clone method as:

clone(request: models.ICloneVisualRequest = {}): Promise<ICloneVisualResponse>

In the ICloneVisualRequest interface:

  • IFilter describes the filters to apply to the cloned visual.
  • IVisualLayout defines the cloned visual's size and location.
  • The autoFocus property determines whether to focus on the cloned visual after creation.

The ICloneVisualResponse interface returns the new cloned visual name or unique identifier.

interface ICloneVisualRequest {
  // The filters to apply to the new visual. Default: source visual filters.
  filters?: IFilter[];

  // The layout to apply to the new visual.
  // Default: a best effort to put the new visual in an empty space on the canvas.
  layout?: IVisualLayout;

  // Focus on the new visual after creation.
  // If autoFocus is set to false, no scrolling will occur.
  // Default: true.
  autoFocus?: boolean;
}

interface ICloneVisualResponse {
  // New visual name.
  visualName: string;
}

To get a list of all visuals in a report, use the getVisuals method of the Page class.

Examples

The first code example clones a visual with default settings. The position and size of the new visual represent a best effort to put a visual into an empty space on the canvas. To specify position and size, use the second example.

    let clonedVisual = await visual.clone();
    console.log(clonedVisual.name);

The second example clones to a new visual with a specific layout, and doesn't focus on the new visual after creation.

    let cloneRequest = {
        layout: { 
            height: 300, 
            width: 600,
            x: 150, 
            y: 250 
        },
        autoFocus: false
    };

    let clonedVisual = await visual.clone(cloneRequest);
    console.log(clonedVisual.name);

The third code example clones to a new visual with a specific layout and new filters.

    const basicFilter = {
      $schema: "http://powerbi.com/product/schema#basic",
      target: {
        table: "Store",
        column: "Count"
      },
      operator: "In",
      values: [1, 2, 3, 4],
      filterType: models.FilterType.BasicFilter
    };

    let cloneRequest = {
        layout: { x: 150, y: 250 },
        filters: [basicFilter]
    };

    let clonedVisual = await visual.clone(cloneRequest);
    console.log(clonedVisual.name);

Limitations

You can clone a visual only if the report is fully rendered, so wait on the rendered event before you call the Clone Visual API.

Next steps