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

Prevent to modify Fields options

Munir asked on May 6, 2019

I would like to prevent the user to change the “Columns” and “Values” fields.
He should edit only the “Report Filters” and “Rows”.
Something like prevent to drag and drop would be enough.
Is that possible?


3 answers

Vera Didenko Flexmonster May 6, 2019

Hello, Munir,

Thank you for writing to us.

Please note that for cases where the Field List should be only partly editable, you need to implement your own Field List supporting the needed behavior.
For adding functionality to your Field List the Flexmonster API calls can be used. 

Please let us know if everything worked and if you have further questions.

Best Regards,

Munir May 6, 2019

Hello, Vera.
Actually I don’t know how to do that (create my own Field List). Do you have some fiddle?
I already tried some methods of Flexmonster API calls.
Could you help me?

Vera Didenko Flexmonster May 7, 2019

Hello, Munir,
Thank you for your reply.
First of all, we would like to explain why preventing drag and drop for the “Columns” and “Values” fields will not be enough:
1) By selecting the checkbox near the items with numeric values in the Field List, the user will still be able to modify the “Values” field.
2) By unselecting the checkbox near any item, the corresponding field will be modified.
Here is an idea of how you can implement a custom field list that supports the desired behavior while corresponding to Flexmonster’s requirements :
1. Get all fields from the pivot table
   This can be accomplished via the getAllHierarchies() API call:

// The allFields variable will be an array
let allFields = flexmonster.getAllHierarchies();

The getAllHierarchies() API call returns an array of objects.
2. Get fields from the pivot table that are currently present in the “Columns” and “Values”
   This can be done by using the getColumns() and getMeasures() API calls:

let currentColumns = flexmonster.getColumns();

let currentValues = flexmonster.getMeasures();

3. Filter out the fields that are currently present in the “Columns” and “Values” 
   You can implement a filter function which will remove elements, which are present in the currentColumns and currentValues arrays, from the allFields array. 
4. Display the list of available fields and implement drag and drop
   You can create three div elements which represent:
           1) the list of elements to choose from
               Elements in the pre-filtered allFields array need to be displayed here.
           2) the “Report Filters” list
               Elements which are currently present in the “Report Filters” list need to be displayed.                     You can get them via the getReportFilters() API call:

let currentReportFilters = flexmonster.getReportFilters();

           3) the “Rows” list
               Elements which are currently present in the “Rows” list need to be displayed. You can get them via the getRows() API call:

let currentRows = flexmonster.getRows();

   Next, implement drag and drop.
   When an element is dropped into a certain field, you need to save this element to the currentReportFilters or currentRows array.
   Also, remove the relocated element from the array that it was taken from.
5. When the user clicks the “Apply” button, call the runQuery() API call
    The runQuery() API call will construct a new report.
    Here is a JSFiddle example showing how runQuery can be used.
Please let us know if this helps and if you have further questions.
Best Regards,

Please login or Register to Submit Answer