Navigating between forms with M3 Beta

I’m taking a look at the new Material 3 Beta layout (which looks great btw!)

The new NavigationLink components seem to open a completely new form, unlike with previous layouts I’ve used where the nav links in a side nav bar would open a new form within a container on the main form.

Is the new paradigm with M3 Beta to switch between completely independent forms for navigating around your app?

What’s the best practice for keeping common components such as common navigation links, an avatar etc. - create these as custom components and just wire them up on every form?

Thanks!

Hey @mattstibbs,

You are right, there has been a bit of a paradigm shift. Before we would replace the content on a page with new content. Now the recommended way to switch pages is to actually load a different form all together.

What makes this approach not a total pain is the use of Layouts. The layout will contain the common links, avatar, etc. You then add a slot that can be used to add additional content. Each of your forms will adopt a layout and you can then add your content to the slots for each particular form.

Here are some resources that may be helpful:
Layouts Docs
Porting an app to use Layouts
Using Layouts to Create a Multi-Page App

7 Likes

If you’re starting from a new app. It’s worth also considering adding the routing dependency early on, which implements this style of navigation by default.

https://routing-docs.anvil.works/

4 Likes

Thanks @racersmith - useful pointers and I’ve now swatted up on the new layouts stuff! Have managed to convert my existing app over to using layouts for now :+1:

Thanks @stucork - that looks interesting.

My app is small enough still that I think I could just migrate it to a fresh app, so I’ll probably do that.

I’m not quite following what the routing dependency is doing to the navigation paradigm vs the Layouts / open_form() approach? Is it an alternative to that approach, or does it build on it?

Edit: Having read the linked docs again, I think I now see that routing is adding a ‘routing engine’ layer on top of the Layouts / open_form() paradigm. So navigating to a URL essentially results in open_form() being called, but with some pre-work / pre-loading of data being done by the routing engine first.

Have I understood that correctly?

Does this mean that all navigation links, for instance in your layout, actually need to point to URLs as opposed to calling the open_form() method directly?

Or do the NavigationLinks now call some method in the routing engine?

Or is the routing engine purely for routing via URLs, and in fact nav within the app continues to be handled via the open_form() method?

Sorry - #lazyweb but just a couple of signposts here will be amazing :slight_smile:

Yeah you’ve pretty much summed it up

create your routes module which essentially links forms to urls.

You use the routing nav links instead of m3 nav links
You set the nav link paths which will match what you’ve already set in your routes
and then everything should just work

Under the hood, when you click a nav link, the browsers url will change and routing will open the correct form based on your routes.

1 Like

Thanks! Will give it a go!