Solved

Allow saving of filter setting for embedded dashboards

  • 3 December 2021
  • 10 replies
  • 106 views

I’m evaluating the GoodData Platform (not CN) for a client build. We want to be able to quickly build dashboards and some one-off charts based on existing data in Snowflake. One of the required features is for users to be able to access pre-defined filters, and also for them to be able to save their own filter sets.

Looking at the docs, it’s mentioned that I can update the default value for a filter when instantiating the component: https://sdk.gooddata.com/gooddata-ui/docs/7.7.0/attribute_filter_component.html#define-the-default-selection-of-values-in-the-filter — but it’s not clear if I can programmatically change the state of the filter later. In other words, could a user click a button from outside the embed and update the state of a filter that’s already been instantiated?

Does anyone know if this is possible? If so, are there docs you can point me to?

Thanks!

icon

Best answer by Mort 6 December 2021, 16:14

View original

10 replies

Hello,

you should be able to communicate with embedded application via postMessage interface. Look at this article: https://help.gooddata.com/doc/enterprise/en/expand-your-gooddata-platform/gooddata-integration-into-your-application/embed-gooddata-elements-into-your-applications/embed-a-kpi-dashboard/communication-with-embedded-kpi-dashboards

I think that setFilterContext command is what you are looking for.

Best regards

Mort

Hi Mort,

Thanks for following up!

I just have a few questions based on this, as I’m still trying to understand the platform:

  • I’m hoping to use the native filters (the ones provided by the GoodData dashboard building UI). The docs you linked to say: The filter configuration overrides any filters that the dashboard may already have, such as existing attribute and date filters, URL filters, previous filter configuration, and so on. That maybe sounds like it wouldn’t update the display of those filters inside the dashboard. Do you know how existing filter UIs are affected by this?
  • The docs also mention “To add a new filter, you must be in the Edit mode.” I’m not clear what’s meant by “Edit mode” here. Are these calls possible to run in a view-only context for the end user?
  • The type of embedded filter described here is different than the React components from GoodData.UI. Do you know if the API you linked to would also work with forms included via GoodData.UI? This is a minor point, but I’m just curious.

Thanks!

 

Hi Gavin,

In order to use GoodData dashboards in your application you can either embed them via iframes, or you can built a React application and use GoodData.UI and the react components delivered in it. My colleague Mort has explained you how to set filter context in an application which uses embedding dashboards via iframes. 

  • Via setFilterContext command send to embedded dashboard you can set any filter context. See below picture
  • For example above when you click Filter button above setFilterContext is called and the dashboard filter has been updated with department=d11. So this command updates those attribute filters which is in dashboard
  • When you embed a dashboard via iframe and display it, you’re in view mode, in order for the user to create filters in it you need to put it to edit mode, via sending command switchToEdit. 
  • This API would not work in GoodData.UI you need to use there Attribute Filter component as you mentioned in your first message, and use the callback functions to get the values of the filter when the selection is confirmed by user.

 

Regarding your points:

You are right, it seems that that command replaces all the filters with new ones you define and you need to be in edit mode, i.e., not just consuming the dashboard but to editing it (same as if you click on Edit button at the right top corner).

GoodData.UI framework is for building of application via React. You can build your own filters and dashboards and connect everything together and change them in any way you want. However, you don’t need to build dashboard with layouting and other stuff from scratch. You can use Dashboard component (https://sdk.gooddata.com/gooddata-ui/docs/dashboard_intro.html) to render existing GoodData analytical dashboard (KPI dashboard) in your React app and can interact directly with it. That should add possibility to change filters.

If you however use iFrame to embed existing GoodData analytical dashboard you need to use postMessage API from the link I provided you in the previous message to communicate from your parent embedding application with embedded GoodData dashboard. Is that the approach you are investigating?

GoodData.UI framework is for building of application via React. You can build your own filters and dashboards and connect everything together and change them in any way you want. However, you don’t need to build dashboard with layouting and other stuff from scratch. You can use Dashboard component (https://sdk.gooddata.com/gooddata-ui/docs/dashboard_intro.html) to render existing GoodData analytical dashboard (KPI dashboard) in your React app and can interact directly with it. That should add possibility to change filters.

Hi Mort, thanks for this.

What we’re trying to do is allow users to be able to access pre-defined filters, and also for them to be able to save their own filter sets. For example a pre-defined filter set could change the state of five different filters so it shows users a particular view of the data. Or, users could update several filters themselves and we want a way to record the current filter set, save that with a name, and allow the user to choose that exact filter state again from a dropdown.

I was initially looking into doing this using GoodData.UI, however I was wondering how updating filters works with that.

From my original question:

Looking at the docs, it’s mentioned that I can update the default value for a filter when instantiating the component: https://sdk.gooddata.com/gooddata-ui/docs/7.7.0/attribute_filter_component.html#define-the-default-selection-of-values-in-the-filter — but it’s not clear if I can programmatically change the state of the filter later. In other words, could a user click a button from outside the embed and update the state of a filter that’s already been instantiated?

Do you happen to know how that works?

Thanks!

  • When you embed a dashboard via iframe and display it, you’re in view mode, in order for the user to create filters in it you need to put it to edit mode, via sending command switchToEdit. 
  • This API would not work in GoodData.UI you need to use there Attribute Filter component as you mentioned in your first message, and use the callback functions to get the values of the filter when the selection is confirmed by user.

Hi Ulku,

Thanks for this. Just to confirm, the “Filter” button you show in the above image sets the Department filter to d11. That’s done in View mode? Could there also be another button that when pressed calls a function to read the state of all current filters (including ones in their default state) and returns those values? Could this all happen in View mode (not Edit mode)?

That’s pretty much what we’re looking for, if so. This functionality is expected to be written separately in JavaScript outside of the embed. We just need a way to load and save sets of filters.

If there’s any code samples that describe this, it would be very helpful.

Thanks!

Another person working on this project pointed out to me that I might just be able to update `this.state.filter` inside of the filter component’s parent based on this code: https://sdk.gooddata.com/gooddata-ui/docs/7.7.0/attribute_filter_component.html#handle-the-change-of-the-value-selection-in-the-filter

Does that seem reasonable? It would be preferable to use GoodData.UI, as we’d like to have more control over the dashboard.

Thanks!

If you will build everything from scratch and use AttributeFilter components, I think that you should be able to change the state of the filter. You can just provide different “filter” prop. It should change its state IMHO. 

If you would use DashboardComponent I mentioned to handle your filters rendering and state, you can issue command to the component to change their state. For example this one that changes existing attribute filter https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui-dashboard/src/model/commands/filters.ts#L329

Another person working on this project pointed out to me that I might just be able to update `this.state.filter` inside of the filter component’s parent based on this code: https://sdk.gooddata.com/gooddata-ui/docs/7.7.0/attribute_filter_component.html#handle-the-change-of-the-value-selection-in-the-filter

Does that seem reasonable? It would be preferable to use GoodData.UI, as we’d like to have more control over the dashboard.

Thanks!

Yes, I came to the same conclusion, just a minute later than you 🙂 I should have read your questions more carefully at the start, instead I zoomed in onto your embedding use case. Sorry for that.

If you will build everything from scratch and use AttributeFilter components, I think that you should be able to change the state of the filter. You can just provide different “filter” prop. It should change its state IMHO. 

If you would use DashboardComponent I mentioned to handle your filters rendering and state, you can issue command to the component to change their state. For example this one that changes existing attribute filter https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui-dashboard/src/model/commands/filters.ts#L329

Perfect! Thanks for your help on this. I’m still trying to understand the platform and may come back with more questions, but this was very helpful.

Thanks again!

Reply