Page header customization in Vizro

Hello,
I’m experimenting with #vizro framework, it’s awesome! Didn’t find how to customize page header and put small container (say username and thumbnail picture) right before switcher. Is it possible?


Another question. Is it fair to say that any dash report with even complex callbacks and crossfiltering can be converted to vizro?
Thank you

1 Like

hi @os1

I’m not sure I would say every single Dash app could be converted to Vizro, because some people write pretty sophisticated Dash callbacks. But Vizro covers a wide range of possibilities.

Hey @os1 keep in mind that Vizro builds on top of Dash

As far as I understood, tries to build dash apps with less code by combining different components / techniques from dash into Vizro components.

So I would guess that even though you might be able to achieve what you want to do but this is not the main use case for Vizro.

But I’m sure @antony.milne or @li.nguyen can elaborate on that.

1 Like

Thanks for tagging us @AIMPED ! I missed this post earlier.

Hello @os1, I’m glad you like working with Vizro! It’s great to see the KPI dashboard I built in action as well! :star_struck:

As @AIMPED already mentioned, Vizro is built on top of Dash. While we aim to simplify the app configuration, it’s also designed to remain flexible to leverage Dash’s powerful capabilities. So, you should be able to do complex callbacks and cross-filtering within Vizro. Some advanced callbacks might not be supported by the Vizro Actions API, but you can insert the pure Dash callback code in those cases. If something does not work, then let us know! :slight_smile:

We’re currently refactoring how actions work in Vizro. This should make it more flexible and easier to customize in the future. @antony.milne is on vacation until next year, but he will keep you all updated on that!

Regarding your initial question, here’s an example of how to do it :slightly_smiling_face: It’s not as straight-forward as we haven’t made the page-header configurable yet (distinct from the controls and visual components). We first wanted to see how people would like to use it. Your example is a perfect use case for this! So in the future, we might simplify this process without the need to use custom components if we see more people want to do this.

I’m using custom components here. They allow you to add any Dash component that we don’t have a model for or to extend any of the existing models. In this case, we extend the vm.Dashboard model to access a container with the id="settings" and add some custom CSS to it. Here is the code example with the app: PyCafe - Vizro - Custom Vizro Morning Theme Dashboard

[EDIT] @petar-pejovic helped me remove some of the copy/paste code, so the current version is even shorter :rocket:

5 Likes