question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Page title construction in RouterLayout issue

See original GitHub issue

Description of the bug

After these changes in Vaadin Flow

https://github.com/vaadin/flow/pull/13825/files#diff-32470b1fe06ff7a0966c7da3ded43f636d1a013b78ff34b06049c7915c4c359cR238

It’s not possible to construct custom page title outside of each view. Navigation lifecycle always rewrites title at the end, so it seems that there is no places left where we can call Page.setTitle("custom title").

Expected behavior

It’s must be possible to set custom page title after navigation finished

Minimal reproducible example

Minimal example from the real app: https://github.com/gigi/vaadin-23-pagetitle-issue

Main idea is to avoid service dependencies coupling and delegate control of common UI elements to layouts.

So there is custom PageChangedEvent event which can be used for updating layout menu, breadcrumbs construction, setting page title etc. This event is fired in After Navigation stage. Before these changes it was possible to construct page title and set it by hand: https://github.com/gigi/vaadin-23-pagetitle-issue/blob/main/src/main/java/com/example/demo/layout/BasicLayout.java#L50

Possible solutions:

  • Add support of HasDynamicTitle in the RouterLayout that has higher priority than Router’s getPageTitle or vice versa
  • Concatenate page title somewhere in response listeners (I don’t know where exactly and how to handle title template properly)
  • Inject necessary layout dependencies in each view and construct title in getPageTitle (quite annoying)

Versions

  • Vaadin: 23.1.0.rc1
  • Flow: 23.1.0.rc2
  • Java: BellSoft 17.0.3
  • OS: x86_64 Mac OS X 12.3.1
  • Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
MarcinVaadincommented, Dec 2, 2022

For me it makes sense to use HasDynamicTitle from first available parent layout if it implements such. It is easily accessible from active router target chain.

As for overriding title which was set during AfterNavigation - we could introduce a flag that will be set after title has been already set and will prevent triggering default AbstractNavigationStateRenderer.updatePageTitle.

After above change view updates title by PageChangedEvent on afterNavigation and Flow reads a title value from first parent layout.

Thanks @gigi for example project, it helped a lot.

0reactions
vaadin-botcommented, Dec 14, 2022

This ticket/PR has been released with Vaadin 24.0.0.alpha6 and is also targeting the upcoming stable 24.0.0 version.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Page titles with router event returns same title in Angular2
I have following routes and changing titles using router ...
Read more >
Router Layouts and Nested Router Targets - Vaadin
All parent layouts of a navigation target component must implement the RouterLayout interface.
Read more >
How To Update Page Title and Metadata with Vue.js and vue ...
Learn how to update your Vue single page application's title and metadata with vue-router.
Read more >
How to reuse common layouts in Angular using Router
Most of the web apps I worked on so far, had a design where different pages are using common layout. For example layout...
Read more >
Structures for Content Layout on Ionic Apps
Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found