Get Free Trial
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.

 

2 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!!

Please login or Register to Submit Answer