Styling menu bar dynamically

Support
#1

Hi guys

I have the requirement to style main menu bar of the application dynamically. Basically I store the background color in the database, and want to apply it dynamically depending on the state of the application (basuically different companies has different colours and menu bar color indicates with which company the user works).

I was not able to find any inline styling capabilities nor in Cuba nor in VAADIN

I tried various approaches:

  1. Using Page.Styles. Basically I define new styles for some additional CSS class and then apply that class to my menubar. Problem is that I can not have predefined limited number of classes, for user can definme any hex color. Also there is no way to remove the classes from style and these build up and grow if application state changes constantly.

  2. Using JavaScript through VAADIN’s Javascript extension and applying inline styles to the DOM. This works fine and fast and does not build up the CSS. Problem is that everything is lost, if user hits browser refresh (F5). Was not able to figure out, how I can catch the event, I saw that there is refresh event in VAADIN’s UI, but as Cuba extends this in AppUI class, was not sure how I can extend this class and use it in my app.

Not sure if there is some other way how to do that.
Could you please help me with this?

Many thanks

#2

Hi,

If you inject CSS styles dynamically using Page.getCurrent().getStyles().add() they will be added only to current web page, but you are right application server state will grow.

In case of #2, all the changes to DOM will disappear since there is no state on server side that can be transferred to client.

You can fix #2 only if you extend client side of a component that apply these styles dynamically on client side depending on a state passed from a server. It is really complex and tedious work, so I’d rather not to go this way.

If you worry about these cases I recommend that you simply generate 32-64 predefined color options for your users, for instance, you can use the same options that are used in ColorPicker Swatches tab. Add your generated CSS for colour styles to your halo-ext.scss file and use the same colour names in your code. This is a simple and reliable way to provide dynamic colours that will not affect performance and consistency of your application.

1 Like