Docs

Docs

Updating Page Title during Navigation

How to update a page title during navigation.

You can update the page title in two ways during navigation: use the @PageTitle annotation; or implement HasDynamicTitle.

These approaches are mutually exclusive. Using both in the same class results in a runtime exception at startup.

Using the @PageTitle Annotation

The simplest way to update the Page Title is to use the @PageTitle annotation on your Component class:

Example: Using `@PageTitle`to update the page title:

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

    public HomeView() {
        setText("This is the home view");
    }
}
Note
 The @PageTitle annotation is read only from the actual navigation target; super classes and parent views aren’t considered.

Setting the Page Title Dynamically

As an alternative, you can also update the page title at runtime by implementing the HasDynamicTitle interface.

Example: Implementing HasDynamicTitle to update the page title.

@Route(value = "blog")
class BlogPost extends Component
        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";
        }
    }
}

BCB28141-05D7-4DF0-AC9C-C0D73C4FC97D