asked on January 21, 2022
Currently if the pivot filters mean no data exists for that slice, the component just shows an empty table which leads some users to wonder whether there isn't a bug/problem.
Is there a way to display a more use friendly message on the table or as a popup (when using CSV/JSON data source setting showEmptyData: false does this)?
Here's an example fiddle of what I mean: https://jsfiddle.net/3v8mzr7w/
Something like "No data is available for the selected filters" or something similar would be best to disambiguate with actual errors on the backend/component.
Thank you,
Ezequiel
⋅ January 24, 2022
Hello, Ezequiel,
Thank you for your question and for providing a JSFiddle example.
A possible solution is to use the callback function approach to connect Flexmonster to your custom data source API endpoint. The callback function should be specified in the dataSource.url property instead of the URL:
var pivot = new Flexmonster({
...
report: {
dataSource: {
type: "api",
url: pivotEndpoint,
index: index
},
...
}
...
});
The function accepts three parameters: the request (requestStringified), on success callback function (successCallback), and on error callback function (errorCallback):
function pivotEndpoint(requestStringified, successCallback, errorCallback) { ... }
By wrapping the requests and responses in the callback function, you could add additional logic on the client-side as to how to handle certain responses. This way, you could check if the /select response is empty and, if so, display a custom message.
We have modified the provided JSFiddle to illustrate this approach: https://jsfiddle.net/flexmonster/40htps2b/.
In the example, we used the alert() API call to display a pop-up in Flexmonster when the server responds with an empty /select.
Please let us know if this works for you.
Looking forward to your reply.
Kind regards,
Vera
⋅ January 28, 2022
Cheers! That seems really good.
Is there a way to still use Flexmonster's internal request/AJAX handler instead of using JQuery's .ajax function? Don't really want to have to add an extra dependency if I can help it.
⋅ January 28, 2022
Hello, Ezequiel,
Thank you for your reply.
We are happy to hear that the suggested approach works for you.
Yes, you can use other built-in ways to initiate and handle requests. For example, you could use the built-in XMLHttpRequest or the Fetch API approaches. Both XMLHttpRequest and the Fetch API don't require extra dependencies.
Here is a modified version of the example provided earlier where the Fetch API is used instead of JQuery: https://jsfiddle.net/flexmonster/k6c3eywb/.
We hope this helps.
Should other questions arise, feel free to reach out.
Kind regards,
Vera