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

How to use "customizeAPIRequest" with Vue JS

Answered
Mark Spicer asked on July 3, 2020

I need to customise the API requests that Flexmonster makes and so I plan to use the "customizeAPIRequest" handler to do this. I am using Vue JS and the "vue-flexmonster" NPM package that you provide. My HTML code looks like this:

....
  <Pivot
ref="pivot"
:report="report"
:licenseKey="'AAAA-BBBBBB-CCCCCC-DDDDDD'"
:toolbar="true"
:height="'100%'"
:customizeAPIRequest="myeventHandler"
>
</Pivot>
....

...and the JS code to handle it:

 methods: {
myeventHandler: function(req) {
console.log('handleCustomizeAPIRequest', req)
req.requestHeaders = {
"customHeader1": "This is the first custom request header",
"customHeader2": "This is the second custom request header"
};
console.log(req);
return(req);
}
}

Unfortunately this doesn't seem to work, the 'myeventHandler' is never called. Am I doing something wrong?
Thanks

9 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 3, 2020

Hello,
 
Thank you for contacting us.
 
Our team wants to notice that we did not manage to reproduce the problem on our side.
 
We have prepared an example that uses code snippets provided by you.
The example can be downloaded by the link: https://static.flexmonster.com/uploads/2020/07/08123048/pivot-vue.zip.
 
Please run the following set of commands in order to launch and test the example:

> npm install
> npm run serve

 
Your code snippets can be found in the src/Example.vue file.
 
Please open the developer tools of your browser and choose the "Network" tab in order to see all outcoming requests, complemented with custom request headers. You are welcome to see the following screenshot for the reference.

 
Please let us know if it works for you.
Do not hesitate to contact us in case further assistance is needed.
 
Regards,
Illia

Public
Mark Spicer July 4, 2020

Hello Illia
I see that it works and I have just realised why. I am using Elasticsearch not a custom API, and I have just read that the "customizeAPIRequest" event handler can only be used use with the API data source. I need it to work with Elasticsearch because I need to inject some user authentication data into the Elasticsearch request. I send the Flexmonster Elasticsearch requests to a proxy server which needs to append additional ES query values to the FM request before forwarding the requests onto our Elasticsearch instance.
In other words I am updating the DSL before it hits the Elasticsearch endpoint to apply additional filtering applicable to the current user's role and any other filters that they may have set in our web application. I have to have some way of passing additional request header data with each FM request.
Please can you advise me on how I can achieve that?
Many thanks
Mark

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 6, 2020

Hello, Mark,
 
Thank you for your feedback and for providing additional details.
 
The required functionality can be implemented using the requestHeaders property of the dataSource object.
 
However, we want to kindly notice that there is a known issue with requestHeaders property used with Elasticsearch. Specifying such property entails an error. Even so, the fix for that problem will be provided with the nearest minor update ETA July 14.
Our team will notify you as soon as the version with a fix is available to download.
 
As for now, we suggest referring to our documentation dedicated to the Data Source Object in order to get detailed information about the requestHeaders property.
 
Kind regards,
Illia

Public
Mark Spicer July 6, 2020

Hello Illia
That's great news, I knew you would have a solution 🙂
Please let me know when the fix is available.
Many thanks
Mark

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 14, 2020

Hello, Mark,
 
We are glad to announce that for Elasticsearch, the issue with adding custom request headers was fixed.
 
This is available in the 2.8.11 version of Flexmonster: https://www.flexmonster.com/release-notes/.
 
You are welcome to update the component.
Here is our updating to the latest version guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
 
Also, we have prepared an example demonstrating using the requestHeaders property.
You are welcome to check out it by the link: http://jsfiddle.net/flexmonster/2sawgvLx/.
 
Please let us know if everything works fine for you.
 
Best regards,
Illia

Public
Mark Spicer July 14, 2020

Hi Illia
Excellent, thank you for letting me know. I will test it later in the week.
Regards
Mark

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 21, 2020

Hello, Mark,
 
Our team is wondering whether you had time to test the provided fix.
 
Please let us know if it works for your case.
 
Kind regards,
Illia

Public
Mark Spicer July 23, 2020

Hello Illia
We've done some limited testing and everything is working fine. If we see any problems I'll let you know but I'm happy so far.
Many thanks
Mark

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 23, 2020

Hello, Mark,
 
Thank you for your feedback.
 
We are happy to hear everything works for you.

Do not hesitate to contact us in case any other questions occur.
 
Regards,
Illia

Please login or Register to Submit Answer