Hi,
I'm building a report where one row and one column will be used as filters on the report. I see you can add a value that isn't being displayed as a filter and it shows up top in the filter area nice and neat. But at least through the UI, it appears you can't have a row/column being displayed AND shown as a filter up in the filter area. Is there a way to make this happen through config or through a little hackery?
See the screen shot for context - I want to be able to see accounting_month as a filter up by account_code in the filters area without losing accouting_month from the columns.
I know I can click on the column header, but for our users having a dedicated spot for them to manipulate filters would make it easier than looking in two places.
Thanks,
Bill
Hello, Bill!
Thank you for reaching out to us.
Kindly note that by design, it is possible to place one field to rows, columns, or report filters in Flexmonster component.
We suggest adding custom filter controls for the fields from rows and columns outside the Flexmonster component to achieve the desired behavior. Here is the brief algorithm:
1. Define the filtering area outside the Flexmonster component.
2. Hide the reportFilters
area in Flexmonster using CSS:
.fm-page-filter {
display: none !important;
}
3. Get all fields defined in rows, columns, and report filters, and create new filtering controls in the filtering area for them:
flexmonster.on("reportcomplete", () => {
const filters = [...pivot.getReportFilters(), ...pivot.getRows(), ...pivot.getColumns()];
//your code here
}
The reportcomplete
event here ensures that all the operations are performed after Flexmonster is fully loaded.
4. Use our openFilter()
API call to open the filter pop-up when clicking on the new controls.
5. Add the reportchange
event listener to synchronize new filtering controls with changes applied from the Field List.
6. (optional) Switch off default Flexmonster filtering:
report: {
options: {
showFilter: false,
//other options
},
//other report properties
}
We have prepared a JSFiddle example to illustrate the idea: https://jsfiddle.net/flexmonster/ypvsmw1u/.
Please let us know if the suggested approach works for you.
Kind regards,
Solomiia
Hello, Bill!
Hope you are doing well.
Our team is wondering if you had a chance to try the suggested approach and create the filtering area outside of Flexmonster component. Could you please let us know if it works well for your case?
Looking forward to hearing your feedback.
Kind regards,
Solomiia
Hi Solomiia,
I didn't try it yet, but I'm going to most likely use the first suggested solution of just creating a second data element which is a clone of the one that I have in the visualization to do filtering in a filter section.
Thank you for your help!
-Bill
Hello, Bill!
Thank you for your feedback.
We are glad to hear that our suggestions were helpful in finding the solution.
Feel free to reach out to us in case of any other questions.
Kind regards,
Solomiia