Embed controls with the visual embedding


I’m now trying to do visual embedding but I have also some controls based on a datetime parameters and I want to embed them as well with the visuals. Is it possible to do so ? If yes, do you have any doc explaining this ?

Yes this is possible.

Have you looked into this?

Hello @saad , if you want to embed the controls along with the visuals you can just create a dashboard with controls (and parameters associated to them) and when embedding the dashboard you will be able to see them.

Here you have an example in Demo Central

This uses parameters tied to controls and filters, more info here.

Another option that you have, if you don’t want/need to use parameters, is to directly add a filter control to your analysis sheet (that will be also visible in the dashboard when embedded), more info here. If you don’t need to interact with the filter via the URL (this is what parameters allows you to do) this option is simpler.

Hope it helps, please mark this solution as solved if that’s the case also to help other members of the community., otherwise let us know.

Happy dashboarding!

1 Like

Hello @EnriqueS ,

Thanks for your answers. But in our business use case we want to offer our customers the possibility to select pre-made visuals, so from our side we decided to do visual embedding but the issue that these visuals are linked to controls (datetime filters)

Hello @saad, thanks for your response.

I understand, ok, so in that case you will need to customize this in your web application. You can for example use a datapicker in your web appkication and subscribe a JS function to the onChange event so when the user selects a date the JS function updates the required visuals by setting the appropriate date parameter that should be tied to the filter applied in that visual.

You can find an example of this here. In this example it works with an entire embedded dashboard but the implementation for embedded visuals would be similar, at a glance:

  1. Use parameters in your original dashboard (at least one for the date)
  2. Associate this parameter with a date filter in the visual(s) you want to filter
  3. Use date picker and subscribe a helper JS function to the onchange event
  4. JS function that will call the embedVisual helper function from the QS JS SDK specifying the selected date in 2. as parameter

Hope it helps!

1 Like