Posted 13 April 2022, 5:57 am EST
Greetings,
I am trying to integrate the ActiveReports web designer into an existing project. I have the following code in a React component and when I first render the component it works fine but if I leave and then come back to the component (rerendering it) I get the error message from the GrapeCity.ActiveReports.WebDesigner.renderApplication method:
“Error: CoreDocumentsAPI[id=designer] already exists, use CoreDocumentsAPI.of(id)”
So it seems the designer is not being cleaned up when the component is disposed. But it’s not clear to me from the documentation how I’m meant to clean up afterwards, only the viewer seems to have a destroy method. How can I prevent this error? I am using 15.2.2 of ar-designer.
import '@grapecity/ar-designer/dist/web-designer.css';
import '@grapecity/ar-designer/dist/web-designer.js';
import stringify from 'json-stable-stringify';
import React, { useEffect } from 'react';
import './ReportDesigner.scss';
type Props = {
mode: ReportHeaderEditMode;
onCancel: () => void;
};
export enum ReportHeaderEditMode {
RemittanceAdvice = 1,
ExternallyViewable = 2,
}
const ReportDesigner = (props: Props) => {
useEffect(() => {
const params = stringify({ mode: props.mode });
const reportPath = `Report/${0}/${params}/${false}`;
const options = (window as any).GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
options.reportInfo = { id: reportPath, name: reportPath };
options.reportItemsFeatures.table.autoFillFooter = true;
options.saveButton.visible = true;
options.saveAsButton.visible = true;
options.documentation.home =
'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html';
options.server.url = 'ar';
(window as any).GrapeCity.ActiveReports.WebDesigner.renderApplication('designer', options);
}, []);
return <div id="designer"></div>;
};
export default ReportDesigner;
