Is there a way to show a row or column as a filter in the filter area instead of having to filter by clicking the filter button on the column itself?

Answered
Bill Kaper asked on October 13, 2023

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

Attachments:
Filters.png

4 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster October 16, 2023

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

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster October 24, 2023

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

Public
Bill Kaper October 24, 2023

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

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster October 25, 2023

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

Please login or Register to Submit Answer