Get Free Trial

How to update flexmonster licenseKey dynamically in angular

Re-Open
Dama Ankaiah asked on January 22, 2021

Hi Team,
We are geting the licensekey from the database and need to assign the licensekey dynamically to flexmonster in angular(typescript  variable contains the key) because to use different keys for local and production environments.
I found below url and tried to assign a typescript variable([licenseKey]={Licence key}) in .html to  licenseKey but is throwing error
https://www.flexmonster.com/doc/managing-license-keys/

If possible could you please help us on this with example.

Please find the below sample .html code of mine and in typescript file assigning report settings[this.pivot.flexmonster.setReport(“report which stored in database”)] and data source.

<fm-pivot #pivot
[licenseKey]=”‘Licence key'”
[toolbar]=”true”
[width]=”‘100%'”
[height]=”‘100%'”>
</fm-pivot>
 
Regards,
Ankaiah
 
 

4 answers

Public
Vera Didenko Vera Didenko Flexmonster January 25, 2021

Hello, Ankaiah,
 
Thank you for your question.
 
As for the dynamic key selection, we can suggest licenseFilePath parameter.
It should be a URL endpoint that responds with an appropriate license key. This way, the code on the client-side remains the same, and you can manage license keys on the server-side. Here is an example:

// client-side (Angular)

<fm-pivot #pivot

[licenseFilePath]="'/api/getLicenseKey'"

[toolbar]="true"
[width]="'100%'"
[height]="'100%'">

</fm-pivot>
// server-side (Node.js sample)

app.get('/api/getLicenseKey', (req, res) => {
  if (req.get("origin")) {
    const origin = new URL(req.get("origin"));
    if (origin.hostname == "localhost") {
      res.send("XXX");
    } else if (origin.hostname == "example.com") {
      res.send("ZZZ");
    } else {
      res.status(404).end(); // key not found
    }
  } else { // same origin
    res.send("YYY");
  }
});

The back-end code above checks the hostname from where the request comes and responds with the corresponding key.
Please note that the server implementation is up to you, and you can store hostnames/keys in the database to simplify the management of multiple keys.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
Dama Ankaiah January 25, 2021

Hi Vera,
 
Thank you for your response!
 
I am getting the license key from database as configuration data  and available in  typescript variable before loading the flex monster report.
 
Is there any way to assign that type script variable to flexmonter  instead of calling separate api for license key.
 
Thanks,
Ankaiah
 
 

Public
Vera Didenko Vera Didenko Flexmonster January 26, 2021

Hello, Ankaiah,
 
Thank you for your reply.
 
Yes, the license key could be set on the client-side as well.
 
We kindly suggest the following approach (in Angular): 

  1. First, in app.component.ts, define a function for getting the needed license key, for example:
    getLicenseKey(): string {
    var licenseKeys = {
    "flexmonster.com": "XXX",
    "example.com": "ZZZ",
    "localhost": "Z7RG-XBHG4D-0H1017-46003U"
    };
    var hostname = window.location.hostname;
    return licenseKeys[hostname];
    }
  2. Then, in app.component.html, assign the function (in our case, getLicenseKey()) to the licenseKey property:
    <fm-pivot 
    #pivot
    [report]="report"
    [licenseKey]="getLicenseKey()">
    </fm-pivot>

Also, we have prepared a JSfiddle example for illustration purposes: https://jsfiddle.net/flexmonster/7kLenmp5/.
 
Please let us know if such a solution would work fine for you.
Looking forward to your response.
 
Kind regards,
Vera

Public
Dama Ankaiah January 29, 2021

It is worked fine for me. Thank you for your help!

Regards,
Ankaiah

Please login or Register to Submit Answer