Customizing app for multi-client usage


I have got following code in my app.

public class MainLayout extends de.tricept.vaadin.ui.components.FlexBoxLayout {
  // Code

The file shared-styles.js loads some other files.

Now I have client 1 with the url https://url1… and client 2 with the url https://url2

It is a multi-client app. Based upon the incoming url (url1 or url2) I want to use a different style in my app.

I want to solve this problem by using different shared-styles.js (e.g. shared-styles-1.js for client 1 and shared-styles-2.js for client 2).

With the annotation above I am not able to switch between these two files.

How can I solve this problem programatically?

Thank you very much,

All files referenced by @JsModule for any component used in an application are included in a single JavaScript bundle file. When the application is bootstrapped, the whole bundle is loaded in the browser. If that bundle would contain two different variants of shared-styles.js then both would be put into effect which is most likely not what you want to achieve.

The most straightforward solution is to create separate production build bundles for client 1 and client 2 and then deploy them separately from each other. You can use a multi-module Maven project setup to achieve this.

A slightly more flexible approach is to include multiple variants in the same bundle, but wrap the contents so that they are not all activated. In practice, this means that the contents of e.g. shared-styles.js would be wrapped in a JavaScript function so that it isn’t activated just by loading the bundle, e.g.

window.activateClient1Styles = function() {
  // ... original contents here

You can then activate the appropriate styles from your MainLayout by using something like UI.getCurrent().get().getPage().executeJs("window.activateClient1Styles()");.

Another alternative is to define the values of the customer specific custom property values in your shared styles using css selector targeting theme attribute value:

  --lumo-tint-5pct: rgba(244, 238, 225, 0.05);
  --lumo-tint-10pct: rgba(244, 238, 225, 0.1);
  --lumo-tint-20pct: rgba(244, 238, 225, 0.2);
  --lumo-tint-30pct: rgba(244, 238, 225, 0.3);
  --lumo-tint-40pct: rgba(244, 238, 225, 0.4);
  --lumo-tint-50pct: rgba(244, 238, 225, 0.5);
  --lumo-tint-60pct: rgba(244, 238, 225, 0.6);
  --lumo-tint-70pct: rgba(244, 238, 225, 0.7);
  --lumo-tint-80pct: rgba(244, 238, 225, 0.8);
  --lumo-tint-90pct: rgba(244, 238, 225, 0.9);

And finally just set the used theme attribute value

mainLayout.getElement().setAttribute("theme", "customer1");

This technique will allow swapping the customization run-time.