To GoodData homepage
Solved

apply same attribute elements to multiple attribute filters

  • 25 March 2022
  • 3 replies
  • 91 views
S
  • Shambo
  • Participating Frequently
  • 7 replies

We have an app that displays data from multiple workspaces. We want to add filters to the app, but we don’t want to user to have to select the same value in multiple filters.

The real-world example is we have two workspaces, each with its own list of Countries. We would like the user to be able to select USA in a single filter, and all reports from all workspaces would be filtered to where Country = USA for all of them.

The names of Attribute A and Attribute B will be different, but an element in Attribute A must match an element in Attribute B exactly. Example, Attribute A may be named Counties, and Attribute B is named World Countries, but both must have an element “USA” for this to work.

In more generic terms, we would like to allow the user to make one or more selections in an attribute filter, and have those selected attribute elements applied to one or more other filters on the same page.

Example: Workspace A has Attribute A, and Workspace B has Attribute B.

In the UI, we would like 2 PivotTables, one for each workspace, displaying the list of elements from its attribute:

PivotTable A Workspace A

Attribute A

  • Element 1
  • Element 2
  • Element 3

 

PivotTable B Workspace B

Attribute B

  • Element 1
  • Element 2
  • Element 4

 

There will be a single Attribute filter, Attribute A. When the user makes selections in this attribute filter, those same selections will be applied to Attribute B, and both PivotTables will update at the same time.

So if the user selects Element 1 and Element 2 in the Attribute A filter, those same elements will be applied in the Attribute B filter, and PivotTables A and B will update to reflect that filter input. 

If an attribute element is selected from the Attribute A filter that is not an attribute element in Attribute B (such as Element 3), the missing/non-relevant attribute element would be ignored. So if the user selects Element 1 and Element 3 in the Attribute A filter, only Element 1 would be applied to the Attribute B filter, since Element 3 is not an element of Attribute B.

 

 

 

icon

Best answer by Jiri Zajic 28 March 2022, 04:44

View original

3 replies

S

I made several attempts at this. First I tried to gather the values that are being applied to filter A. I can see them in the console.log, but I couldn’t get the map syntax correct.

I also tested how to pass values to the filter. Trying to leverage the “Define the default selection of values in the filter” documentation, I was able to able to pass values to filters:

const myFilterValues = ["USA","UK", "France"];

then for each filter, just pass that constant in the last parameter:

for filter A: filter={newPositiveAttributeFilter(Md.County, myFilterValues)}

for filter B: filter={newPositiveAttributeFilter(Md.WorldCounty, myFilterValues)}

This worked, however, this only makes the selections in the filters, it does not apply the filters. The user still has to click on each filter and click Apply.

So I guess I’m stuck at how to gather the filter values from the user input and get them into the myFilterValues constant.

Finally, the user should make the choice to apply the same values to all filters, meaning the user will make selections in Filter A, then click a button for them to be applied to Filter B, Filter C, et al. 

Jiri Zajic
Userlevel 3

Hello @Shambo,

Thank you for your question. When building a custom application using GoodData.UI, it is possible to have a single attribute filter that applies across multiple different insights from different workspaces.

I went ahead and put together a small code example that works roughly what you described. There is only a single attribute filter on the page, but when user makes their selection it applies to both insights. You could have another attribute filter on the page and keep them in sync, but I found that redundant for this particular use-case.

A common practice is to simply set a filter state after user selects and applies their values. In this example, there are two states inside our application. When the user selects their values, one state gets updated with attribute A and is applied to insight A from workspace A, while the other state gets updated with attribute B and is applied to insight B from workspace B. The only common ground are the selected values that are shared in both states.

<AttributeFilter
    workspace={WORKSPACE_A}
    filter={newPositiveAttributeFilter(ATTRIBUTE_A, [])}
    onApply={filter => {
        if (filterIsEmpty(filter)) {
            setFiltersA([]);
            setFiltersB([]);
        } else {
            const selectedValues = filterAttributeElements(filter);
            const newAttributeFilter = isPositiveAttributeFilter(filter) ?
                newPositiveAttributeFilter : newNegativeAttributeFilter;

            const filterA = newAttributeFilter(ATTRIBUTE_A, selectedValues);
            const filterB = newAttributeFilter(ATTRIBUTE_B, selectedValues);

            setFiltersA([filterA]);
            setFiltersB([filterB]);
        }
    }}
/>
<InsightView
    workspace={WORKSPACE_A}
    insight={INSIGHT_A}
    filters={filtersA}
/>
<InsightView
    workspace={WORKSPACE_B}
    insight={INSIGHT_B}
    filters={filtersB}
/>

I pushed the code into https://github.com/gooddata/ui-sdk-examples/tree/master/cgra-multiworkspacefilter. Please note that this is a minimalistic working example, and not a production-ready implementation!

I hope this helps. Feel free to stop by at the next GD.UI Office Hours for a chat.

Jiri, Principal Developer Advocate

 

S

This works! 

It was pretty simple to implement, and I can see how to extend this to multiple filters and insights.

Thanks very much.

Reply


Join us on
Welcome to the GoodData Community!Cookie settings