Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Ionic

    This guide will help you integrate Flexmonster with the Ionic framework, which allows creating cross-platform mobile applications.

    Prerequisites

    Run a sample project from GitHub

    Follow the steps below to run a sample application demonstrating Flexmonster integration with Ionic and React or Ionic and Angular.

    Step 1. Download or clone the sample project

    Download a .zip archive with the sample project or clone it with the following commands:

    Ionic React project

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

    Ionic Angular project

    git clone https://github.com/flexmonster/pivot-ionic
    cd pivot-ionic

    Step 2. Install npm dependencies

    Install the npm dependencies described in the package.json file with the following command:

    npm install

    Step 3. Run the project

    Run the sample application with the following command:

    npm run start

    Integrate Flexmonster into an Ionic application

    The steps to embed Flexmonster into an application vary depending on the type of Ionic application.

    Ionic React project

    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.

    Ionic Angular project

    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.

    Flexmonster attributes

    The usage of Flexmonster attributes depends on the type of Ionic application.

    Ionic React project

    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.

    Ionic Angular project

    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.

    What’s next?

    You may be interested in the following articles: