Integrating Flexmonster

Get started with Flexmonster CLI — the most convenient way to work with Flexmonster:

Step 1.1. Install Flexmonster CLI from npm:

npm install -g flexmonster-cli

Step 1.2. Get Flexmonster by running the following command inside your project:

flexmonster add js-flexmonster

This command downloads the flexmonster npm package to node_modules/ and adds it as a dependency to package.json. Check out the structure of the flexmonster package.

Add Flexmonster to your project by including the files directly from our CDN:

• Use the latest version of the component:

  <script src="https://cdn.flexmonster.com/flexmonster.js"></script>

• Use a specific version of the component:

  <script src="https://cdn.flexmonster.com/2.9.45/flexmonster.js"></script>

Note We recommend using a specific Flexmonster version to avoid unexpected component updates.

Add Flexmonster to your project by running the npm install command:

• Install the latest version of the component:

  npm install flexmonster --save-exact

• Install a specific version of the component:

  npm install flexmonster@2.9.45 --save-exact

Note We recommend installing Flexmonster with the --save-exact flag to avoid unexpected component updates.

Check out the structure of the flexmonster npm package.

Download a ZIP archive to use Flexmonster as a local package:

Step 1.1. Download the .zip package with Flexmonster:

Check out the structure of the downloaded package.

Step 1.2. Unarchive the package and copy the flexmonster/ folder into your project.

If you have a JVM-based web application, you can include Flexmonster in it using WebJars:

Step 1.1. Go to WebJars and search for Flexmonster using the Search input field.

Step 1.2. In the Build Tool column, select the tab with the build tool used in your project (e.g., Maven).

Step 1.3. Include Flexmonster in your configuration file using the code snippet provided in the Build Tool column. For example, Maven’s pom.xml configuration file should look similar to the following:

<dependencies>
  ...
  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>flexmonster</artifactId>
    <version>2.9.0</version>
  </dependency>
  ...
</dependencies>

Flexmonster can now be used in your JVM-based project.

• If you are using a module bundler, import Flexmonster in the way your bundler supports. For example:

  import Flexmonster from 'flexmonster';

• Alternatively, you can also import flexmonster.js in HTML using the <script> tag:

  <script src="node_modules/flexmonster/flexmonster.js"></script>

The flexmonster.js file was imported in step 1.

<script src="flexmonster/flexmonster.js"></script>

import Flexmonster from 'flexmonster';

const pivot = new Flexmonster({
  // container is the id of the <div> created in step 2.2
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true
});

Notice the componentFolder parameter — it should point to the folder with Flexmonster files. Since Flexmonster is installed as an npm package, the componentFolder should be defined as node_modules/flexmonster/.

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
 
<script>
  const pivot = new Flexmonster({
    // container is the id of the <div> created in step 2.2
    container: "pivotContainer",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true
  });
</script>

Notice the componentFolder parameter — it should point to the folder with Flexmonster files. Since Flexmonster is included from our CDN, the componentFolder should be defined as https://cdn.flexmonster.com/ (or https://cdn.flexmonster.com/<version>/ if you are using a specific Flexmonster version).

<script src="flexmonster/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
 
<script>
  const pivot = new Flexmonster({
    // container is the id of the <div> created in step 2.2
    container: "pivotContainer",
    componentFolder: "flexmonster/",
    toolbar: true
  });
</script>

Notice the componentFolder parameter — it should point to the folder with Flexmonster files. If this folder is in the root of your project, the componentFolder should be set to "flexmonster/". Otherwise, adjust the componentFolder according to the flexmonster/ folder's location in your project.

Note To use a trial version of Flexmonster from the ZIP package, you need to set a trial key. It can be found in the flexmonster/TrialKey.txt file. Copy the contents of the file and set the trial key using the licenseKey initialization parameter:

const pivot = new Flexmonster({
  container: "pivotContainer",
  // ...
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
});