how to build a selection panel from multi valued field

Hello, Eric!
 
Thank you for your question.
 
Kindly note that Flexmonster works only with flat-type data, which can be put in one cell, for example, numbers, booleans, and strings. 
 
Keeping this in mind, if the user_groups comes to Flexmonster as a long string with all group names divided by "||" delimiter, we can suggest the following workaround to build a selection panel to display all possible individual values of user_groups:
 
1. Get all user_groups members using getMembers() API call:

const groups = flexmonster.getMembers('user_groups').map(g => g.caption); 

 
2. Parse the strings from the groups array to get the array of distinct group names. 
There is more than one way to achieve this behavior. For example, we can use the built-in javascript string.split("||") function to split each string into an array, and array.includes(value) to check for the duplicates.
 
3. To filter the data on the grid by one of the group names, we can use the reportFilters with the contain query type. 
ReportFilters are part of a SliceObject as well as rows and columns, so we need to rerun the slice with the new reportFilter using runQuery() API call:

flexmonster.runQuery({
    reportFilters: [{
        uniqueName: "user_groups",
            filter: {
                query: {
                    contain: groupName
                }
            }
    }],
    rows: [...],
    columns: [...],
    measures: [...],
    ...
});

4. The UI selection panel can be created in many different ways. For example, you can dynamically add buttons to the DOM, setting the function from step 3 with the corresponding group name onclick.
 
We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/0m1rbsu3/.
In the example, the getGroupMembers() function shows the approach described in steps 1-2, setGroupFilter(groupName) - in step 3, and addUIControls() - in step 4.

Please note the use of reportcomplete event in the example. It helps to make sure that we start processing the data on the client while the data is fully loaded and all UI elements are already rendered.
 
We hope it helps.
Please let us know if the suggested approach works for your case.
 
Looking forward to hearing from you.
 
Regards,
Solomiia

Hello, Eric!

Hope you are doing well.

Our team is wondering if you had a chance to try the suggested approach of filtering by the value of a multi-valued field.
Could you please let us know if it works for your case?

Feel free to contact us in case of any other questions.

Regards,
Solomiia

Hello, Eric!
 
Thank you for your question.
 
Kindly note that you can hide all built-in filter controls in Flexmonster with showFilter option as follows:

report: {
    ...
    options: {
      grid: {
        showFilter: false
      }
    },
}

We have modified the previous JSFiddle example to illustrate the described approach: https://jsfiddle.net/flexmonster/a0fqvo8j/.
 
Hope you will find our answer helpful.
 
Regards,
Solomiia

Hello, Eric!
 
Thank you for getting back to us.
 
Our team would like to mention one more approach for disabling filters for user_group using mapping:

dataSource: {
    ...
    mapping: {
        "user_groups": {
          filters: false
        }
    }
},

Here is a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/4fsdjgz9/.
 
We recommend combining filters mapping property with the reportFilters approach we have suggested in our first answer to this thread.
This way, the filters for user_groups would be hidden on the grid, but you can filter by the group name using your own UI elements(e.g., buttons or select): https://jsfiddle.net/flexmonster/wcjxto3q/.
 
Could you please let us know if the suggested approach works for your case?
 
Regards,
Solomiia

Hello, Eric!

Thank you for your feedback. We will keep the JSFiddle available.
Please let us know if any other questions arise.

Kind regards,
Maksym