Need a special offer?Find out if your project fits.
+

how to set athentication header when loading report from saved report

Closed
Eric Malalel asked on November 11, 2022

All our reports use secured REST API calls to get the data, and the authorization header is not saved when the user saves the reports, which is fine for security reasons.
However, how do we add a valid authorization header when we want to run a report opened using open local or or open remote from flexmonster toolbar menus?

6 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster November 14, 2022

Hello, Eric,

Thank you for reaching out to us.

Our team is currently working on your question. We will get back to you soon.

Kind regards,
Nadia

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster November 15, 2022

Hello, Eric,

Thank you for giving us some time.

In such a case, we recommend implementing your own logic of loading the report into the Flexmonster. You can remove the default Open local report and Open remote report tabs from the toolbar and add the custom one using the Toolbar customization
Feel free to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/2dqmbrzk/ 

Please let us know if it works for you. Feel free to contact us if other questions arise.

Kind regards,
Nadia

Public
Eric Malalel November 24, 2022

I have been able to customize the toolbar but I am not able to add requestHeaders to the loaded report.
Here is my code for toolbar customization:

 customizeFlexmonsterToolbar(toolbar: Flexmonster.Toolbar): void {
let tabs = toolbar.getTabs();
toolbar.getTabs = () => {
// remove unused tabs using their ids
tabs = tabs.filter(tab => tab.id !== 'fm-tab-connect' && tab.id !== 'fm-tab-open');
tabs.unshift({
id: 'fm-tab-custom_open',
title: $localize`Open`,
handler: customOpenTabHandler,
icon: toolbar.icons.open_local
});
return tabs;
};
const customOpenTabHandler = () => {
this.pivot.flexmonster.open();
};
}

And for loading the report:

 this.pivot.flexmonster.on('loadingreportfile', () => {
const report = this.pivot.flexmonster.getReport() as Flexmonster.Report;
report.dataSource.requestHeaders = {
Authorization: GlobalVariablesService.customerName + ':' + this.token.getToken()
};
console.log(report);
this.pivot.flexmonster.setReport(report);
});

Please advise.

Public
Maksym Diachenko Maksym Diachenko Flexmonster November 25, 2022

Hello, Eric!

Thank you for sharing code snippets with us.

Kindly note that currently, Flexmonster does not provide a direct approach allowing you to implement this functionality. Instead of using Flexmosnter's open() method, we recommend implementing your custom function for opening the JSON report from the file system. This way, you will catch the state when the report does not contain needed headers and modify it, which is not currently possible to do with Flexmonster events.

After the report is successfully loaded, you can use the same approach as in your second code snippet with the loadingreportfile event handler. Modify the report object by adding the request headers and then pass it to Flexmonster with the setReport() method.

This custom functionality can be embedded into the custom toolbar tab.

Please let us know if the suggested approach works for you.

Best Regards,
Maksym

Public
Eric Malalel November 29, 2022

I am now saving reports in database and reloading them from database, then adding the request headers.
Everything works fine, you can close this ticket.

Public
Maksym Diachenko Maksym Diachenko Flexmonster November 30, 2022

Hi, Eric!

Thank you for your feedback.
We are glad to hear that you were able to find a solution.
Feel free to contact us if any other questions arise.

Kind Regards,
Maksym

This question is now closed