asked on July 17, 2020
Hello
I am using Vue JS with Flexmonster (via https://github.com/flexmonster/vue-flexmonster) with an Elasticsearch data source. The Flexmonster pivot is embedded within a web form where the user can set additional filters - i.e. filters outside of Flexmonster. When the user changes one of those filters I want to invoke a back-end refresh of the data - i.e. perform an Elasticsearch search and update the data in the pivot table. I have tried invoking the 'refresh' method but that doesn't seem to do anything. Can you tell me how I can force Flexmonster to issue a search request to Elasticsearch please?
As some background, I am using an Elasticsearch proxy server to intercept and enhance the DSL query that Flexmonster constructs and add in the extra filter query conditions that the user has selected in the web app.
My Pivot declaration looks like this in my VueJS app:
<Pivot
ref="pivot"
:report="olap"
:beforetoolbarcreated="customizeToolbar"
:licenseKey="'blah...blah....'"
:toolbar="true"
:height="'100%'"
:key="key"
>
</Pivot>
...and the Pivot data source looks like this:
olap() {
return {
dataSource: {
dataSourceType: 'elasticsearch',
node: this.olapNode,
index: 'data',
mapping: {
'Reporting Date': {
format: 'yyyy-MM-dd'
}
}
},
options: {
datePattern: 'yyyy-MM-dd'
},
formats: [
{
thousandsSeparator: ',',
maxDecimalPlaces: 2
}
]
};
}
...and the 'olapNode' endpoint like this:
olapNode() {
return `http://localhost:3000/olap/${this.clientDbId}/${this.userSubjectId}/${filterUuid}`;
}
This resolves to example API mapping and search requests like these:
http://localhost:3000/olap/client_XX/93097c73-4780-4047-81d7-484090ae9597/15619bed-8545-4b02-b3cb-ae3252d229b0/data/_mapping
http://localhost:3000/olap/client_XX/93097c73-4780-4047-81d7-484090ae9597/15619bed-8545-4b02-b3cb-ae3252d229b0/data/_search
I execute the following method in the VueJS component to try to get Flexmonster to refresh:
refreshData() {
console.log('pivotview, refreshData')
this.$refs.pivot.flexmonster.refresh()
}
...but this doesn't do anything. Is there another approach I should be using to get Flexmonster to issue the API call?
Many thanks
Mark
⋅ July 20, 2020
Hello, Mark,
Thank you for writing to us.
For refreshing the data set, we kindly recommend using the updateData() or connectTo() API call.
Also, we would like to mention that depending on the use case the setFilter() API call could be used instead to filter the data.
This way you could construct filters based on the selected values and apply them to Flexmonster.
Please let us know if this works.
Looking forward to your response.
Kind regards,
Vera
⋅ July 27, 2020
Hello, Mark,
We would like to kindly take an interest in whether the provided solution worked for you. Did it work to update the data in Flexmonster?
If any questions or difficulties remain, please do let us know - we are happy to help.
Looking forward to your reply.
Kind regards,
Vera
⋅ July 28, 2020
Hello Vera
Unfortunately none of those options work. The "updateData()" method in the VueJS which I call is :
updateData() {
console.log('PivotView - updateData')
this.$refs.pivot.flexmonster.updateData(this.olap)
},
All this does is clear the pivot table completely and does not invoke an API request to the back-end Elasticsearch proxy. I was expecting the Flexmonster component to issue a new search request.
The "connectTo()" method does not match my use case - I don't want to change the data source connection details.
Similarly, the "setFilter()" method does not match my use case - I don't want to set filters in that way.
Can you offer any suggestions please?
Thanks
Mark
⋅ July 28, 2020
Hello Vera - extra information for you...
I did try creating a filter that would try to force Flexmonster to launch an API search:
filterData() {
console.log('PivotView, filterData');
this.$refs.pivot.flexmonster.setFilter("Response Id", {
"not_equal": "879aa10e-6433-4982-bcca-4a418674f7ec"
});
}
...there would never be a "Response Id" with that value so it should return all data, but this doesn't trigger an API request.
Regards
Mark
⋅ July 29, 2020
Hello, Mark,
Thank you for your reply.
updateData() API call accepts a dataSource object. In the code snippet you provided, it looks like a report object is passed instead. This could be the reason for the unexpected result with an empty pivot table.dataSource object to the updateData() API call? For simplicity, you can get the current dataSource object from Flexmonster through the getReport() API call, for instance:
pivot.updateData(pivot.getReport().dataSource);
updateData() API call doesn't refresh the data, we kindly recommend the following approach:
First, save the current report object using the getReport() API call.
Then, the clear() API call could be used to clear the component's data.
After the data is cleared, load the report back using the setReport() API call - as a result, a new data query will be initiated.
var currentReport = pivot.getReport();
pivot.clear();
pivot.setReport(currentReport);
We have prepared a JSFiddle example showing the described approaches: https://jsfiddle.net/flexmonster/tn6xLprz/
By navigating to the browser's network tab, you can see how each method triggers a new data query.
Please let us know if this works for you.
Looking forward to your response.
Kind regards,
Vera
⋅ July 29, 2020
Hello Vera
Your first suggestion solved the problem - thank you! Your documentation doesn't provide an example for using updateData() with Elasticsearch but I should have worked it out myself. Many thanks for your detailed responses to my questions - I have to say that the Flexmonster support is always fantastic: fast, accurate, friendly, professional and you are always able to provide the solutions. Very good indeed - please pass on my thanks to everyone at Flexmonster 🙂
Kind regards
Mark
⋅ July 30, 2020
Hello, Mark,
Thank you for your kind feedback, I will definitely relay it to the rest of my team 🙂
We are happy to hear that you found our advice helpful.
As always, please feel free to reach out in case any questions arise.
Kind regards,
Vera