how do i call getReport() and saveReport() in flexmonster with react?

Hello, Ashmi Suranse,
 
 
Thank you for writing to us.
 
 
1. Calling getReport() and setReport() in React
 
Flexmonster API calls can be accessed by the help of refs in React.
According to React documentation, refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application.
 
Please consider the following example:
 
1) Create a reference to the FlexmonsterReact.Pivot component via the ref attribute provided by React:
 

<FlexmonsterReact.Pivot toolbar={true}
                        ref="pivot"
                        componentFolder="https://cdn.flexmonster.com/"
                        width="100%"
                        report="https://cdn.flexmonster.com/reports/report.json"

/>

 
2) Now when the component is mounted and ready to be used, Flexmonster API calls, such as getReport() and setReport() can be accessed via refs the following way:
 

this.refs.pivot.flexmonster.getReport();

 
 
2. Handling events with Flexmonster in React
 
Flexmonster events can be handled in the following way:
 
1) Define the needed events as attributes in the FlexmonsterReact.Pivot component:
Please see the full list of available events in Flexmonster.
 

<FlexmonsterReact.Pivot toolbar={true}
                        ref="pivot"
                        componentFolder="https://cdn.flexmonster.com/"
                        width="100%"
                        report="https://cdn.flexmonster.com/reports/report.json"
                        
                        ready={this.onFlexmonsterReady}
                        reportcomplete={this.onReportComplete}
                        reportchange={this.onReportChange}
                        update={this.onUpdate}
                        cellclick={this.onCellClick}
                        celldoubleclick={this.onCellDoubleClick}
                        filteropen={this.onFilterOpen}
                        fieldslistopen={this.onFieldsListOpen}
                        fieldslistclose={this.onFieldsListClose}
/>

 
2) Provide the wanted behavior in the corresponding functions. For example:
 

onFlexmonsterReady = () => {
   console.log("Ready");
};

 
 
Please see our example on our GitHub: https://github.com/flexmonster/pivot-react
 
a) Clone the project:
 

git clone https://github.com/flexmonster/pivot-react.git

 
b) Navigate to the ES6 folder:
 

cd ES6

 
c) Run npm install:
 

npm install

 
d) Run the App:
 

npm start

 
e) To see the example with events and API calls, navigate to the following link and view output in the browser's console:
 

http://localhost:3000/api-calls

 
 
Please let us know if this works fine for you.
 
 
We are looking forward to hearing from you.
 
 
Best Regards,
Vera

Hello, Lucas!
 
Thank you for writing to us and for providing detailed info about the issue with the getReport API call.
 
Our team has managed to reproduce the reported behavior on our side. We are going to change the interface of the getReport method to allow getting the report with global and default options. The fix is going to be provided in a minor release ETA 11 Jan.
 
We would like to also mention the getOptions API call. Besides the options defined in the report, getOptions returns default and global options. Perhaps this method can be used as a temporary workaround for your case.
 
Hope it helps!
Please let us know if any other questions arise.
 
Kind regards,
Milena

Hi Lucas!
 
Thank you for providing further details about your use-case. 
 
We are glad to hear that the issue with getReport did not affect the development progress.
Our team will notify you as soon as a new version with getReport's changed interface is released.
 
Do not hesitate to contact us in case any questions arise.
 
Best regards,
Milena

Hello, Lucas,
 
We are happy to let you know that the type definition for getReport() API call was fixed.
 
This is included in the 2.8.24 version of Flexmonster: https://www.flexmonster.com/release-notes/.
 
You are welcome to update the component.
Here is our updating to the latest version tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
 
Please let us know if everything works fine for you.
 
Kind regards,
Milena

Hi, Lucas,
 
We were wondering whether the recent fix helped.
Please let us know if everything works fine.
 
Looking forward to hearing from you.
 
Best regards,
Milena