We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Managing license keys

    Flexmonster Pivot Table needs a license key. This guide describes how to use and store them.

    You can also check out which types of license keys exist.

    Setting a license key

    When you receive a license key, you can set it for Flexmonster in two ways:

    Setting a license key as a variable or an inline string

    To set a license key as a variable or an inline string, use the licenseKey parameter of new Flexmonster():

    In pure JavaScript

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

    In React

    <FlexmonsterReact.Pivot
     licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
    />

    In Angular

    <fm-pivot 
    licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX">
    </fm-pivot>

    In Vue

    <Pivot
     licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
    />

    With the licenseKey parameter, it is also possible to set multiple license keys as an array of strings.

    If you experience any errors after setting the license key, see the Troubleshooting guide.

    Getting a license key from a file or a server-side script

    To load a license key from a file or a server-side script providing the key, use the licenseFilePath parameter of new Flexmonster():

    In pure JavaScript

    const pivot = new Flexmonster({
      container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
      licenseFilePath: "<URL to a file or a script>"
    });

    In React

    <FlexmonsterReact.Pivot
    licenseFilePath="<URL to a file or a script>"
    />

    In Angular

    <fm-pivot 
    licenseFilePath="<URL to a file or a script>">
    </fm-pivot>

    In Vue

    <Pivot
    licenseFilePath="<URL to a file or a script>"
    />

    If you experience any errors, see the Troubleshooting guide.

    Setting multiple license keys

    If you have multiple license keys for different environments, specify the licenseKey as an array of strings to pass these keys to Flexmonster. The component will use the first valid key from the array.

    See the examples of setting multiple license keys below:

    In pure JavaScript

    const pivot = new Flexmonster({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      licenseKey: [
        "XXXX-XXXX-XXXX-XXXX-XXXX",
        "YYYY-YYYY-YYYY-YYYY-YYYY"
      ]
    });

    In React

    <FlexmonsterReact.Pivot
     licenseKey={[
      "XXXX-XXXX-XXXX-XXXX-XXXX",
      "YYYY-YYYY-YYYY-YYYY-YYYY"
     ]}
    />

    In Angular

    <fm-pivot 
     [licenseKey]="[
      'XXXX-XXXX-XXXX-XXXX-XXXX',
      'YYYY-YYYY-YYYY-YYYY-YYYY'
     ]">
    </fm-pivot>

    In Vue

    <Pivot
     v-bind:licenseKey="[
      'XXXX-XXXX-XXXX-XXXX-XXXX',
      'YYYY-YYYY-YYYY-YYYY-YYYY'
     ]"
    />

    If you experience any errors, see the Troubleshooting guide.

    Checking a license key

    You can check your license key by clicking on the grid and pressing Ctrl + Alt + i (Option + Control + i on macOS). This will open the pop-up window displaying your license information.

    Storing license keys

    We recommend storing license keys not directly in code, especially production keys. Here is the list of best practices for storing license keys:

    • In a centralized storage. For example, in a database.
      To set such a key for Flexmonster, create a script that extracts the key from the storage and returns it on the GET request. Then, specify a URL to that script in the licenseFilePath property.
      With this approach, license keys can be updated in the component without modifying the project code. In addition, the server-side script can be configured to return different license keys based on the incoming request.
    • As an environment variable. For example, in the .env file in the root of your project. To set the variable with the key for Flexmonster, use the licenseKey property.
    • In a file on the server. To set a key from this file for Flexmonster, use the licenseFilePath property.

    What’s next?

    You may be interested in the following articles: