https://www.gooddata.com/ logo
Join Slack
Powered by
Is it possible to be able to add or remove a filte...
# gooddata-ui
j
Is it possible to be able to add or remove a filter via the interfaces exposed by the Dashboard component? Really what I am looking for is a way to add a drop down select that is styled like the other gooddata filters that I can use for toggling insights in the dashboard itself.
l
hi @Justin Unverricht, there are some alpha-level APIs that you can leverage for this (stabilization of the APIs pending). however the flexibility vs convenience is not so favorable at this moment. If you are doing the mount of 
Dashboard
component yourself, there are a bunch of props that you can leverage to customize either the top bar (with title & buttons) or the filter bar. so.. for instance what you can do is to add 
FilterBar
prop.. and in it, specify your custom component to use for filtering. the props that your custom component receive will contain 
DefaultFilterBar
. so then.. your custom component can for instance add additional control on the side of the filter bar and then render the DefaultFilterBar
at this moment, there is no way nice way to inject custom content (e.g. your dropdown) into the filter bar itself. there is an awkward way to do it.. i can elaborate if needed let me know 🙂
which.. imho.. would make sense; i’ll link this as a use-case into the milestone where we want to expand and stabilize filtering APIs
p
Can post messages be used to do this? Replace whole filter context of the dashboard or change it?
l
@Petr Dolejsi this is Dashboard component…
p
My bad
l
now.. let’s say you add the custom dropdown the way I have outlined above..
and you need to actually hide/show some insights you can control the layout by dispatching commands to the Dashboard model. these in essence Redux actions that you can dispatch using 
useDashboardDispatch
the available commands to manipulate the layout are described in full here: https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui-dashboard/src/model/commands/layout.ts
(again, alpha level APIs so be careful as the may change subtly as we stabilize)
using these, you can add/remove/replace rows/columns
j
Thanks I will give this a shot and see what I can do with this.
What I am really after is the ability to add a dropdown that has a list of measures in it that once selected would update a number of insights in the dashboard with that new measure
I have the code for dynamically changing the measures, just trying to find out a good way to add a dropdown or multi select that has the same stying to the dashboard so it doesnt look out of place
should also mention that I am using the UseDashboardLoader here
l
hi @Justin Unverricht ook I understand better now.. initially thought you want to modify layout. since you do the 
useDashboardLoader
and mount the dashboard yourself, you have the ability to customize the props and fiddle with the FilterBar. through this prop, you can inject custom filter bar and prepend additional dropdown (it should be possible to inject inside the filter bar as well.. it will not be nice but should be doable.. let me know if you need advice on this) to modify insight and add/remove measure, what you can do is to use a custom insight provider. in that provider, your code gets a hold of insight, modifies it as you need, then uses the 
DefaultDefaultInsightWidget
to render the insight. this way, you do not have to ‘reinvent’ the insight widget itself, just intercept the insight it renders. i think @Jiri Zajic was playing with Dashboard in this general direction (dynamic measures/attributes) and may shed more light
j
Great, I dont need any help with the dynamic measures, but I cant figure out how to apply the FIlterBar prop, any advice with that would be useful
j
Hello @Justin Unverricht, to apply the custom filter bar, you could something like this:
Copy code
<Dashboard
    dashboard={idRef(DASHBOARD_ID)}
    FilterBarComponent={(defaultFilterBar) => {
        console.log(defaultFilterBar);
        const { DefaultFilterBar } = defaultFilterBar;
        return <DefaultFilterBar {...defaultFilterBar} />;
    }}
/>
Screen Shot 2021-12-28 at 14.26.30.png
j
Oh thanks this is very useful
Oh btw do you know off the top of your head how to trigger a rerender of the dashboard using the Dashboard commands using dispatch?
j
Unfortunately, I don't. There's 
refreshInsightWidget
and 
refreshKpiWidget
, but if you need the whole dashboard to refresh, maybe you could let React handle that from the outside of the Dashboard component? I might be completely off here…
Open in Slack
PreviousNext
Powered by