I have a powerbi report embedded using Angular. I want to delete Visuals of the report. Here is the code I implemented for deleteVisual function.

deleteVisual() {
    // Get report
    const report = await this.reportObj.getReport();

    if (!report){ 
       console.log(“Report Not available”);
       return;
    }

    // Get all the pages of the report
    const pages = await report.getPages();

   // Check if all the pages of the report deleted
   if (pages.length === 0) {
       console.log(“No pages found”);
       return;
   }

   // Get active page of the report
   const activePage = pages.find((page) => page.isActive);

   if (activePage) 
      // Get all visuals in the active page of the report
      const visuals = await activePage.getVisuals();

  if (visuals.length === 0) {
    
    console.log('No visuals found.');
    return;
  }

  // Get first visible visual
  const visual = visuals.find((v) => v.layout.displayState?.mode === 
                                 models.VisualContainerDisplayMode.Visible);

  if (!visual) {
    console.log('No visible visual available to delete.');
    return;
  }

  try {
    // Delete the visual using powerbi-report-authoring
    const response = await activePage.deleteVisual(visual.name);
        console.log(`${visual.type} , visual was deleted.`);

    return response;
  } catch (error) {
    console.error(error);
  }

}

I am getting error saying Property deleteVisual doesn't exist on type Page. Also why getVisuals, getReport , even deletePage working fine but getting error while using this deleteVisual. I want to attach the ss of error but i dont have enough reputation to post images.Can anyone help me to solve this problem.

CodePudding user response：

To use deleteVisual please install powerbi-report-authoring library. Using npm you can install by this command

npm i powerbi-report-authoring

References:

https://docs.microsoft.com/javascript/api/overview/powerbi/remove-visual https://www.npmjs.com/package/powerbi-report-authoring