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 it here if it’s not already installed on your machine.
After that, choose one of the following options:
Follow the steps below to run the sample application demonstrating Flexmonster integration with either Ionic 5 + React or Ionic 3 + Angular.
Download the .zip
archive with the sample project or clone it with the following command:
git clone https://github.com/flexmonster/pivot-ionic-react.git pivot-ionic
cd pivot-ionic
git clone https://github.com/flexmonster/pivot-ionic.git pivot-ionic
cd pivot-ionic
Install 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
Steps to embed Flexmonster into an application vary depending on the Ionic application’s type.
Flexmonster can be integrated into an Ionic React application in the same way it is integrated into React+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 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 Ionic application’s type.
In the application designed using Ionic React, the FlexmonsterReact.Pivot
component’s usage is the same as 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 are specified:
<FlexmonsterReact.Pivot
toolbar = {true}
report = "https://cdn.flexmonster.com/reports/report.json"
width = "100%"
reportcomplete = {this.reportCompleteHandler}
/>
In the above example, notice the following line:
reportcomplete = {this.reportCompleteHandler}
Here, we add reportCompleteHandler
to the reportcomplete
event. Event handlers can be specified for all available Flexmonster events. Here is the full list of Flexmonster events.
In the application designed using Ionic Angular, the fm-pivot
directive’s usage is the same as in Angular: the name of each directive’s attribute is surrounded by square brackets, and each attribute’s value can be of any type, including an Angular variable.
To use a string value, enclose it by single quotes within the double quotes (e.g., [report]="'https://cdn.flexmonster.com/reports/report.json'"
).
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 are specified:
<fm-pivot
[toolbar]="true"
[width]="'100%'"
[height]="500"
[report]="'https://cdn.flexmonster.com/reports/report.json'"
(reportcomplete)="onReportComplete()">
Flexmonster will appear here
</fm-pivot>
In the above example, notice the following line:
(reportcomplete)="onReportComplete()"
Here, we add the onReportComplete
handler to the reportcomplete
event. In Angular, events are surrounded by round brackets instead of square brackets. Here is the full list of Flexmonster events.
You may be interested in the following articles: