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
⋅ 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
⋅ 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
⋅ 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):
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];
}
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
⋅ January 29, 2021
It is worked fine for me. Thank you for your help!
Regards,
Ankaiah