Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Pivot initialization – show column headers WITHOUT receiving data

Answered
Serban Vasile asked on March 19, 2020

One of the most common issues that our users bring to our attention is the fact that the launch of the web page which contains the pivot also calls the web service and prefills (or at least it tries to prefill) the pivot with data.
That is a big issue because:

  • The data the users are seeing is not necessarily reflecting the filters for the data the users want. We are trying hard to anticipate what they want, but it’s not possible to satisfy all. Also, we are consuming web service time, and may bring data the users discard and that is a bad design no matter what angle you are looking at.
  • In case the default filters on the web service bring no data, the pivot displays an annoying alert (I know you are working on a fix for it), but ALSO the pivot is NOT showing the column headers it was configured for, even without the data below. What we are left is this grid with empty cells, that basically communicates something is not finished, the page errored, and stuff like that.

I think you see where I am going to with this. We need a way to initialize the pivot WITHOUT data, showing the column headers and give it a proper look.
The pivot configuration mentions all these columns we are waiting for…is it really an impossible task what we are asking for?
 
Regards,
Serban

15 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster March 20, 2020

Hi Serban,
 
Thank you for writing to us.
 
In order for us to provide you with the most relevant solution here, could you please give us some more insights on the following points?
 

  1. Does Flexmonster always receive no data at the initial page launch? Or are there situations when some data is instantly passed to the pivot table when the page is opened by the user?
  2. You’ve mentioned that a grid with all cells being empty is not a satisfactory behavior in this situation. What exactly do you think would be a preferable grid view here instead?

 
Just in case this is something close to what you want to achieve, a potential solution in this situation involves defining a dataSource property of the report object as a reference to a CSV file with defined hierarchies but no further data definitions:
 

itemID,price,color,country

 
Please see the attached screenshot to demonstrate the results of this approach.
 
We would be happy to hear your thoughts. Looking forward to hearing from you.
 
Best regards,
Mykhailo

Public
Serban Vasile March 20, 2020

Users do not want any initialization data, period. We don’t want it too, if they would discard it anyway.
Creating a header-only csv is actually harder than bringing some data. Our csv web services actually process json/xml, and apply xslt to results to create csv. No data returned by filters means no output, no headers, nothing. It would be just the same if we processed json, xml. We chose csv because of size. We hate your json solution because you want config metadata as the first member of the json data, not a different path of json metadata. That is VERY difficult to process. Why not jsonpath for metadata, jsonpath for data? It would be so much more intuitive, and we could plug in almost all existing json web services like that. Don’t wait for things to be right at the top of the json tree…allow jsonpath to tell you where to find data and metadata. 
Why can’t you allow a fake refresh, build the header row from the flexmonster json config, where all the columns are mentioned, and format exactly like you would when you would have received at least a row. That is the format we want, the same as it would have data, but with no data.
As always, thanks much for the prompt answers.
Serban

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster March 24, 2020

Hi Serban,
 
Thank you for your swift response.
 
With JSON as your data source, there is another way to predefine the hierarchies and their captions – that is to use the mapping object.
 
This approach is better in your situation than defining a metaobject directly in your data, as in the report it stands independent from the data itself. Moreover, you can use it in combination with an empty data property of the dataSource object to create an empty grid with only hierarchy captions being displayed:
 

dataSource: {    
data: [{}],
mapping: {
"itemID": {
type: "number"
},
"price": {
type: "number"
},
"color": {
type: "string"
},
"country": {
type: "string"
}
},
},

 
Although this is similar to what we’ve suggested with the headers-only CSV in our previous reply, this approach does not require you to load any external data at all – only the headers row is loaded from the report.
 
We’ve prepared a quick JSFiddle example to illustrate this: https://jsfiddle.net/flexmonster/Lw1mozga/
 
For more info on Data Source & Mapping objects feel free to check out the following links:
Data Source: https://www.flexmonster.com/api/data-source-object/
Mapping: https://www.flexmonster.com/api/mapping-object/
 
We would be happy to hear your thoughts on this – please let us know what you think.
 
Best regards,
Mykhailo

Public
Serban Vasile April 1, 2020

Ok, data and mapping sound good but:
Can they be represented by functions with params that are SAVED in the config? I mean an equivalent of the url with querystring params? That is the biggest problem with this type of config…I’ve seen examples where data: getData(), but I haven’t seen anything like data: getData({param1: “val1”, param2: “val2”}) that survive the config save as json (as in json produced by Save, loaded with Open Local Report).
The datasource filename: http://blah.com?param1=val1&param2=val2 gets saved into the config json as is, with params, and their values. I need “data” and “mapping” to do the same, allow their being produced dynamically. And again, assuming that will eventually happen, it should also take into account the web service that produces the data/mapping already exists, and doesn’t necessarily have the relevant data/mapping nodes in the root. In other words, I need:

dataSource: {
dataType: "json",
dataUrl: "http://blahdata.com?query1=val1&query2=val2",
dataJsonPath: "$.store.book [*].author",
mappingUrl: "http://blahdata.com?query1=val1&query2=val2",
mappingJsonPath: "$.store.book [*].authorMapping[0]"
}

I think you are following me now. Json paths are pretty much standard, something like here https://www.npmjs.com/package/JSONPath
As always, thank you for your prompt answer.
Serban

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 7, 2020

Hi Serban,
 
Our apologies for the slight delay in response here.
 
We just wanted to let you know that our team is currently working on your question and we are evaluating the possible solutions.
 
We will make sure to reach out to you as soon as possible with our response.
 
Thank you for your patience! 
 
Best regards,
Mykhailo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 8, 2020

Hi Serban,
 
Thank you for giving us time to look deeper into this problem.
 
After some discussion with our dev team, we’ve decided it would be reasonable to add the possibility to load the mapping object from a specific remote URL. Please note that the ETA for this feature is May 18th.
 
Speaking of implementing the mentioned JSON path-like functionality, it does not fully align with our current roadmap, so while we’ve added this to the customers’ wishlist, we cannot provide you with a specific ETA here. Still, we will make sure to let you know if there are any updates on this matter.
 
Please let us know if you have any other questions we can help you with at the moment.
 
Best regards,
Mykhailo

Public
Serban Vasile April 8, 2020

You guys are awesome. That should move things much faster towards the implementation of the json data sources, for everybody.
I understand a jsonpath dependency is a bigger decision. We thought a while about it, as well. Once we agreed to use it, though, there isn’t a day to not wonder how much harder it would have been without it. By the way, the most used version (https://goessner.net/articles/JsonPath/), pure javascript function, is only 4kB (https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/jsonpath/jsonpath-0.8.0.js.txt)
For an angular project:
package.json:
dependencies: {
….
  “jsonpath”: “^1.0.2”,
….
}

  
app.component.ts:
imports:

import * as jsonPath from ‘jsonpath/jsonpath’;

 
constructor:

this.jp = new jsonPath.JSONPath();

 
usage:

this.jp.query(data, ‘$..Root.Response.Results’)
(returns array of json, as flexmonster likes it)

 
As always, thank you for listening to us.
 
Serban

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 9, 2020

Hi Serban,
 
Thank you for your kind words, it is great to hear that this plan is suitable for you!
 
We will make sure to take your advice into account when considering the jsonpath functionality in our product and we will surely inform you in case there is any news on this.
 
In the meantime, do not hesitate to reach out with any other questions we can assist you with.
 
Regards,
Mykhailo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 14, 2020

Hi Serban,
 
How are you?
 
We are writing to give you some updates on the feature of loading mapping from a remote source. Currently, our team is actively working on its implementation – however, due to its technical specificities, we will need a little bit more time to carry out all the necessary testing and make sure everything is working as expected.
 
With that in mind, we will have to postpone the release of this feature to our next minor update ETA June 1st. Please let us know if that works for you.
 
Looking forward to your response.
 
Best regards,
Mykhailo

Public
Serban Vasile May 14, 2020

No problem. Looking forward to your release, whenever that is available. Add that jsonPath as well, please, please, please, pretty please 🙂

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 2, 2020

Hi Serban,
 
We are happy to let you know that the mapping property now allows loading mapping from the remote source. Please see the following JSFiddle sample illustrating this: https://jsfiddle.net/flexmonster/5oxfubmc/
 
This is available in the 2.8.8 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/ 
 
Please let us know if everything works fine for you.
 
Best regards,
Mykhailo

Public
Serban Vasile June 3, 2020

Hi there,
Great news.
Will get to play with the mapping feature soon. I see in the sample you sent it’s pointing data to a csv stream. Does this mapping work with json, as well? In other words, does it replace the top json entry which normally describes the metadata?

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 4, 2020

Hi Serban,
 
The Mapping object is the recommended approach for defining the structure and specificities of your input data.
 
Therefore, yes, it is prioritized in the report, which is why it overrides the meta-object if it is defined inside the JSON data set you are passing to Flexmonster as a data source. Naturally, this also means that you don’t have to define a meta-object in your JSON data if you are already using the Flexmonster Mapping object.
 
As always, let us know if you have any further questions we can help you with.
 
Regards,
Mykhailo

Public
Serban Vasile June 4, 2020

Hey,
You guys rock!
This is probably one of the best features you added in the last year. People may not realize, but this was a big problem when trying to use FlexMonster with already existing json enabled web services.
Almost all modern web services produce json. All you have to do now is to add a leaf describing the data, the metadata leaf, and then point the mapping url Flexmonster, just released, to it. Or, better yet, create one common web service that serves as a repository of metadata. Any one of these alternatives is fantastic.
As always,
Thank you much for being so responsive to our needs.
Serban

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 5, 2020

Hi Serban,
 
Thank you for your feedback, we are glad to hear everything is working well for you!
 
Speaking of your suggestions, we will let you know if we implement something like this in the future.
 
Do not hesitate to reach out if you have any other questions we can assist you with.
 
Regards,
Mykhailo

Please login or Register to Submit Answer