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:

As a variable or an inline string.
As a URL to a file or a server-side script providing the key.

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: