CODEWITHSUNDEEP
vaadinvaadin-flowhtml-title
Gerrit Sedlaczek
Gerrit Sedlaczek

Reputation: 1291

Vaadin Flow: setting the title

I currently try to set the title of the page.

Scenario

public class A extends FlexLayout implements RouterLayout {}

@Route(value = "b", layout = A.class)
public class B extends FlexLayout{}
@Route(value = "c", layout = A.class)
public class C extends FlexLayout{}

Attempts

  1. To do so I tried to call UI.getCurrent().getPage().setTitle("demo title") during afterNavigation. Unfortunately this does not work for the initial navigation (and neither worked adding an attachListener).

  2. I also tried configuring it using the PageConfigurator on the outermost RouterLayout like this:

    @Override
    public void configurePage(InitialPageSettings settings) {
        settings.addMetaTag("title", "demo title");
        settings.addMetaTag("og:title", "demo title");

        settings.addFavIcon("icon", "frontend/images/favicon.ico", "48x48");
    }
  1. HasDynamicTitle only seems to work if the implementing class also defines the @Route but not the encapsulating RouterLayout

Issue

For some reason the Router itself sets the title during navigation.

Stacktrace of the setTitleCall

The Router defines the title using JS and redefining document.title while Page.setTitle seems to only modify the html.head.title tag.

Question

How does one set the title in a single spot?
How does one prevent the Router form setting the title to the value of the current URL?

Note

Using the @PageTitle annotation is not an option as in my case the title is not known at compiletime.

Upvotes: 13

Views: 2023

Answers (1)

LOLWTFasdasd asdad
LOLWTFasdasd asdad

Reputation: 2903

Fixed title

If you have an unchanging page title you can just set it with an annotation @PageTitle. 

@PageTitle("home")
class HomeView extends Div {

  HomeView(){
    setText("This is the home view");
  }
}

Dynamic title

The official Vaadin Flow documentation suggests to use the HasDynamicTitle.

Example:

@Route(value = "blog")
class BlogPost extends implements HasDynamicTitle, HasUrlParameter<Long> {
  private String title = "";

  @Override
  public String getPageTitle() {
    return title;
  }

  @Override
  public void setParameter(BeforeEvent event,
        @OptionalParameter Long parameter) {
    if (parameter != null) {
      title = "Blog Post #" + parameter;
    } else {
      title = "Blog Home";
    }
  }
}

Source

Upvotes: 3

Related Questions