Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

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

Ashmi Suranse asked on May 14, 2019

I am using React with flexmonster. I have created a sample pivot using (https://www.flexmonster.com/doc/integration-with-react/#!es6)

  1. A React + ES6 application with Flexmonster Pivot

 

  1. Could you please tell me how do i call getReport() and setReport() in react? i do not have object handle on flexmonster.
  2. ALso how do i handle events with Flexmonster in react?  Please provide example/demo code for both of these questions.

 

8 answers

Public
Vera Didenko Flexmonster May 15, 2019

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

Public
Ashmi Suranse May 15, 2019

Thanks Vera, works like a charm!!

Public
Lucas Assis December 28, 2020

Hello everyone!
I’m testing Flexmonster into a React application but it shows a large difference in the getReport method from the one described in the API reference. Besides de documentation shows that it can receive an Object as parameter, using flexmonster for react does not give this interface for the method call.
How can I export the hole pivot table configuration (with globals and with defaults) in this case?
Best Regards,
Lucas Assis

Public
Milena Pechura Milena Pechura Flexmonster December 30, 2020

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

Public
Lucas Assis December 31, 2020

Hi Milena! Thanks for the update!
So far, managing the “slice” property from the Report object has been enough for the application we’re developing. But I guess it will be necessary to have the other ones in the future for a complete setup.
Best regards,
Lucas Assis

Public
Milena Pechura Milena Pechura Flexmonster January 5, 2021

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

Public
Milena Pechura Milena Pechura Flexmonster January 12, 2021

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

Public
Milena Pechura Milena Pechura Flexmonster 4 days ago

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

Please login or Register to Submit Answer