This guide will help you integrate Flexmonster with the Ionic framework, which allows creating cross-platform mobile applications.
To run a sample application, you will need Node.js and npm. Get them here if they are not already installed on your machine.
This guide contains the following sections:
Follow the steps below to run a sample application demonstrating Flexmonster integration with either Ionic 5 and React, or Ionic 3 and Angular.
Download a .zip archive with the sample project or clone it with the following commands:
git clone https://github.com/flexmonster/pivot-ionic-react
cd pivot-ionic-react
git clone https://github.com/flexmonster/pivot-ionic
cd pivot-ionic
Install the npm packages described in the package.json file with the following command:
npm install
Run the sample application with the following command:
npm run start
The steps to embed Flexmonster into an application vary depending on the type of Ionic application.
Flexmonster can be integrated into an Ionic React application in the same way it is integrated into a React and Typescript application. See integration with React + Typescript for details.
To create a new Ionic React application, refer to the Ionic documentation.
Flexmonster can be integrated into an Ionic Angular application in the same way it is integrated into an Angular application. See integration with Angular for details.
To create a new Ionic Angular application, refer to the Ionic documentation.
The usage of Flexmonster attributes depends on the type of Ionic application.
In an Ionic React application, the FlexmonsterReact.Pivot component’s usage is the same as it is in React.
All attributes are equivalent to those passed to the new Flexmonster() API call. Check out the full list of available attributes.
Here is an example demonstrating how different attributes can be specified:
<FlexmonsterReact.Pivot
toolbar={true}
report="https://cdn.flexmonster.com/reports/report.json"
width="100%"
reportcomplete={this.reportCompleteHandler}
/>
In the above example, notice this line:
reportcomplete={this.reportCompleteHandler}
Here, we add a reportCompleteHandler to the reportcomplete event. Event handlers can be specified for all available Flexmonster events. Here is the full list of Flexmonster events.
In an Ionic Angular application, the <fm-pivot> directive’s usage is the same as in Angular. Learn more about this directive and its attributes: The <fm-pivot> directive.
You may be interested in the following articles: